색맹 시뮬레이터

예시: KRDS 시스템 색상

범정부 UI/UX 디자인 시스템(KRDS) 패키지 krds-uiux 1.1.0의 토큰에서 상태를 나타내는 50단계 색은 오류(danger) #DE3412, 성공(success) #228738, 경고(warning) #9E6A00, 정보(information) #0B78CB입니다. 네 색 모두 흰 배경과의 명도 대비가 4.56~4.65:1이고, 서로 간의 대비는 1.02:1 이하입니다. 밝기는 거의 같고 색상만 다릅니다. “색” 탭에 넣으면:

• 녹색맹에서 오류는 #948300, 경고는 #897907로 바뀌어 ΔEOK 0.034, 명도 대비 1.14:1로 “구분 어려움”입니다.
• 청색맹에서는 성공과 정보가 ΔEOK 0.051(1.13:1)로 가까워집니다.
• 전색맹(흑백)에서는 오류와 성공이 ΔEOK 0.000, 명도 대비 1.00:1로 완전히 같은 회색입니다.

네 색 모두 흰 배경 위 글자 색으로 4.5:1을 넘으므로 색 자체를 바꿀 필요는 없습니다. 상태를 색으로만 알리지 말고 아이콘과 문구를 함께 표시하면 됩니다.

웹 접근성 인증과의 관계

한국형 웹 콘텐츠 접근성 지침 2.2(KS X OT0003) 5.4.1은 “콘텐츠는 색에 관계없이 인식될 수 있어야 한다”고 정합니다. 한국지능정보사회진흥원의 웹 접근성 품질인증 표준심사 지침(2024년 10월 개정안 중 심사 기준 발췌, 한국디지털접근성진흥원 인증 소개 페이지에서 받을 수 있음)은 “색상만으로 내용을 구분하거나 인식하도록 제공된 콘텐츠(그래프, 차트, 지도, 필수 입력항목 등)를 제공한 경우”(오류 유형 6-1)와 “활성/비활성 상태를 색으로만 구분하는 경우”(6-2)를 오류로 봅니다. 이 도구로 화면을 녹색맹·적색맹·전색맹으로 바꿔 보면, 색이 사라졌을 때 정보가 남는지 심사 전에 확인할 수 있습니다.

계산 방식과 판정 기준

각 픽셀을 sRGB에서 선형광으로 바꾸고 Machado 외(2009)의 3×3 행렬을 곱한 뒤 0~1로 자르고 다시 sRGB로 바꿉니다. 배색 검사는 시뮬레이션한 두 색의 OKLab 거리(ΔEOK)와 WCAG 명도 대비를 계산합니다.

• 0.02 미만: “같아 보임”. CSS Color 4가 색역 매핑에서 쓰는 최소 식별 차이입니다.
• 0.06 미만: “구분 어려움”. Szafir(2018)는 산점도의 점에서 실험실 모델보다 약 3배 큰 차이가 있어야 구분된다고 보고했고, 그 3배를 기준으로 삼았습니다.
• 0.06 이상: “구분 가능”.

얼마나 많은 사람이 해당하나

질병관리청 국가건강정보포털은 국내 남성의 5.9%, 여성의 0.4%가 색각이상이라고 설명합니다. 20142015년 국민건강영양조사 자료(만 1949세 4,941명, H-R-R 검사)를 분석한 한국안광학회지 연구에서는 남자 5.6%, 여자 0.2%였고, 남자 색각이상자 가운데 제2색각이상(녹색)이 72.3%, 제1색각이상(적색)이 16.0%였습니다. 그래서 녹색맹·녹색약 카드를 먼저 확인하는 것이 효율적입니다. 청색 계열 이상과 전색맹은 드뭅니다.

다른 도구와의 차이

2026년 10월 2일에 Bing에서 “색맹 시뮬레이터” 1위였던 imageonline.io의 색맹 시뮬레이터를 확인했습니다. 같은 Machado 모델이라 3000×1000 테스트 이미지의 녹색맹 결과가 이 도구와 픽셀 단위로 같았고(예: #E74C3C → rgb(159, 143, 54), 즉 #9F8F36), 원본 크기 PNG 저장과 강도 조절도 됩니다. 다만 한 번에 한 유형만 보여 주고, 여러 색을 짝지어 비교하는 기능은 없습니다.

Chrome 개발자 도구 Rendering 패널의 Emulate vision deficiencies는 같은 행렬을 쓰지만 화면의 색 공간에서 계산합니다. Display P3 화면의 Mac(Chrome 152)에서는 #2CA02C의 청색맹 결과가 rgb(32, 155, 136)로, 이 도구가 sRGB로 계산한 rgb(0, 155, 137)과 달랐습니다. 색약 유형과 내보내기도 없습니다.

제한 사항

• 평균적인 관찰자 모델이며 색각이상이 있는 사람의 실제 확인을 대신하지 않습니다.
• sRGB 밖의 색(Display P3 사진 등)은 시뮬레이션 전에 sRGB로 잘라 냅니다. 브라우저가 Display P3로 이미지를 읽을 수 있으면 그 비율을 알려 줍니다.
• 16,777,216픽셀을 넘는 이미지는 줄여서 처리합니다. HEIC·TIFF는 디코딩할 수 있는 브라우저(Safari)에서만 열립니다.
• “색” 탭은 12개 색까지 확인하며 투명도는 무시합니다. 휴대폰 브라우저에서는 화면 캡처를 쓸 수 없습니다.

글자 대비는 색상 명도 대비 검사기, 스크린숏의 색 값은 스포이드 색상 추출기로 확인하세요.