ZeroTool Workbench
색맹 시뮬레이터
8가지 색각 이상을 색상이나 이미지에 시뮬레이션. 적색맹, 녹색맹, 청색맹 등을 나란히 비교. 100% 클라이언트사이드, 업로드 불필요.
사용 방법
- 색상 모드에서 HEX 색상을 입력하거나 색상 선택기를 사용하세요. 8가지 색각 이상 유형에서 해당 색상이 어떻게 보이는지 즉시 그리드로 표시됩니다.
- 이미지 모드에서 이미지를 드래그 앤 드롭하거나 클릭하여 선택하세요. 로컬에서 처리 후 원본과 8가지 시뮬레이션 결과가 나란히 표시됩니다.
- 색상 모드에서 HEX 값을 클릭하면 클립보드에 복사됩니다.
색각 이상이란
색각 이상(CVD)은 눈의 원추세포가 빛에 반응하는 방식에 영향을 미칩니다. 인간의 색각은 L-원추(적색), M-원추(녹색), S-원추(청색) 세 가지 유형에 의존합니다. 한 유형이 없거나 기능이 비정상이면 특정 색상을 구별하기 어려워집니다.
- 적색맹 / 적색약 — L-원추(적색 인식)에 영향. 빨간색이 어두워지고 갈색이나 녹색에 가까워집니다. 남성의 약 2%.
- 녹색맹 / 녹색약 — M-원추(녹색 인식)에 영향. 가장 흔한 유형으로 남성의 약 6%. 녹색과 빨간색이 비슷하게 보입니다.
- 청색맹 / 청색약 — S-원추(청색 인식)에 영향. 드물며 인구의 0.01% 미만. 파란색과 녹색 구별이 어렵습니다.
- 전색맹 / 부분색약 — 모든 원추 유형에 영향. 완전 전색맹은 회색조 시각이 되며, 부분색약은 색상 채도가 크게 감소합니다.
접근성 디자인 팁
이 도구를 색상 명도 대비 검사기와 함께 사용하여 포괄적인 접근성 감사를 수행하세요. 정보 전달에 색상만 의존하지 말고 모양, 패턴, 텍스트 레이블도 활용하세요. 적색맹과 녹색맹 시뮬레이션으로 오류 상태, 차트, 상태 표시기 등 핵심 UI 요소를 테스트하세요.
개인정보
모든 시뮬레이션은 브라우저에서 실행됩니다. 색상 데이터나 이미지가 서버로 전송되지 않습니다.
FAQ
어떤 색맹 유형을 시뮬레이션하나요?
8가지: 적색맹(protanopia), 녹색맹(deuteranopia), 청색맹(tritanopia), 적색약(protanomaly), 녹색약(deuteranomaly), 청색약(tritanomaly), 전색맹(achromatopsia), 부분색약(achromatomaly). 주요 색각 이상 유형을 모두 포함합니다.
시뮬레이션은 얼마나 정확한가요?
Viénot(1999)과 Brettel(1997) 색상 변환 행렬을 사용하며, 브라우저 DevTools 및 접근성 테스트 도구와 동일한 알고리즘입니다. 색약 유형은 60% 심각도로 보간합니다. 높은 근사치이지만 개인차가 있을 수 있습니다.
이미지가 업로드되나요?
아니요. 모든 처리는 Canvas API를 사용하여 브라우저에서 완전히 이루어집니다. 이미지가 기기 밖으로 전송되지 않습니다.
디자인의 색맹 접근성을 왜 확인해야 하나요?
남성의 약 8%, 여성의 약 0.5%가 어떤 형태의 색각 이상을 가지고 있습니다. WCAG 2.1 성공 기준 1.4.1은 정보 전달에 색상만 사용해서는 안 된다고 규정합니다. 시뮬레이터로 UI를 테스트하면 모든 사용자에게 접근 가능한 디자인을 보장할 수 있습니다.
이색형 색각과 비정상 삼색형 색각의 차이는?
이색형 색각(적색맹, 녹색맹, 청색맹)은 한 종류의 원추세포가 없어 해당 색상 채널을 전혀 인식할 수 없습니다. 비정상 삼색형 색각(적색약, 녹색약, 청색약)은 원추세포가 있지만 감도가 변이되어 색상 인식이 감소하지만 완전히 사라지지는 않습니다.