색각 시뮬레이터: 색으로만 구분한 정보가 사라지는 자리
남성 스무 명 중 한 명 정도는 적록 구분이 어렵습니다. 시뮬레이션의 목적은 그분들이 무엇을 보는지 재현하는 것이 아니라, 색으로만 담아 둔 정보 중 무엇이 전달되지 않는지 보여 주는 것입니다.
사람 눈에는 빛에 반응하는 원추세포가 세 종류 있습니다. 긴 파장(빨강 쪽), 중간 파장(초록 쪽), 짧은 파장(파랑 쪽)에 각각 민감합니다. 색은 이 셋의 반응 비율로 만들어집니다.
그중 하나가 없거나 감도가 이웃 쪽으로 치우치면, 원래 구분되던 두 색이 같은 반응을 만들어 냅니다. 그 순간 두 색은 구분할 수 없는 색이 됩니다. 빨강과 초록이 가장 흔한 경우인데, 두 원추세포의 감도 범위가 원래 많이 겹쳐 있기 때문입니다.
이 도구는 이미지를 올리면 그 구분이 사라진 상태를 보여 줍니다.
흔한 쪽은 '완전히 없는' 경우가 아닙니다
색각 이상을 다루는 도구 대부분이 원추세포가 아예 없는 경우만 보여 줍니다. 그런데 실제로는 그쪽이 드뭅니다.
훨씬 흔한 것은 원추세포가 있지만 감도가 옆으로 치우친 경우입니다. 초록 원추세포가 빨강 쪽으로 밀려 있으면 적록 구분이 어려워지는데, 아예 없는 것은 아니라서 조건에 따라 구분이 되기도 합니다. 남성에서 이쪽이 약 5%, 완전히 없는 경우가 약 1%입니다.
그래서 이 도구에는 정도를 조절하는 막대가 있습니다. 100%가 원추세포가 없는 상태이고, 40~60% 근처가 가장 많은 사람들이 해당하는 구간입니다. 100%만 보고 판단하면 실제 사용자 대부분보다 심한 경우를 기준으로 설계하게 됩니다.
유형과 빈도
아래 비율은 남성 기준입니다. 관련 유전자가 X 염색체에 있어서 여성에서는 훨씬 드뭅니다.
| 유형 | 어느 원추세포 | 남성 기준 빈도 | 헷갈리는 색 |
|---|---|---|---|
| 2형 (deutan) | 초록 | 약 6% | 빨강과 초록, 갈색과 초록 |
| 1형 (protan) | 빨강 | 약 2% | 빨강과 초록. 빨강이 어둡게 보임 |
| 3형 (tritan) | 파랑 | 1만 명당 1명 | 파랑과 초록, 노랑과 분홍 |
| 전색맹 | 모두 | 3만 명당 1명 | 색 구분 자체가 안 됨 |
계산은 빛에서 해야 합니다
이 시뮬레이션이 다른 곳과 결과가 다를 수 있는데, 이유가 있습니다.
원추세포는 화면에 적힌 숫자가 아니라 실제로 도달한 빛의 양에 반응합니다. 그런데 sRGB 값은 빛의 양에 비례하지 않습니다. 값 128인 회색이 내는 빛은 흰색의 절반이 아니라 21% 정도입니다. 그래서 계산 전에 이 굽은 관계를 되돌려야 합니다.
이 단계를 건너뛰고 sRGB 숫자에 바로 행렬을 곱하면 결과가 크게 달라집니다. 대표적으로 순수한 초록이 어두운 진흙색으로 나오는데, 실제 적록색각 이상에서 초록은 노란빛으로 보입니다. 어두워지는 것이 아니라 색상이 옮겨 가는 것입니다.
이 도구는 sRGB를 빛의 양으로 되돌리고, 원추세포 반응 공간에서 투영한 다음, 다시 sRGB로 되돌립니다. 올바른 계산이라면 반드시 성립해야 하는 두 성질로 확인했습니다. 회색은 회색 그대로 남아야 하고, 이미 변환한 이미지를 한 번 더 변환해도 달라지지 않아야 합니다.
시뮬레이션이 보여 주는 것과 아닌 것
결과 이미지는 색각 이상이 있는 사람이 실제로 경험하는 장면이 아닙니다. 그분들은 태어날 때부터 그렇게 보았기 때문에 무엇이 빠졌다고 느끼지 않습니다. 자기 눈에 보이는 빨강이 있고, 그것을 빨강이라고 부르며 살아 왔습니다.
시뮬레이션이 답하는 질문은 다릅니다. 색으로만 구분해 둔 정보 중 무엇이 전달되지 않는가입니다. 시뮬레이션된 화면에서 두 상태가 같은 색으로 보인다면, 그 화면은 그 정보를 그분들에게 전달하지 못하고 있는 것입니다.
그래서 보는 방법도 정해집니다. 예쁜지 보지 말고, 구분해야 할 것들이 여전히 구분되는지 보세요.
자주 문제가 되는 자리
- •성공은 초록, 실패는 빨강으로만 표시한 상태 — 가장 흔한 실패입니다. 아이콘이나 글자를 함께 두세요.
- •선 색으로만 계열을 구분한 그래프 — 선 모양이나 직접 라벨을 붙이는 편이 확실합니다.
- •빨간 글씨로만 표시한 오류 안내 — 문구 자체에 무엇이 잘못됐는지 적혀 있어야 합니다.
- •색으로 구역을 나눈 지도나 좌석 배치도 — 무늬나 번호를 함께 씁니다.
- •필수 항목을 빨간 별표로만 표시한 양식.
- •빨강과 초록이 붙어 있는 그래프 — 둘 다 비슷한 밝기라면 경계가 사라집니다.
자주 묻는 질문
정도를 몇 %로 놓고 봐야 하나요?
100%는 가장 심한 경우이니 통과하면 안전합니다. 다만 실제 사용자 분포를 보려면 40~60% 구간도 함께 확인하세요. 이 구간에 해당하는 사람이 가장 많습니다.
다른 시뮬레이터와 결과가 다릅니다.
감마 보정 여부에서 갈릴 가능성이 큽니다. 간단한 확인 방법이 있습니다. 순수한 초록을 넣었을 때 노란빛이 나오면 제대로 계산한 것이고, 어두운 갈색이 나오면 sRGB 숫자에 바로 행렬을 곱한 것입니다.
회색조로 보는 것과 무엇이 다른가요?
회색조는 색 정보를 전부 없애므로 명도 대비만 검사합니다. 실제 적록색각 이상은 파랑과 노랑 축은 그대로 보이므로, 회색조로 통과해도 색각 시뮬레이션에서는 문제가 드러날 수 있고 그 반대도 마찬가지입니다. 둘 다 보는 편이 낫습니다.
색을 아예 쓰지 말아야 하나요?
그렇지 않습니다. 색은 좋은 보조 수단입니다. 다만 색이 유일한 단서가 되지 않게 하면 됩니다. 색 더하기 아이콘, 색 더하기 글자처럼 하나를 더 얹는 것으로 충분합니다.
이미지가 서버로 올라가나요?
아니요. 브라우저 안에서 픽셀을 직접 계산합니다.