접근성과 WCAG 대비율
AA/AAA 기준, 4.5:1 최소 대비, 색맹 고려 디자인 — 모든 사용자를 위한 색의 규칙.
전 세계 인구의 약 8%가 색각 이상을 가지고 있다. 아름다운 배색이라도 대비가 부족하면 글자를 읽을 수 없는 사람이 생긴다. 접근성은 '좋으면 하는 것'이 아니라 디자인의 기본 요건이다.
WCAG(Web Content Accessibility Guidelines)는 웹 콘텐츠의 접근성 국제 표준이다. 색에 관해서는 대비율(Contrast Ratio)을 핵심 기준으로 삼는다. 대비율은 전경색과 배경색의 상대적 밝기 차이를 1:1(동일)부터 21:1(흑백) 사이의 숫자로 나타낸 것이다.
| 기준 | 일반 텍스트 | 큰 텍스트 (18pt+) | 비텍스트 UI 요소 |
|---|---|---|---|
| AA (최소) | 4.5 : 1 | 3 : 1 | 3 : 1 |
| AAA (강화) | 7 : 1 | 4.5 : 1 | — |
실무에서 가장 자주 위반되는 곳은 회색 텍스트다. 부가 정보를 연한 회색(#999)으로 쓰는 경우가 많은데, 흰 배경(#FFF) 위에 #999는 대비율이 약 2.85:1로 AA 기준에 미달한다. 최소 #767676 이상(4.54:1)을 써야 한다.
색맹(색각 이상)을 고려한 디자인의 핵심 원칙은 '색만으로 정보를 전달하지 않는 것'이다. 예를 들어 성공=초록, 오류=빨강만으로 구분하면 적록색맹 사용자는 구분할 수 없다. 반드시 아이콘, 텍스트, 패턴 등 색 외의 단서를 함께 제공해야 한다.
검증 도구 — Chrome DevTools의 'Rendering → Emulate vision deficiencies'로 색맹 시뮬레이션을 할 수 있고, WebAIM Contrast Checker(webaim.org/resources/contrastchecker)에서 두 색의 대비율을 즉시 계산할 수 있다. 디자인이 끝난 후 반드시 한 번은 돌려보자.