색맹 시뮬레이터
차트, 그림, 슬라이드 같은 이미지를 고르면 적색맹, 녹색맹, 청색맹, 전색맹인 사람이 그것을 어떻게 보는지 원본 옆에 보여 줍니다. 시뮬레이션은 선형 RGB에서 Machado, Oliveira, Fernandes(2009) 모델을 사용합니다. 그림은 브라우저의 캔버스에서 처리되며 업로드되지 않습니다. 무료이며 회원가입이 필요 없습니다.
그림은 브라우저가 열고 이 페이지의 캔버스에 그립니다. 업로드되지 않습니다.
이미지를 고르거나 샘플 이미지를 사용하면 색각 결핍이 있는 사람에게 어떻게 보이는지 확인할 수 있습니다.
100%는 이색형으로, 해당 원추세포 종류가 없는 상태입니다(적색맹, 녹색맹, 청색맹). 낮은 값은 이상 삼색형으로, 해당 원추세포가 약해진 상태입니다(적색약, 녹색약, 청색약). 전색맹에는 심각도가 없습니다.
색맹 시뮬레이터 사용 방법
- 1. 그림을 불러오세요. 파일 선택으로 PNG, JPEG, GIF, WebP, SVG 파일을 고르거나, 내장된 샘플을 써 보세요. 샘플에는 색상 띠, Okabe–Ito 색 여덟 가지, 빨강–노랑–초록 팔레트가 들어 있습니다. 큰 이미지는 긴 변이 900픽셀이 되도록 줄어듭니다.
- 2. 보기를 고르세요. 적색맹, 녹색맹, 청색맹, 전색맹이 기본으로 켜져 있습니다. 필요 없는 보기는 끄세요.
- 3. 심각도를 정하세요. 100%에서는 이색형(원추세포 한 종류가 없는 상태)을 시뮬레이션합니다. 낮은 값은 이상 삼색형(해당 원추세포가 약해진 상태)을 시뮬레이션합니다.
- 4. 비교하고 저장하세요. 각 패널은 원본 옆에 놓입니다. 패널 하나를 PNG로 받거나, 모든 패널을 이름이 붙은 한 장의 시트로 받아 보고서에 붙이거나 공동 저자와 공유하세요.
각 보기가 보여 주는 것
- 적색맹과 적색약 — 장파장(L, “빨강”) 원추세포가 없거나 약합니다. 빨강이 어둡게 보이고 갈색이나 올리브색 쪽으로 기웁니다. 빨강과 초록이 헷갈립니다.
- 녹색맹과 녹색약 — 중파장(M, “초록”) 원추세포가 없거나 약합니다. 빨강과 초록이 헷갈리지만, 빨강이 적색맹만큼 어둡게 보이지는 않습니다. 녹색약이 가장 흔한 형태입니다.
- 청색맹과 청색약 — 단파장(S, “파랑”) 원추세포가 없거나 약합니다. 파랑과 초록이 흐리게 섞이고, 노랑과 분홍이 헷갈립니다. 드문 유형입니다.
- 전색맹 — 쓸 수 있는 원추세포 기능이 없어서 세상이 회색 음영으로 보입니다. 이 도구는 이를 상대 휘도로 그리며, 이는 Machado 모델의 일부가 아닙니다(아래 참고).
미국 국립안과연구소에 따르면 남성 약 12명 중 1명은 색각 결핍이 있으며, 여성은 그보다 훨씬 적습니다. 그래서 강의실이나 심사 위원단에는 영향을 받는 사람이 있을 가능성이 높습니다. 적색-녹색 결핍이 단연 가장 흔한 유형입니다.
시뮬레이션 작동 원리
이 도구는 Machado, G. M., Oliveira, M. M., & Fernandes, L. A. F. (2009)가 발표한 행렬을 사용합니다. 논문 제목은 “A physiologically-based model for simulation of color vision deficiency”이며, IEEE Transactions on Visualization and Computer Graphics, 15(6), 1291–1298에 실렸습니다. 저자들은 유형마다, 그리고 0.0에서 1.0까지 0.1 간격의 심각도마다 3 × 3 행렬 하나를 제시합니다. 슬라이더는 그 표를 따라 움직이며, 사이 값은 행 사이를 보간합니다.
- 각 픽셀의 sRGB 값을 선형 광으로 바꿉니다(감마 곡선의 역변환).
- 선형 RGB 벡터에 선택한 유형과 심각도의 행렬을 곱합니다.
- 결과를 0–1 범위로 잘라낸 뒤, 다시 감마 인코딩합니다.
- 알파는 그대로 둡니다. 모든 행렬의 행 합이 1이므로 회색과 흰색은 변하지 않습니다.
적녹 팔레트가 실패하는 이유
흔한 빨강–노랑–초록 팔레트의 빨강 #d7191c와 초록 #1a9641은 녹색맹 상태에서 #8a7b0c와 #8a7f48이 됩니다. 거의 구별되지 않는 두 올리브색입니다.
Okabe–Ito의 주홍 #d55e00과 청록 #009e73은 녹색맹 상태에서 #9e8c00과 #8a8676이 됩니다. 전보다는 덜 가깝지만, 명도와 색상이 여전히 다릅니다.
시뮬레이션이 알려 줄 수 없는 것
- 모델이지 실제 사람이 아닙니다. 실제 시각은 같은 유형 안에서도 차이가 나며, 모델은 원추세포 반응만 다루고 뇌의 적응이나 맥락은 다루지 않습니다.
- 전색맹은 근사치입니다. Machado 모델에는 전색맹 행렬이 없습니다. 여기서는 WCAG의 상대 휘도 Y = 0.2126 R + 0.7152 G + 0.0722 B를 회색으로 보여 줍니다. 이 상태는 대개 시력 저하와 빛 민감성도 함께 동반하지만, 그것은 시뮬레이션하지 않습니다.
- 화면이 중요합니다. 캔버스 픽셀은 sRGB로 읽힙니다. 광색역 디스플레이나 야간 모드 필터는 보이는 색을 바꾸며, 시뮬레이션된 파일 자체는 모델에 맞게 정확합니다.
- 색각 결핍이 있는 대부분의 사람도 색을 봅니다. 이색형은 각 스펙트럼에서 극단적인 경우입니다. 많은 사람은 가벼운 결핍이 있으며, 심각도 슬라이더가 이를 근사합니다.
함께 잘 보이는 그림 만들기
- 색 하나에만 기대지 마세요. 직접 레이블, 표식, 선 모양, 무늬를 더해 모든 범주에 두 번째 단서를 주세요.
- 명도를 다르게 하세요. 전색맹 보기에서 두 색이 같아 보인다면, 흑백으로 인쇄했을 때도 구별하기 어렵습니다.
- 빨강 대 초록을 피하세요 — 파랑 대 보라, 초록 대 갈색도 마찬가지로 두 계열을 구분하는 유일한 차이로 쓰지 마세요.
- 안전한 팔레트에서 시작하세요. 이 사이트의 차트 도구가 쓰는 Okabe–Ito 팔레트는 이런 용도로 설계되었습니다. 히트맵에는 viridis, cividis, ColorBrewer의 순차형 팔레트가 잘 맞으며, 히트맵 만들기에서 고를 수 있습니다.
- 대비도 확인하세요. 색으로는 통과하는 쌍이라도 그래픽에 대한 WCAG 3:1 기준을 통과하지 못할 수 있습니다. 색상 대비 검사기를 사용하세요.
자주 묻는 질문
- 이미지가 서버에 업로드되나요?
- 아닙니다. 파일은 브라우저가 열고, 이 페이지의 캔버스에 그린 뒤 그곳에서 처리합니다. 네트워크로 아무것도 전송되지 않으며, 페이지를 닫거나 새로 고치면 아무것도 저장되지 않습니다.
- 적색맹과 녹색맹은 어떻게 다른가요?
- 적색맹은 장파장(빨강) 원추세포가 없는 상태이고, 녹색맹은 중파장(초록) 원추세포가 없는 상태입니다. 둘 다 빨강과 초록을 구분하기 어렵게 만들지만, 적색맹에서는 빨강이 훨씬 어둡게 보이기도 합니다. 많은 그림에서 두 유형은 비슷해 보이므로, 한 유형을 해결하는 팔레트는 대개 다른 유형도 해결합니다.
- 가장 흔한 색각 결핍은 무엇인가요?
- 적색-녹색 결핍이 대부분을 차지하며, 그중에서도 녹색약(초록 원추세포가 약한 상태)이 가장 많습니다. 청색 결핍과 완전한 전색맹은 드뭅니다.
- 심각도 슬라이더는 무엇을 하나요?
- 100%에서는 한 원추세포 종류가 없는 이색형을 시뮬레이션합니다. 낮은 값에서는 Machado 행렬로 이상 삼색형(적색약, 녹색약, 청색약)을 시뮬레이션합니다. 이 경우 원추세포는 반응하지만 그 반응이 어긋나 있습니다. 0%에서는 이미지가 변하지 않습니다. 전색맹은 슬라이더의 영향을 받지 않습니다.
- 차트를 색맹 친화적으로 만들려면 어떻게 하나요?
- 그 목적으로 설계된 팔레트를 쓰세요. 범주에는 Okabe–Ito, 연속 데이터에는 viridis가 적합합니다. 그리고 색 외에 레이블, 표식, 선 모양, 무늬 같은 두 번째 단서를 더하세요. 그다음 여기서 확인하세요. 네 가지 보기 모두에서 모든 계열과 범주가 여전히 구별되면 차트는 견고한 것입니다.
- 이것이 색맹인 사람이 보는 방식과 같나요?
- 디자인 점검에는 좋은 근사치이지만 복제물은 아닙니다. 같은 진단명을 가진 사람도 저마다 다르며, 이 모델은 원추세포 반응만 다룹니다. 문제를 일찍 찾는 도구로 쓰고, 그림이 중요하다면 그 상태를 가진 사람에게 확인하세요.