색상 대비와 웹 접근성 — 4.5:1의 의미
예쁘게 뽑은 연회색 본문이 정작 사용자에게는 "흐려서 안 읽히는 글자"일 수 있습니다. 가독성은 감각이 아니라 수치로 검증할 수 있습니다 — 그 수치가 명도 대비율입니다. 기준의 의미와 자주 실패하는 지점을 정리합니다.
대비율이란 — 1:1부터 21:1까지
대비율은 글자색과 배경색의 밝기(상대 휘도) 차이를 비율로 나타낸 값입니다.
- 1:1 — 같은 색. 전혀 구분 안 됨.
- 21:1 — 흰 배경 + 검은 글자. 최대 대비.
- 흰 배경 기준:
#767676≈ 4.5:1,#AAAAAA≈ 2.3:1,#CCCCCC≈ 1.6:1
시력이 좋은 사람의 모니터에서는 2:1도 읽히지만, 저시력·고령 사용자, 밝은 야외의 휴대폰 화면, 저가형 디스플레이에서는 4.5:1 아래부터 급격히 읽기 어려워집니다.
WCAG 기준 — AA와 AAA
국제 웹 접근성 지침(WCAG)은 두 수준의 기준을 둡니다.
| 등급 | 일반 텍스트 | 큰 텍스트* | 성격 |
|---|---|---|---|
| AA | 4.5:1 이상 | 3:1 이상 | 실무 표준 (대부분의 서비스 목표) |
| AAA | 7:1 이상 | 4.5:1 이상 | 더 엄격한 권장 수준 |
* 큰 텍스트 = 약 18pt(24px) 이상, 또는 14pt(약 18.7px) 굵게 이상
아이콘·버튼 테두리 같은 UI 구성요소도 배경과 3:1 이상이 요구됩니다. 공공기관 웹사이트는 한국형 웹 콘텐츠 접근성 지침(KWCAG)에 따라 이 기준이 사실상 의무입니다.
자주 실패하는 디자인 5가지
- 연회색 본문:
#AAAAAA본문(2.3:1)은 가장 흔한 미달 사례. 보조 텍스트도#767676보다 진하게. - placeholder에 필수 정보: 입력창 안내 글자는 대비가 낮은 데다 입력 시 사라집니다. 라벨을 따로 두세요.
- 흰 글자 + 파스텔 배경: 연한 민트·노랑 위의 흰 글자는 대부분 3:1 미만입니다.
- 사진 위 글자: 배경 사진의 밝은 영역과 겹치면 부분적으로 안 읽힙니다. 반투명 오버레이를 깔아 대비를 확보하세요.
- 색만으로 상태 구분: 빨강/초록만으로 오류·성공을 표시하면 색각 이상 사용자가 구분하지 못합니다. 아이콘·문구를 함께 쓰세요.
검사하고 고치는 법
글자색과 배경색의 HEX 값을 검사 도구에 넣으면 대비율과 AA·AAA 통과 여부가 바로 나옵니다. 미달이라면 글자색을 어둡게(또는 배경을 밝게) 한 단계씩 조정해 4.5:1을 넘기면 됩니다. 브랜드 색을 포기할 필요는 없습니다 — 큰 제목·장식에는 브랜드 색을 쓰고, 본문은 진한 무채색으로 두는 식의 역할 분담이 일반적입니다.
글자색과 배경색의 밝기(상대 휘도) 차이를 비율로 나타낸 값입니다. 흰 배경에 흰 글자는 1:1(전혀 안 보임), 흰 배경에 검은 글자는 21:1(최대 대비)입니다. 국제 웹 접근성 지침(WCAG)의 AA 등급은 일반 크기 텍스트에 4.5:1 이상을 요구하며, 이 정도면 저시력 사용자와 밝은 야외 환경에서도 글자를 읽을 수 있는 수준입니다.
WCAG의 두 준수 수준입니다. AA는 일반 텍스트 4.5:1, 큰 텍스트(18pt 또는 14pt 굵게 이상) 3:1을 요구하는 실무 표준이고, AAA는 일반 7:1, 큰 텍스트 4.5:1로 더 엄격한 권장 수준입니다. 대부분의 서비스·공공 사이트는 AA를 목표로 하며, 본문이 길거나 고령 사용자가 많은 서비스라면 AAA에 가깝게 설계하는 것이 좋습니다.
회색 자체가 문제가 아니라 너무 연한 회색이 문제입니다. 흰 배경(#FFFFFF) 기준으로 #767676 정도까지는 4.5:1을 만족하지만, 디자인에서 흔히 쓰는 #AAAAAA(약 2.3:1)나 #CCCCCC는 기준에 크게 미달합니다. 보조 텍스트라도 #767676보다 진하게 쓰고, placeholder처럼 연한 글자에 필수 정보를 담지 않는 것이 안전합니다.