색각 이상 시뮬레이터

색각 결핍의 형태

대부분의 디자이너는 적록 계열 결핍이 가장 흔하기 때문에 먼저 듀테라노피아와 프로타노피아를 확인한 뒤, 더 넓은 검토를 위해 약한 결핍 모드와 청황 계열 모드를 추가합니다.

디자인에 미치는 영향

• 상태를 구분할 때 빨간색과 녹색만 사용하지 마세요. 오류/성공 표시는 색상 외에도 모양, 아이콘 또는 텍스트 레이블이 필요합니다. 빨간 X와 초록 체크는 구분되지만, 빨간 원과 초록 원은 그렇지 않을 수 있습니다.
• 차트: 패턴 채우기, 직접 레이블, 또는 시각적으로 뚜렷한 색상 팔레트(ColorBrewer, Viridis)를 사용하세요. 데이터 시각화에서는 신호등 색상 팔레트에만 의존하지 마세요.
• 지도: 지역을 구분할 때 경계선과 해칭을 함께 사용하세요. 색상만으로는 부족합니다.
• 하이퍼링크: 색상만으로 링크를 표시하지 마세요. 밑줄이나 굵기 차이는 정상 색각 사용자에게도 도움이 됩니다.
• 필수 양식 필드: 빨간 별표와 “필수” 표시 또는 빨간 경계선과 “필수” 보조 텍스트가 함께 표시됩니다.
• 상태 표시기: 신호등의 빨간색/황색/녹색은 보조적인 역할을 하며, 결코 유일한 신호로 사용되어서는 안 됩니다.

색각 접근성을 고려한 팔레트 선택

• Viridis (matplotlib 및 D3에서 기본적으로 사용됨): 보라색에서 노란색으로 변하는 색상으로, 인지적으로 균일합니다.
• ColorBrewer 질적 색상: 일반적인 CVD 형태에서도 구별 가능하도록 설계된 8가지 독특한 색조.
• 오카베-이토: 색각 이상 사용자의 접근성을 고려해 설계된 8색 팔레트입니다.

도구 및 테스트

• 시뮬레이터 미리보기 (이 도구), 빠른 시각적 확인
• WCAG 대비 검사기: 색상 인식 방식에 관계없이 텍스트가 읽히도록 보장합니다.
• 실제 사용자 테스트, 디자인을 실제 색각 이상 사용자에게 직접 보여주는 것만큼 확실한 검증은 없습니다.

흥미로운 사실

현대의 색각 시뮬레이터는 원추세포 반응을 RGB로 옮기는 과정을 행렬로 근사합니다. 이 미리보기는 실용적인 디자인 점검으로 사용하고, 의학적 진단이나 특정 개인의 지각을 정확히 복제한 것으로 보지 마세요.