← 블로그 목록으로
접근성

색각 이상을 고려한 웹 디자인 가이드

color-blindnessa11ydesign

전 세계 남성의 약 8%, 여성의 약 0.5%가 색각 이상을 가지고 있습니다. 이는 결코 무시할 수 없는 비율입니다. 사용자 12명 중 1명이 색상을 일반적인 방식과 다르게 인식한다는 뜻이기 때문입니다. 접근성 검사 도구를 개발하면서 색상 접근성의 중요성을 깊이 실감했고, 이 글에서는 실무에서 바로 적용할 수 있는 가이드를 정리합니다.

색각 이상의 종류

색각 이상은 단순히 "색맹"으로 통칭되지만, 실제로는 여러 유형이 있으며 각각 다른 특성을 보입니다.

적록 색각 이상 (가장 흔함)

제1색맹(Protanopia) — 빨간색 원추세포가 부족하여 빨간색을 잘 인식하지 못합니다. 빨간색이 어두운 갈색이나 녹색으로 보일 수 있습니다. 제2색맹(Deuteranopia) — 초록색 원추세포가 부족한 경우로, 적록 색각 이상 중 가장 흔합니다. 초록색과 빨간색의 구분이 어렵습니다.

적록 색각 이상은 전체 색각 이상의 약 99%를 차지합니다. 빨간색과 초록색을 "성공/실패", "위험/안전"의 의미로 사용하는 것이 웹에서 매우 흔하기 때문에, 이 유형을 우선적으로 고려해야 합니다.

청황 색각 이상

제3색맹(Tritanopia) — 파란색 원추세포가 부족한 유형으로, 매우 드뭅니다. 파란색과 노란색의 구분이 어렵습니다. 전체 인구의 약 0.01%에 해당합니다.

전색맹

단색시(Achromatopsia) — 원추세포가 전혀 기능하지 않아 모든 것을 회색조로 보는 극히 드문 경우입니다.

색상에만 의존하지 않기

접근성 있는 디자인의 가장 기본적인 원칙은 정보를 전달하는 유일한 수단으로 색상을 사용하지 않는 것입니다.

나쁜 예

<!-- 색상만으로 상태를 구분 -->
<span style="color: red;">에러 발생</span>
<span style="color: green;">성공</span>

좋은 예

<!-- 색상 + 아이콘 + 텍스트로 상태를 전달 -->
<span class="text-red-600 flex items-center gap-1">
  <svg><!-- X 아이콘 --></svg>
  에러 발생
</span>
<span class="text-green-600 flex items-center gap-1">
  <svg><!-- 체크 아이콘 --></svg>
  성공
</span>

색상과 함께 아이콘, 텍스트 레이블, 패턴 등 보조 시각 단서를 반드시 제공해야 합니다. 차트나 그래프에서는 색상 외에 패턴, 빗금, 점선 등을 함께 사용합니다.

대비율(Contrast Ratio)

WCAG 2.1은 텍스트와 배경 사이의 최소 대비율을 규정하고 있습니다.

  • AA 수준: 일반 텍스트 4.5:1 이상, 큰 텍스트(18pt 이상 또는 14pt 굵은 글씨) 3:1 이상
  • AAA 수준: 일반 텍스트 7:1 이상, 큰 텍스트 4.5:1 이상
  • 비텍스트 요소: UI 컴포넌트와 그래픽 요소는 3:1 이상

대비율은 단순히 색각 이상 사용자만을 위한 것이 아닙니다. 밝은 햇빛 아래서 스마트폰을 사용하거나, 저품질 디스플레이에서 보는 모든 사용자에게 영향을 미칩니다.

색상 팔레트 전략

색각 이상을 고려한 팔레트를 구성하는 몇 가지 전략이 있습니다.

명도 차이를 활용하라

색상(Hue)이 아닌 명도(Lightness)의 차이를 충분히 두면, 색각 이상 사용자도 구분할 수 있습니다. 예를 들어 차트에서 진한 파랑과 연한 주황은 색조뿐 아니라 밝기도 다르기 때문에 구분이 용이합니다.

안전한 색상 조합

