언제 쓰나
디자인 시스템의 색을 결정한 직후, 데이터 시각화의 카테고리 색을 정한 직후, 또는 공공기관 외주 (KWCAG 2.2 준수 의무) 전에 한 번 검증할 때 씁니다. 대비 (contrast) 가 통과한 색쌍이라도 적록색약자에겐 같은 회색으로 보이는 경우가 있어, 색만으로 의미를 전달하는 차트·버튼·라벨이 무용지물이 됩니다.
두 모드
- 팔레트 — hex / rgb / oklch 토큰을 한 개 또는 여러 개 (최대 24색) 붙여넣으면 4 시각으로 동시 비교. color-palette 의 11-stop 결과 통째로 넣어 두 stop 이 구분되는지 확인 가능.
- 이미지 — JPG / PNG / WebP 한 장 (최대 20MB) 을 업로드하면 4 시각으로 변환된 이미지 4 장 + 원본을 동시에 표시. 차트·인포그래픽·UI 스크린샷 검증.
4 시각 type
- Deuteranopia (deutan) — M-cone 결손, 적록 색맹의 약 75% 비중
- Protanopia (protan) — L-cone 결손, 적록 색맹의 약 25%
- Tritanopia (tritan) — S-cone 결손, 청황 색맹 (< 0.01% 빈도)
- Achromatopsia (전색맹) — 모든 cone 결손, 회색조
각 type 의 부분 결손 (deuteranomaly · protanomaly) 은 동일 매트릭스의 severity 비례 — 본 도구는 v1 에서 완전 anopia 만 지원합니다.
시뮬레이션 모델
Machado, Oliveira, Fernandes (2009) 의 sRGB 직접 변환 매트릭스 (severity 1.0). 퍼포먼스를 위해 gamma-encoded sRGB 에 직접 적용 — linear-RGB 경유 대비 약 3 배 빠르며 디자이너 프리뷰 용도로 시각적 차이가 미미합니다. 정확한 의학적 진단용으로는 부적합.
KWCAG 1.4.1 — 색만으로 의미 전달 금지
한국형 웹 접근성 지침 (KWCAG) 2.2 의 1.4.1 항목, 그리고 WCAG 2.1 의 1.4.1 항목은 모두 "색만으로 정보·동작·반응을 식별·구분·강조하지 않을 것" 을 요구합니다. 본 도구의 4 시각 비교에서 같은 색으로 수렴되는 stop 이 보이면 — 색 외 다른 단서 (모양 · 텍스트 · 패턴 · 위치) 를 추가해야 합니다.
로컬 처리
이미지 디코드는 createImageBitmap, 시뮬레이션은 Canvas getImageData + 매트릭스 산술. 모두 브라우저 안에서. 매트릭스 계수가 코드에 박혀 있어 외부 모델 다운로드도 없습니다 — 추가 의존성 0KB.
이럴 땐 안 맞습니다
- 의학 진단 — 본 도구는 디자인 검증용. 의료용은 표준화된 임상 검사 (이시하라 등) 를 사용하세요.
- 색약 사용자가 보는 정확한 색 — 시뮬레이션은 모델이고 개인차가 있습니다. 실제 사용자 테스트를 대체하지 않습니다.
- HEIC (iPhone 사진) — 브라우저가 디코드하지 못합니다. 먼저 JPG/PNG 로 내보내기 하세요.
이미지 · 팔레트 모두 페이지 안에서
Machado et al. 2009 매트릭스 산술 — 외부 모델·서버 호출 없음. 이미지 픽셀 처리는 Canvas getImageData, 결과는 페이지 안에서만 표시됩니다. 업로드 흔적 없음.