색각 이상 시뮬레이터 (적록·청황 색약 미리보기)

차트·지도·UI 화면을 올려 색각 이상이 있는 사람에게 어떻게 보이는지 확인합니다. 빨강·초록으로만 구분한 요소가 구별되지 않는다면 명도 차이나 패턴·라벨을 함께 써야 합니다.

큰 이미지는 축소해 처리합니다. 200~2000
색각 이상 시뮬레이터 (적록·청황 색약 미리보기)모두의계산기

색각 이상은 얼마나 흔한가

적록 색각 이상은 X염색체 유전이라 남성에게 많아 한국 남성의 약 5~6%, 여성의 0.4% 정도로 알려져 있습니다. 100명이 보는 화면이라면 그중 서너 명은 빨강과 초록을 구분하기 어렵다는 뜻입니다. 가장 흔한 것은 녹색약(Deuteranomaly)이고, 완전히 한 종류의 원추세포가 없는 경우(Deuteranopia)보다 감도가 낮은 경우(-anomaly)가 훨씬 많습니다. 정도 옵션이 이 차이를 흉내 냅니다. 청황색약과 완전 색맹은 매우 드뭅니다.

시뮬레이션 원리

이미지의 각 픽셀 색을 감마를 푼 선형 RGB로 바꾼 뒤 3×3 행렬을 곱해 해당 유형의 사람이 지각하는 색으로 사상하고, 다시 감마를 입혀 출력합니다. 행렬은 Machado, Oliveira, Fernandes(2009)가 원추세포 반응 모델로 유도한 값으로 학술·디자인 도구에서 널리 쓰입니다. 정도 60%·30%는 항등 행렬과 완전 행렬을 선형 보간한 근사이며 논문의 정도별 행렬과는 약간 다릅니다. 흑백은 상대 휘도(0.2126R + 0.7152G + 0.0722B)만 남긴 것입니다. 처리는 전부 브라우저 캔버스에서 이루어집니다.

디자인에서 지켜야 할 것

WCAG 1.4.1(색 사용)은 색만으로 정보를 전달하지 말라고 요구합니다. 실무 규칙으로는 (1) 빨강·초록 쌍 대신 파랑·주황처럼 적록색약에서도 구분되는 조합을 쓰고, (2) 색 사이에 명도 차이를 두어 흑백으로 바꿔도 구분되게 하며, (3) 차트에는 범례 색 외에 선 모양·마커·직접 라벨을 붙이고, (4) 오류·성공 상태에는 아이콘과 문구를 함께 넣습니다. 지도·히트맵에는 viridis처럼 색각 이상을 고려해 설계된 색 배열이 있습니다.

흑백 변환을 먼저 보는 이유

흑백에서 구분되는 디자인은 명도 대비로 정보를 전달하고 있다는 뜻이므로 어떤 유형의 색각 이상에서도 읽힙니다. 반대로 흑백에서 구분이 안 되면 색상(hue)에만 기대고 있는 것입니다. 네 장을 모두 볼 시간이 없다면 흑백 한 장만이라도 확인하는 것이 효율적입니다.

자주 묻는 질문

결과가 실제 색약인 사람이 보는 것과 같나요?

모델 기반 근사입니다. 같은 유형이라도 정도가 다르고 모니터·조명에 따라 달라지므로, "구분이 되는가"를 판단하는 용도로만 쓰고 실제 사용자 테스트를 대체하지는 못합니다.

이미지가 흐려졌어요.

긴 변을 설정값으로 줄여 처리합니다. 원본 크기가 필요하면 긴 변을 2000으로 올리세요. 그 이상은 브라우저 메모리 부담이 커서 제한합니다.

색 두 개만 빠르게 확인하고 싶어요.

두 색을 나란히 칠한 작은 이미지를 만들어 올리거나, 색상 변환 도구에서 두 색의 명도 대비를 확인하는 방법이 빠릅니다.

함께 보기