색약 친화 팔레트 가이드 — 디자이너·개발자를 위한 실전 규칙

Okabe-Ito·Paul Tol 팔레트를 1·2·3형 시뮬레이션과 함께 비교하고, 명도 대비·이중 부호화·WCAG 기준 등 색에 기대지 않는 디자인 규칙을 정리했습니다.

남성 약 12명 중 1명(유럽계 기준)이 적록 색각 이상이라면, 그래프·지도·대시보드를 보는 사람 중 일부는 늘 색약입니다. 좋은 소식은 몇 가지 규칙만 지켜도 대부분의 문제가 사라진다는 것입니다.

규칙 1 — 색만으로 정보를 전하지 않는다

웹 접근성 기준 WCAG의 성공 기준 1.4.1 「색 사용」은 색이 정보를 전달하는 유일한 시각적 수단이 되지 않아야 한다고 정합니다. 오류 입력칸은 빨간 테두리와 함께 아이콘·문구를, 그래프 선은 색과 함께 모양·점선·직접 라벨을 씁니다.

색각 이상이 있어도 밝기 차이는 잘 봅니다. 서로 구분해야 하는 색은 명도(밝기)가 확실히 다르게 고르세요. 흑백으로 인쇄해도 구분되는지 보는 것이 가장 쉬운 점검법입니다.

「좋음=초록, 나쁨=빨강」은 가장 흔한 실수입니다. 1·2형 모두 이 둘이 비슷한 황토색으로 보입니다. 두 범주의 대비가 필요하면 파랑 ↔ 주황이 가장 안전합니다.

Okabe·Ito가 제안한 「컬러 유니버설 디자인」 팔레트는 적록 색각 이상에서도 구별되도록 고른 8색입니다. 아래 표는 같은 색을 이색형 시뮬레이션(Machado 2009, 강도 100%)으로 바꾼 것입니다.

Paul Tol의 「bright」 팔레트도 색각 이상과 흑백 인쇄를 함께 고려해 만든 구성입니다.

반대로 흔히 쓰는 채도 높은 빨강·초록·주황 조합은 1·2형에서 서로 겹칩니다.

피해야 할 예 — 채도 높은 빨강·초록 중심 조합
정상 색각	`#E41A1C`	`#4DAF4A`	`#FF7F00`	`#984EA3`	`#A65628`	`#F781BF`
1형 이색형	`#645817`	`#B3A040`	`#A59100`	`#4166A6`	`#6D6122`	`#8D9CC1`
2형 이색형	`#938208`	`#A69852`	`#C4AE00`	`#586EA1`	`#807327`	`#ACB0BC`
3형 이색형	`#FC0020`	`#3EAA99`	`#FF616D`	`#9A5971`	`#B6454C`	`#FF7E98`

온도·밀도 같은 연속 값에는 명도가 한 방향으로 고르게 변하는 순차형 색상표(viridis·cividis 등)를 씁니다. cividis는 색각 이상을 고려해 설계됐습니다.
무지개(jet) 색상표는 명도가 들쭉날쭉해 색각 이상이 없어도 오해를 부르고, 적록 구간에서 정보가 사라집니다.
양쪽으로 갈라지는 값(증가·감소)에는 파랑-흰색-주황(또는 빨강) 발산형 색상표가 적록형보다 안전합니다.

본문 글자와 배경의 명도 대비는 WCAG 1.4.3 기준 4.5:1 이상을 권합니다. 빨강 글씨를 검정 배경에 쓰면 1형에게는 대비가 크게 줄어듭니다.
링크는 색만 바꾸지 말고 밑줄을 남기세요.

이 네 가지를 통과하면 색각 이상이 있는 사람뿐 아니라 흐린 화면·흑백 인쇄·밝은 야외에서 보는 사람에게도 더 읽기 쉬운 자료가 됩니다.