색에 무관한 인식 - by. UXKM

요약 설명

관련 지침 : 화면에 표시되는 모든 정보는 색에 관계없이 인식될 수 있어야 한다.
모바일 앱에서 제공되는 콘텐츠는 색에 의존하지 않고 모든 정보가 전달될 수 있어야 합니다. 사용자가 색각 이상, 시각 장애, 또는 기타 이유로 색 구분이 어려운 상황에서도 정보를 인식할 수 있도록 콘텐츠를 구성해야 합니다.

WCAG 2.2 Quick Reference - Use of Color

필요성

색각 이상이나 시각 장애를 가진 사용자는 색상 구분이 어려울 수 있습니다. 이들이 중요한 정보를 놓치지 않도록 색상 외에도 텍스트, 기호, 패턴 등을 사용해 정보를 제공해야 합니다.
색에 의존하지 않는 정보 제공은 접근성을 보장하고, 사용자 경험을 개선하며, 법적 요구사항을 충족하는 데 필수적입니다.

대상

  • 색각 이상 사용자

    색을 구분하기 어려운 사용자.

  • 시각 장애인

    색 정보를 인식할 수 없는 사용자.

  • 고령자

    색 인식 능력이 저하된 사용자.

  • 비장애인 포함 전체 사용자

    화면의 가시성 문제나 기기 설정으로 인해 색 구분이 어려운 사용자.

체크리스트

  • 색상 외의 시각적 단서 제공

    중요한 정보나 상태를 색상 외의 방법(예: 텍스트, 기호)으로도 전달하고 있는가?

  • 텍스트 또는 아이콘 추가

    색을 통해 상태나 피드백을 제공하는 경우, 추가적인 텍스트나 아이콘으로 설명이 제공되는가?

  • 배경과 대비

    텍스트와 배경색 간의 충분한 색 대비를 통해 모든 사용자가 정보를 인식할 수 있는가?

  • 색각 이상 시뮬레이션 테스트

    색각 이상 사용자들에게 어떻게 보일지 시뮬레이션 테스트가 이루어졌는가?

기기별 테스트 방법

iOS

  • 색상 필터 활성화

    설정 > 접근성 > 디스플레이 및 텍스트 크기 > 색상 필터를 사용해 앱의 콘텐츠가 색각 이상 사용자에게 어떻게 보이는지 테스트합니다.

  • VoiceOver 활성화

    텍스트나 기호를 통해 충분히 설명이 제공되고 있는지 확인합니다.

  • 상세 가이드

    iPhone 사용 설명서 - VoiceOver

Android

  • 색상 보정 모드

    설정 > 접근성 > 색상 보정 기능을 사용하여 색각 이상 모드를 활성화하고 테스트합니다.

  • TalkBack 활성화

    색 외의 시각적 단서가 제대로 제공되고 있는지 확인합니다.

  • 상세 가이드

    Android 접근성 고객센터 - TalkBack 및 Android

QA 지표

  • 색상 외 정보 제공 비율

    색상 외의 텍스트, 기호, 아이콘 등을 통해 정보를 제공하는 비율.

  • 색상 대비 비율

    텍스트와 배경 사이의 색상 대비 비율(최소 4.5:1 이상)을 유지하는지 여부.

  • 시뮬레이션 테스트

    색각 이상 시뮬레이션 테스트 결과 및 사용자 피드백.

개발방법

네이티브

iOS

경고 메시지 제공

Android

버튼 색상과 텍스트로 상태 표시

하이브리드

하이브리드(html)

하이브리드(Vue)

하이브리드(React)

점검 기준

색상으로 정보를 구분할 경우, 색상 이외의 다른 방법으로도 동등한 내용을 전달합니다.

오류유형

  • 색상 외 정보 제공 여부

    색상만으로 정보를 전달하지 않고 텍스트, 기호, 패턴 등의 추가적인 시각적 단서가 있는가?

  • 색상 대비 확인

    텍스트와 배경 간의 색상 대비가 최소 4.5:1을 유지하는가?

  • 색각 이상 사용자를 고려한 설계

    색각 이상 사용자가 정보를 인식할 수 있도록 보완적인 디자인 요소가 적용되었는가?

점검 방법

iOS

  • VoiceOver 사용

    색상 외의 정보 제공 여부를 확인합니다.

  • 색상 필터 사용

    다양한 색각 이상 조건에서 앱의 가시성을 테스트합니다.

Android

  • TalkBack 사용

    색 외의 정보가 적절히 제공되는지 확인합니다.

  • 색상 보정 모드 사용

    색각 이상 사용자에 대한 대응 여부를 테스트합니다.

방법 1 (네이티브-문서 제공기준)

