색각이상 시뮬레이터
색 두 개를 넣으면 8가지 색각 유형에서 어떻게 보이는지, 그리고 서로 구분되는지 알려줍니다. 계산은 브라우저 안에서 끝납니다.
왼쪽이 색 A, 오른쪽이 색 B입니다. 값을 누르면 복사됩니다.
유형별로 보이는 색
유형별로 두 색의 색차(ΔE)를 계산합니다. 값이 작을수록 비슷하게 보인다는 뜻입니다. 여기서는 25 이상을 구분됨, 10 미만을 거의 같음으로 봅니다 — CIE76 기준의 실무 문턱이지 규격은 아닙니다.
긴 파장(적) 원추세포가 없습니다. 빨강이 어둡게 보이고 초록과 헷갈립니다.
적 원추세포의 감도가 치우쳐 있습니다. 적록 구분이 약해집니다.
중간 파장(녹) 원추세포가 없습니다. 적록 구분이 어렵습니다.
가장 흔한 유형입니다. 적록 구분이 약해지지만 밝기 차이는 유지됩니다.
짧은 파장(청) 원추세포가 없습니다. 파랑과 초록, 노랑과 분홍이 헷갈립니다.
청 원추세포의 감도가 낮습니다. 청황 구분이 약해집니다.
색을 전혀 구분하지 못하고 밝기만 인지합니다.
색이 크게 옅어져 보입니다.
헷갈리기 쉬운 CSS 색 이름 조합
일반 색각에서는 충분히 다른데 제2색맹에서 비슷해지는 조합을 계산해 뽑았습니다. 두 색을 나란히 쓸 때는 밝기나 모양으로도 구분되게 하세요.
| 색 조합 | 일반 ΔE | 제2색맹 ΔE |
|---|---|---|
| Limegreen +Tomato | 126.3 |
5.8 |
| Crimson +Forestgreen | 121.1 |
3.0 |
| Crimson +Green | 123.7 |
8.9 |
| Deepskyblue +Fuchsia | 118.0 |
8.5 |
| Deepskyblue +Magenta | 118.0 |
8.5 |
| Coral +Limegreen | 113.5 |
4.4 |
| Firebrick +Green | 108.5 |
2.9 |
| Lime +Orange | 110.9 |
7.8 |
| Lightsalmon +Springgreen | 110.0 |
9.3 |
| Firebrick +Forestgreen | 106.4 |
6.3 |
어떻게 계산하나요
2색형(적·녹·청색맹)은 Brettel·Viénot·Mollon(1997) 방식입니다. 색을 LMS 공간에 옮긴 뒤 없는 원추세포 축을 따라 두 반평면 중 가까운 쪽에 투영합니다. 흔히 쓰이는 단일 평면 간이법은 청색맹에서 파랑이 거의 변하지 않는 문제가 있어 쓰지 않았습니다.
색약(이상3색형)은 정상 색각과 2색형 결과를 섞은 근사치입니다. 실제로는 사람마다 정도가 크게 다릅니다.
⚠️ 시뮬레이션은 확인용 도구입니다. “이렇게 보인다”가 아니라 “이 조합은 위험할 수 있다”를 알려 주는 정도로 쓰고, 색만으로 정보를 전달하지 않는 설계(모양·라벨·패턴 병행)를 우선하세요.
자주 묻는 질문
색각이상은 얼마나 흔한가요?
북유럽계 남성의 약 8%, 여성의 약 0.5%로 알려져 있으며 인구 집단에 따라 다릅니다. 대부분은 적록 계열이고 그중 제2색약이 가장 흔합니다. 청황 계열과 전색맹은 훨씬 드뭅니다.
색만 바꾸면 접근성 문제가 해결되나요?
아닙니다. WCAG 1.4.1은 색을 유일한 구분 수단으로 쓰지 말라고 요구합니다. 그래프 계열에는 모양이나 패턴을, 링크에는 밑줄을, 상태 표시에는 아이콘이나 문구를 함께 두세요. 명암비도 별도로 확인해야 합니다.