색맹·색약 사용자에게 내 디자인은 어떻게 보일까

"오류는 빨간색, 정상은 초록색" — 직관적인 디자인 같지만, 한국 남성의 약 5~6%에게 이 둘은 거의 같은 색입니다. 색각 이상은 드문 예외가 아니라 교실 한 반에 한두 명꼴의 흔한 특성입니다. 내 화면이 그들에게 어떻게 보이는지 알면, 고치는 방법은 의외로 간단합니다.

색각 이상의 종류

눈에는 빨강(L)·초록(M)·파랑(S)에 반응하는 세 종류의 원추세포가 있습니다. 어느 세포가 약한지에 따라 종류가 나뉩니다.

"색맹"이라고 해서 흑백으로 보는 것이 아닙니다 — 대부분은 특정 색 조합의 구분이 어려운 것이고, 정도(색약 ↔ 색맹)의 스펙트럼이 있습니다.

무엇이 문제가 되나 — 흔한 사례

• 빨강·초록 상태 표시 — 성공/실패 뱃지, 재고 있음/없음. 적록 색각 이상에게는 같은 갈색 계열.
• 주식·코인 차트 — 상승 빨강, 하락 파랑(또는 초록)을 색으로만 구분하면 방향을 읽을 수 없습니다.
• 여러 선이 겹친 그래프 — 색만 다른 5개의 선은 구분 불가. 범례가 있어도 어느 선인지 매칭이 안 됩니다.
• 색으로만 표시한 필수 입력란·오류 — 빨간 테두리만으로는 어디가 잘못됐는지 보이지 않습니다.
• 지하철 노선도형 정보 — 색이 곧 의미인 디자인은 라벨이 없으면 전달이 끊깁니다.

내 디자인 확인하기

1. 화면을 캡처하거나 디자인 시안 이미지를 준비합니다.
2. 색맹 시뮬레이터에 이미지를 올리고 적색맹·녹색맹·청색맹 모드로 차례로 바꿔 봅니다.
3. 각 모드에서 "색 없이도 정보가 전달되는가"를 봅니다 — 상태 구분, 차트의 선, 버튼의 구분이 살아 있는지.
4. 구분이 사라지는 곳이 발견되면 아래의 원칙으로 보강합니다.

색에만 의존하지 않는 디자인

• 모양·아이콘 추가 — 성공 ✓ / 실패 ✕ 아이콘, 상승 ▲ / 하락 ▼ 화살표를 색과 함께.
• 텍스트 라벨 — 뱃지에 "완료/실패" 글자를 함께. 가장 확실한 방법입니다.
• 패턴·선 스타일 — 그래프의 선은 실선·점선·파선으로, 막대는 패턴으로도 구분.
• 밝기 차이 — 같은 계열이라도 밝기 차가 크면 색각 이상과 무관하게 구분됩니다. 이는 색상 대비와도 통하는 원칙입니다.
• 안전한 조합 선택 — 빨강·초록 대신 파랑·주황 조합은 대부분의 색각 이상에서 구분됩니다.