liminfo

Color Blindness Simulator

색각이상 시뮬레이터 - 8가지 유형 시뮬레이션

Original

#e53e3e

Protanopia

적색맹 (1형)

#9d9b3e

Deuteranopia

녹색맹 (2형)

#a6b33e

Tritanopia

청색맹 (3형)

#dd3e3e

Protanomaly

적색 약

#c6763e

Deuteranomaly

녹색 약

#c4693e

Tritanomaly

청색 약

#df3e3e

Achromatopsia

전색맹

#707070

Achromatomaly

색약

#a55959

Color Blindness Simulator 소개

색맹 시뮬레이터는 선택한 16진수 색상에 과학적으로 검증된 색상 변환 행렬을 적용하여, 해당 색상이 8가지 색각 이상 유형에서 어떻게 보이는지를 나란히 비교하여 보여줍니다. 지원 유형은 적색맹(Protanopia), 녹색맹(Deuteranopia), 청색맹(Tritanopia), 적색 약시(Protanomaly), 녹색 약시(Deuteranomaly), 청색 약시(Tritanomaly), 전색맹(Achromatopsia), 색약(Achromatomaly)입니다. 각 행렬은 Daltonize 연구 방법론에서 도출된 공개된 3×3 선형 변환입니다.

UI/UX 디자이너, 프론트엔드 개발자, 그래픽 아티스트, 접근성 전문가들은 이 도구를 사용하여 자신의 색상 선택이 색각 이상 사용자에게도 구별 가능한지 확인합니다. 색각 이상은 남성의 약 8%, 여성의 약 0.5%에 영향을 미칩니다. 색맹을 고려한 디자인은 WCAG 2.1 성공 기준 1.4.1(색상 사용)의 요건으로, 정보 전달을 위해 색상만을 단독으로 사용하는 것을 금지합니다.

기술적으로 이 도구는 입력된 16진수 문자열을 RGB 삼중값으로 변환한 뒤, 각 색각 이상 유형에 대해 행렬 곱셈을 적용합니다. 3×3 행렬은 원본 R, G, B 채널을 혼합하여 각 색각 이상의 감소된 스펙트럼 감도를 나타내는 시뮬레이션 채널로 변환합니다. 결과는 0~255 범위로 제한되어 16진수로 변환되어 표시됩니다. 모든 처리는 React의 useMemo 훅을 통해 브라우저에서 실행됩니다.

주요 기능

  • 8가지 색각 이상 유형: 적색맹, 녹색맹, 청색맹, 적색 약시, 녹색 약시, 청색 약시, 전색맹, 색약
  • 원본 색상과 나란히 표시되는 각 유형별 시각적 색상 견본
  • 시각적 색상 선택기와 텍스트 입력 — 시각적으로 선택하거나 16진수 코드 직접 입력
  • 비교 참고용으로 각 견본에 표시되는 시뮬레이션된 16진수 값
  • Daltonize 연구 기반의 과학적 3×3 행렬 변환
  • React useMemo를 사용한 100% 클라이언트 사이드 처리 — 즉각적, 서버 지연 없음
  • 모든 색각 이상 유형 명칭에 대한 한국어·영어 레이블 지원
  • 모든 화면 크기에서 편리한 나란한 비교를 위한 반응형 그리드 레이아웃

자주 묻는 질문

색맹이란 무엇인가요?

색맹(색각 이상)은 눈의 원추세포가 특정 파장의 빛에 대해 감도가 감소하거나 없는 상태입니다. 가장 흔한 형태는 적녹 색맹(적색맹과 녹색맹)으로 남성 약 12명 중 1명에게 영향을 미칩니다. 청황 색각 이상(청색맹)은 더 드물고, 전색맹은 매우 희귀합니다.

적색맹과 녹색맹의 차이는 무엇인가요?

둘 다 적녹 색맹의 형태이지만 영향을 받는 원추세포 유형이 다릅니다. 적색맹은 L형 원추세포(장파장, 적색 감수성)가 없거나 기능하지 않아 빨간색이 어둡고 녹색처럼 보입니다. 녹색맹은 M형 원추세포(중파장, 녹색 감수성)가 없어 빨간색과 녹색이 비슷한 갈색 또는 노란색 계열로 보입니다.

시뮬레이션 행렬은 어떻게 작동하나요?

시뮬레이션은 색상의 RGB 값에 3×3 행렬을 적용합니다. 행렬의 각 행은 원본 적색, 녹색, 청색 채널이 시뮬레이션 채널에 얼마나 기여하는지를 결정합니다. 예를 들어 적색맹 행렬은 적색 채널의 감도를 낮추고 녹색과 청색에 재분배하여 L형 원추세포 기능 상실을 모방합니다.

디자이너가 색맹을 고려해야 하는 이유는 무엇인가요?

전 세계적으로 약 3억 명이 색각 이상을 가지고 있습니다. 오류를 빨간색, 성공을 녹색으로만 표시하는 등 색상만으로 의미를 전달하는 디자인은 색각 이상 사용자에게 정보가 전달되지 않을 수 있습니다. WCAG 2.1 기준 1.4.1은 정보 전달을 위해 색상을 유일한 시각적 수단으로 사용하는 것을 금지합니다.

색각 이상 사용자가 구별하기 어려운 16진수 색상은 무엇인가요?

빨간색(#FF0000)과 녹색(#00FF00)은 적색맹이나 녹색맹 사용자에게 가장 문제가 되는 조합으로, 거의 동일하게 보일 수 있습니다. 주황색과 빨간색도 자주 혼동됩니다. 청색맹의 경우 파란색과 녹색이 비슷하게 보일 수 있으며, 노란색과 보라색도 마찬가지입니다. 이 도구를 사용하면 사용하려는 특정 색상을 미리 검증할 수 있습니다.

색각 이상 사용자를 위한 접근성 높은 디자인 방법은?

색상과 함께 아이콘, 패턴, 레이블, 텍스트 등 중복 단서를 사용하세요. 시뮬레이션에서도 구별 가능한 팔레트를 선택하세요 — 예를 들어 빨간색/녹색 대신 주황색/파란색 조합을 사용하는 것이 좋습니다. 이 시뮬레이터와 대비 검사 도구를 함께 사용하여 게시 전에 선택을 검증하세요.

전색맹이란 무엇인가요?

전색맹은 색맹 중 가장 드물고 심각한 형태로, 색을 전혀 인식하지 못하고 회색 음영만 볼 수 있습니다. 원추세포(세 가지 유형 모두)가 없거나 기능하지 않아 발생합니다. 시뮬레이션 행렬은 표준 휘도 계수(0.299 R, 0.587 G, 0.114 B)를 사용하여 RGB 삼중값을 가중 회색조 값으로 변환합니다.

이 시뮬레이터는 전문적인 접근성 감사에 충분히 정확한가요?

이 시뮬레이터는 공개된 선형화 행렬을 기반으로 좋은 근사값을 제공하며 디자인 검토 및 일반적인 접근성 테스트에 적합합니다. 공식 WCAG 감사를 위해서는 공식 접근성 테스트 도구와 색각 이상 참여자를 포함한 실제 사용자 테스트를 병행해야 합니다.