색에 무관한 콘텐츠 인식 - by. UXKM

  • A11Y
  • A11y Creation Tech
  • 웹 접근성 제작 기법
  • 색에 무관한 콘텐츠 인식
요약 설명

관련 지침 : 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
콘텐츠에서 제공하는 모든 정보는 특정한 색을 구별할 수 없는 사용자, 흑백 디스플레이 사용자, 흑백 인쇄물을 보는 사용자 및 고대비 모드 사용자가 인식할 수 있도록 제공해야 한다.

관련 WCAG 2.2 성공 기준

  • 색에 의한 정보 표현 방지

    차트나 그래프 등을 고대비 모드로 화면에 표시하면 모든 색이 단색(회색조)으로 표시되어 사용자가 색을 구분하지 못하는 경우가 발생합니다. 따라서 사용자가 경조 모드에서도 콘텐츠를 인식할 수 있도록 색만을 이용하여 정보를 제공하지 않아야 합니다.
    즉, 색은 시각적인 강조를 위해서만 사용해야 합니다.

  • 무늬를 이용한 정보 제공

    서로 다른 정보를 무늬로 구분하여 표시하면 경조 모드 사용자, 단색 디스플레이 사용자, 흑백 인쇄물의 사용자도 정보를 충분히 구분할 수 있습니다. 무늬와 색을 동시에 이용한 콘텐츠는 색각장애가 있는 사용자도 접근이 가능합니다.

1.4.1 색에 의존하지 않음 (Use of Color) (Level A) WAI - Understanding Use of Color MDN - 색상 접근성

기대효과

  • 색의 차이가 정보의 다름을 나타내지 않으므로, 색을 인지하는 데 장애가 있는 사용자도 혼동을 일으킬 염려가 없게 됩니다.
  • 흑백 스크린(구형 PDA 등) 또는 고대비 모드 사용자도 콘텐츠의 내용이나 구조를 손쉽게 이해할 수 있습니다.

필요성

정보 전달이나 조작을 색상에만 의존해서는 안 되며, 색을 구분하지 못하는 사용자도 텍스트, 패턴, 라벨 등 다른 방법으로 정보를 인식할 수 있도록 제공해야 합니다.

  • 색각이상 또는 흑백 디스플레이 사용자는 색상만으로는 정보를 구분할 수 없습니다.
  • 중요 정보나 동작 안내가 색상에만 의존하면 접근성이 확보되지 않습니다.
  • 보조 지표(텍스트, 기호 등)를 제공하면 인지와 접근성을 향상시킬 수 있습니다.

대상

  • 사용자 유형
  • 이유

  • 색각이상 사용자

    빨강/초록, 파랑/보라 등 색 구분 어려움

  • 저시력 사용자

    대비가 낮을 경우 색 인식 어려움

  • 인지장애 사용자

    색으로만 지시 시 이해 어려움

체크리스트

  • 색상 외에도 텍스트, 아이콘, 테두리, 패턴 등 보조 수단이 있는가?
  • 색으로만 구분되는 요소(예: 버튼 상태, 오류 메시지 등)가 있는가?
  • 색상이 구분되지 않아도 동일한 정보가 제공되는가?

테스트 방법

  • 화면을 흑백 모드로 전환하여 테스트합니다.
  • 색맹 시뮬레이션 도구(Color Oracle 등)를 사용합니다.
  • 텍스트 또는 아이콘이 함께 제공되는지 확인합니다.

QA 지표

  • 색상 단독 정보 전달 비율
  • 색각 시뮬레이션에서 정보 구분 가능률
  • 비색상 사용자 대상 정보 이해 가능성

개발방법

html 예시

Vue 예시

React 예시

점검 기준

  • 색상 외에도 다른 수단으로 정보 전달이 이루어지는가?
  • 시각적 정보가 색상 외에도 인식 가능한가?
  • UI 상태 변화(활성/비활성 등)가 색상 외 수단으로도 구분 가능한가?

점검 방법

  • 색맹 시뮬레이션 도구를 사용합니다.
  • 텍스트, 아이콘, 테두리 등 시각 외 정보로도 전달이 가능한지 확인합니다.
  • 흑백 프린트에서도 정보가 전달 가능한지 확인합니다.

준수/미준수 사례

미준수 사례 (색상만으로 정보 전달)

문제점 :
필수 항목을 오직 색상(빨간색)으로만 구분하고 있어, 색각 이상 사용자나 보조기기 이용자가 인식하기 어렵습니다.
비필수 항목과의 구분이 명확하지 않습니다.

준수 사례

설명 :
색상 외에도 * 기호를 통해 필수 항목임을 시각적으로 명확히 전달합니다.
aria-required="true" 속성으로 스크린 리더 사용자에게도 필수 입력 필드임을 알려줍니다.
전화번호 항목은 필수 아님을 암시하며 시각적/보조기기 모두에서 혼동을 줄여줍니다.

관련 영상

출처 : AOA11Y (Academy Of Accessibility)

접근성 테스트 도구 활용 점검방법

결론

접근성은 시작은 있지만 끝이 없는 작업입니다.
오류 항목을 정기적으로 점검하여 접근성 개선을 한다면 점차 검사를 할 항목이 줄어들게 될 것입니다. 모두가 차별 없이 서비스를 이용할 수 있도록 접근성 유지를 위한 모두의 노력이 필요합니다. 무엇보다 접근성 작업은 서비스를 제공한다면 선택이 아닌 필수로 지켜야하는 항목임을 잊지 말아야 합니다.

접근성 작업 시 점검 필수사항

  • 접근성 가이드(WCAG, KWCAG, WAI-ARIA) 내용 숙지
  • 접근성 체크리스트 작성
  • 접근성 자동 및 수동 검사(스크린리더) 진행
  • 접근성 검사 툴(Lighthouse Accessibility 등) 활용 오류 항목 개선 및 내용 정리
  • 접근성 사용자 테스트
  • 접근성 정기적인 모니터링