4.5:1 은 어디서 온 숫자인가
시력 20/40 — 교정해도 흐릿하게 보이는 정도 — 에서 글자가 읽히는 선입니다. 나이가 들면 대비 감도가 떨어지므로, 40대 이상 사용자가 있는 서비스라면 사실상 모두에게 해당합니다.
| 대상 | AA (최소) | AAA (권장) |
|---|---|---|
| 본문 글씨 | 4.5:1 | 7:1 |
| 큰 글씨 | 3:1 | 4.5:1 |
| 버튼 테두리·아이콘·입력칸 선 | 3:1 | — |
| 로고, 비활성 요소 | 기준 없음 | — |
큰 글씨는 18.66px(14pt) 굵게 또는 24px(18pt) 이상입니다. "제목이니까 큰 글씨"가 아니라 픽셀 값으로 정해집니다.
회색 글씨가 제일 자주 걸립니다
흰 배경에 #999 는 2.85:1 로 미달입니다. 디자인 시안에서는 우아해
보이는데 실제로는 상당수 사용자가 읽지 못합니다. 흰 배경에서 본문에 쓸 수 있는
가장 연한 회색은 #767676 (4.54:1) 입니다.
미달일 때 색을 제안합니다
"기준에 못 미칩니다"로 끝내면 결국 아무 색이나 어둡게 만들게 됩니다. 그래서 통과하는 가장 가까운 색을 같이 냅니다. OKLCH 의 밝기만 움직이므로 색조와 채도는 그대로 남습니다 — 파란 버튼이 회색이 되지 않습니다.
밝기만으로 안 되는 색도 있습니다 (형광 노랑 위의 흰 글자). 그때는 채도를 낮춰 가며 다시 찾습니다.
대비가 전부는 아닙니다
이 기준은 최소선입니다. 통과했다고 읽기 좋다는 뜻은 아닙니다. 검정 배경에 흰 글자는 21:1 로 최고점이지만 긴 글에서는 눈이 빨리 피로해집니다. 본문은 대개 12:1 근처가 편합니다.
WCAG 2 의 계산식은 어두운 배경에서 실제 체감과 어긋난다는 지적이 오래 있었습니다. 그래서 APCA 라는 새 방식이 WCAG 3 후보로 논의 중입니다. 다만 지금 법적·계약상 요구되는 것은 여전히 WCAG 2 이므로 이 도구는 그 기준을 씁니다.
왜 색 두 개만 넣나요? 실제 화면은 더 복잡한데
대비는 맞닿은 두 색 사이의 문제라서, 재려면 항상 두 개로 좁혀야 합니다. 그림 위에 글자를 얹었다면 글자가 걸치는 가장 밝은 지점과 가장 어두운 지점을 각각 넣어 두 번 재세요. 둘 다 통과해야 안전합니다.
투명한 색은 어떻게 계산하나요?
배경색은 흰 종이 위에, 글자색은 그 배경 위에 얹어 실제로 보이는 불투명한
색을 만든 뒤 잽니다. rgba(0 0 0 / 0.6) 같은 값을 그냥 넣어도 됩니다.
여러 색을 한꺼번에 보려면?
색상 코드 변환에 팔레트를 통째로 넣으면 각 색 위에 흰 글자와 검은 글자 중 어느 쪽이 읽히는지 한 줄씩 알려 줍니다.