전 세계 약 3억 명이 특정 형태의 색각 결함(CVD, Color Vision Deficiency)을 가지고 있습니다. UI가 오류 표시, 차트 데이터 계열 구분, 필수 입력 필드 표시를 색상에만 의존한다면 상당수 사용자가 해당 정보를 놓칠 수 있습니다.

색각 이상의 원리

인간의 색각은 망막의 세 종류 원추세포에 의존합니다. L-원추세포(적색 파장 감지), M-원추세포(녹색), S-원추세포(청색)입니다. 특정 원추세포가 결여되면 이색형 색각(dichromacy), 감도가 편향되면 비정상 삼색형 색각(anomalous trichromacy)이 발생합니다.

디자인에 미치는 실질적 영향:

  • 녹색약(deuteranomaly) 은 가장 흔한 유형으로, 남성의 약 5–6%에 해당합니다. 녹색과 적색 구분이 어려워집니다. 신호등, 성공/오류 상태 표시, 차트 범례가 대표적인 위험 요소입니다.
  • 적색맹(protanopia)과 적색약(protanomaly) 은 적색 인식에 영향을 줍니다. 적색이 어둡고 탁하게 보이며 갈색에 가까워집니다.
  • 청색맹(tritanopia) 은 드물지만 청색–황색 분별에 영향을 줍니다. 황색 배경의 청색 링크가 사라져 보일 수 있습니다.
  • 전색맹(achromatopsia) — 완전한 색각 상실 — 은 극히 드물지만, UI가 색상만으로 의미를 전달한다면 테스트할 가치가 있습니다.

시뮬레이터 동작 원리

색각 이상 시뮬레이터는 입력값에 3×3 색 변환 행렬을 적용합니다. 이 행렬은 Viénot(1999)와 Brettel(1997) 연구에 기반하며, RGB 채널을 재매핑하여 각 CVD 유형의 시각 경험을 근사합니다.

색상 모드에서는 임의의 hex 값을 입력하면 8가지 유형의 변환 결과를 비교 그리드에서 즉시 확인할 수 있습니다. 이미지 모드에서는 스크린샷이나 디자인 시안을 드롭하면 Canvas API를 사용해 브라우저에서 처리하고 9장의 병렬 미리보기를 표시합니다.

이미지 데이터는 기기 밖으로 전송되지 않습니다. 계정 등록, 파일 업로드, 서버 처리 없이 동작합니다.

실전 테스트 워크플로

CVD 테스트를 디자인 프로세스에 통합하는 방법:

  1. 핵심 색상을 선별합니다. 색상 모드에서 오류 적색, 성공 녹색, 주요 액션 컬러, 데이터 시각화 팔레트를 테스트하세요. 두 색상이 녹색맹(deuteranopia) 시뮬레이션에서 동일한 hex로 매핑되면, 녹색 계열 CVD 사용자(남성의 약 6%)에게는 구별이 불가능합니다.

  2. UI를 캡처합니다. 이미지 모드로 전환해 대시보드, 폼 유효성 검사 상태, 차트의 스크린샷을 드롭하세요. 녹색 계열과 적색 계열 유형을 먼저 확인합니다. 적녹색 CVD가 전체 사례의 95% 이상을 차지합니다.

  3. 중복 채널로 보완합니다. 색상을 제거하는 것이 아니라 보조 채널을 추가합니다. 색상 상태 배지 옆에 아이콘을 배치하고, 차트 영역에 패턴이나 레이블을 추가하고, 링크에 밑줄을 적용합니다. 핵심은 색상이 정보 전달의 유일한 수단이 되지 않도록 하는 것입니다.

  4. 대비를 검증합니다. 색상 대비 검사기와 병행하여 조정된 색상이 WCAG AA 기준(본문 4.5:1, 큰 텍스트 및 UI 컴포넌트 3:1)을 충족하는지 확인하세요.

WCAG 요구사항

WCAG 2.1 성공 기준 1.4.1(“색상 사용”)은 다음과 같이 규정합니다:

색상이 정보 전달, 동작 지시, 응답 유도, 시각 요소 구분의 유일한 시각적 수단이 되어서는 안 된다.

이 기준은 폼 유효성 검사, 본문 내 링크, 차트 데이터, 상태 표시기, 인터랙티브 컨트롤에 적용됩니다. 시뮬레이터를 사용하면 직감에 의존하지 않고 체계적으로 감사할 수 있습니다.

적색과 녹색 너머

대부분의 접근성 테스트는 “적색과 녹색을 함께 쓰지 말 것”에서 멈춥니다. 다수의 사례를 커버하지만 미묘한 문제를 놓칩니다:

  • 주황색과 황록색은 녹색맹에서 병합될 수 있습니다. 경고 시스템에서 흔한 조합입니다.
  • 청색과 보라색은 청색약(tritanomaly)에서 구별이 어려워질 수 있습니다.
  • 어두운 배경 위의 고채도 색상은 밝은 배경 위의 저채도 색상보다 구분이 빠르게 무너집니다.

그리드 뷰에서 8가지 유형을 모두 테스트하는 데 몇 초면 충분합니다. 적녹색 휴리스틱이 놓치는 경계 사례를 포착할 수 있습니다.

지금 테스트하기

색각 이상 시뮬레이터를 열고 현재 프로젝트의 색상 팔레트를 테스트하세요. 오류 상태 색상부터 시작합니다. 녹색맹 시뮬레이션에서 기본 텍스트 색상과 병합된다면, 그것이 첫 번째 수정 대상입니다.