ZeroTool Workbench

색맹 시뮬레이터

8가지 색각 이상을 색상이나 이미지에 시뮬레이션. 적색맹, 녹색맹, 청색맹 등을 나란히 비교. 100% 클라이언트사이드, 업로드 불필요.

100% 클라이언트 사이드 데이터가 브라우저 밖으로 나가지 않습니다 무료 · 회원가입 불필요
원본
적색맹 적추체 결여
녹색맹 녹추체 결여
청색맹 청추체 결여
적색약 적추체 이상
녹색약 녹추체 이상
청색약 청추체 이상
전색맹 무색각
부분색약 저색각

사용 방법

  1. 색상 모드에서 HEX 색상을 입력하거나 색상 선택기를 사용하세요. 8가지 색각 이상 유형에서 해당 색상이 어떻게 보이는지 즉시 그리드로 표시됩니다.
  2. 이미지 모드에서 이미지를 드래그 앤 드롭하거나 클릭하여 선택하세요. 로컬에서 처리 후 원본과 8가지 시뮬레이션 결과가 나란히 표시됩니다.
  3. 색상 모드에서 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를 테스트하면 모든 사용자에게 접근 가능한 디자인을 보장할 수 있습니다.

이색형 색각과 비정상 삼색형 색각의 차이는?

이색형 색각(적색맹, 녹색맹, 청색맹)은 한 종류의 원추세포가 없어 해당 색상 채널을 전혀 인식할 수 없습니다. 비정상 삼색형 색각(적색약, 녹색약, 청색약)은 원추세포가 있지만 감도가 변이되어 색상 인식이 감소하지만 완전히 사라지지는 않습니다.