색상으로 정보를 구분하는 경우, 색상을 대체할 수 있는 정보(텍스트, 이미지, 심볼 등)도 함께 제공하는지를 점검합니다.

  • 화면의 구성 요소(List 등)들이 색으로만 구분토록 되어 있는지 확인합니다.
  • 화면 내 콘텐츠(이미지, 그래프, 차트 등)이 색상만으로 구분토록 되어 있는 지 확인합니다.
  • 화면 변환 (현재 위치/변경 화면)이 색상만으로 제공 되어 있는지 확인합니다.

방법 2 (네이티브-문서 제공기준)

접근성 기능의 흑백음영 기능을 이용하여 색상정보 없이 콘텐츠 정보를 인식할 수 있는지 확인합니다.

[출처 : 모바일 애플리케이션 접근성 제작기법]

방법 3 (하이브리드)

크롬(Chrome) 브라우저 요소검사를 이용하여 점검합니다.

  • 현재 페이지에서 F12 를 눌러 Chrome DevTools를 실행합니다.
  • 우측 상단 메뉴 → 도구 더 보기 → 렌더링을 클릭합니다.
  • 스크롤을 내려 색맹 에뮬레이션을 찾고 에뮬레이션 옵션을 변경합니다.
  • 색맹 에뮬레이션(Emulate vision deficiencies) 옵션을 변경하며 위 이미지의 변화를 확인합니다.
  • Customize and Control DevTools → More tools → Rendering


[크롬(Chrome) 브라우저 색맹 에뮬레이션 테스트]

방법 4 (하이브리드 : 색맹 에뮬레이션)

색맹 에뮬레이션(Emulate vision deficiencies)은 아래의 6개 옵션을 제공합니다.

  • 흐릿한 시야(Blurred vision)
    블러 모드를 선택하면 화면이 뿌옇게 표시되어 저시력 장애를 간접 체험할 수 있게 합니다.
     
    [저시력 장애 간접 체험]
  • 대비 감소(Reduced contrast)
  • 제1색맹(적색맹) / 제2색맹(녹색맹)
    Deuteranopia(no green / no red): 적색과 녹색을 구별할 수 없고, 어두운 색상으로 인식합니다.
    적색맹 이상(Protanopia) 또는 녹색맹(Deuteranopia) 모드를 선택하면 빨간색과 녹색 대신 노란색과 갈색으로 표시되는 색각 이상을 체험할 수 있습니다.
     
    [적녹 색각 이상 간접 경험]
  • 제3색맹(청색맹)
    Tritanopia(no blue): 청색과 노란색을 구분할 수 없습니다.
     
    [청황 색각 이상 간접 경험]
  • 색맹(전색맹)
    색상을 전혀 구별할 수 없습니다. 약 4만 명 중에 한 명 정도로 나타나는 희귀 유전질환입니다.
    전색맹(Achromatopsia) 모드를 선택하면 빨간색, 녹색, 파란색을 모두 구분할 수 없는 흑백 비전(Vision)으로 화면에 표시되어 간접적으로 체험할 수 있습니다.
     
    [전 색맹 간접 경험 ]

준수 사례

사례 1) 색상에만 의존하지 않는 그래프 정보를 제공한 경우

그래프 내 값을 제공하여 그래프 구분이 가능할 수 있도록 제공합니다.

[출처 : 모바일애플리케이션콘텐츠접근성지침2.0]

사례 2) 선택된 항목을 적절하게 제공한 경우

'중형' 항목에 테두리 선을 제공하여 색상 정보 없이도 선택된 콘텐츠를 인식 가능하게 테두리를 제공합니다.

[출처 : 모바일애플리케이션콘텐츠접근성지침2.0]

미준수 사례

사례 1) 그래프 내 각 항목 등 정보의 구분을 색상으로만 표시하여, 색상 제거 시 동등한 정보 전달이 되지 않는 경우

납부 금액 그래프의 구분을 색상으로만 구분하여 제공하고 있습니다.

[출처 : 모바일애플리케이션콘텐츠접근성지침2.0]

사례 2) 그래프 내 각 항목 등 정보의 구분을 색상으로만 표시하여, 색상 제거 시 동등한 정보 전달이 되지 않는 경우

전국의 투표결과 색상으로만 제공하고 있습니다.

[출처 : 모바일애플리케이션콘텐츠접근성지침2.0]

사례 3) 선택된 항목을 색상으로만 제공한 경우

'휴대폰' 선택 정보를 색상으로만 제공하고 있고, '약관 동의' 선택 정보를 색상으로만 제공하고 있습니다.

[출처 : 모바일애플리케이션콘텐츠접근성지침2.0]

관련 영상

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

결론

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

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

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