적록 색각 이상에서도 비교적 안전한 조합들이 있습니다.

  • 파랑과 주황 — 명도와 색조 모두 차이가 커서 대부분의 색각 이상에서 구분 가능
  • 파랑과 빨강 — 제2색맹에서도 비교적 구분 가능
  • 보라와 노랑 — 명도 차이가 커서 효과적

반면 피해야 할 조합은 빨강-초록, 빨강-갈색, 초록-갈색, 파랑-보라(제3색맹) 등입니다.

다크 모드에서의 주의점

다크 모드에서는 채도 높은 색상이 눈에 피로감을 줄 수 있으므로, 약간 탁한 파스텔 톤을 사용하되 배경과의 대비를 충분히 확보해야 합니다.

패턴과 아이콘 활용

데이터 시각화에서 색상 외의 시각적 구분 수단을 추가하는 것이 중요합니다.

/* 차트 데이터 시리즈에 패턴 적용 */
.series-a { background: url("pattern-dots.svg"), #4c6ef5; }
.series-b { background: url("pattern-lines.svg"), #f76707; }
.series-c { background: url("pattern-crosses.svg"), #37b24d; }

링크에는 색상 외에 밑줄을 유지하세요. text-decoration: none으로 밑줄을 제거하면 색각 이상 사용자는 링크를 일반 텍스트와 구분하기 어렵습니다. 밑줄이 디자인적으로 부담된다면, 호버 시에만 표시하는 대신 링크 색상의 명도를 본문과 충분히 다르게 설정하고 3:1 이상의 대비율을 확보하세요.

폼 유효성 검사에서는 색상 변화만으로 에러를 표시하지 말고, 에러 메시지 텍스트와 아이콘을 반드시 함께 제공해야 합니다.

테스트 도구

실제로 색각 이상 사용자가 어떻게 보는지 확인할 수 있는 도구들이 있습니다.

Chrome DevTools — 렌더링 탭에서 "Emulate vision deficiencies"를 선택하면 Protanopia, Deuteranopia, Tritanopia 등을 시뮬레이션할 수 있습니다. 별도 확장 없이 바로 사용 가능합니다.

Sim Daltonism (macOS) — 화면 위에 오버레이를 띄워 실시간으로 다양한 색각 이상을 시뮬레이션하는 네이티브 앱입니다.

Contrast Checker 도구 — WebAIM Contrast Checker, Colour Contrast Analyser 등으로 텍스트와 배경의 대비율을 정확히 측정할 수 있습니다.

Figma 플러그인 — Stark, Color Blind 등의 플러그인으로 디자인 단계에서 미리 검증할 수 있습니다.

디자인 완성 후가 아니라 초기 단계부터 색각 이상 시뮬레이션을 확인하는 습관을 들이면, 나중에 대규모 수정을 피할 수 있습니다.

WCAG 색상 관련 요구사항

WCAG 2.1에서 색상과 관련된 주요 기준을 정리합니다.

  • 1.4.1 색상 사용 (A) — 색상이 정보 전달, 동작 표시, 응답 요청, 시각적 요소 구분의 유일한 수단이 아니어야 합니다.
  • 1.4.3 대비(최소) (AA) — 텍스트와 배경의 최소 대비율 4.5:1 (큰 텍스트 3:1)
  • 1.4.6 대비(향상) (AAA) — 텍스트와 배경의 최소 대비율 7:1 (큰 텍스트 4.5:1)
  • 1.4.11 비텍스트 대비 (AA) — UI 컴포넌트 및 그래픽 요소의 최소 대비율 3:1

마무리

색각 이상을 고려한 디자인은 특정 사용자만을 위한 배려가 아닙니다. 높은 대비, 명확한 시각적 단서, 색상 외의 정보 전달 수단은 모든 사용자에게 더 나은 경험을 제공합니다. 밝은 햇빛 아래서 화면을 보거나, 저해상도 모니터를 사용하거나, 단순히 피곤한 눈으로 화면을 볼 때에도 접근성 높은 디자인은 빛을 발합니다. 포용적인 디자인은 결국 더 좋은 디자인입니다.

색각 이상을 고려한 웹 디자인 가이드