Color contrast, WCAG의 4.5대1과 3대1

한 줄로

본문 텍스트는 4.5대1, 큰 글자는 3대1입니다. 이 두 숫자가 모든 디자인의 색 선택을 좌우합니다.

어디서 왔나

색 대비를 측정하는 표준 공식은 1999년 WCAG 1.0에서 처음 등장했고, 2008년 WCAG 2.0에서 현재 형태로 정착했습니다.

공식은 (L1 + 0.05) / (L2 + 0.05)입니다. 여기서 L1, L2는 각각 더 밝은/어두운 색의 상대적 휘도입니다.

이 비율이 클수록 대비가 강합니다. 가장 강한 대비는 검정(#000)과 흰색(#FFF)으로 21대1입니다.

WCAG 기준

Level AA (대부분의 법적 요구사항)입니다.

• 본문 텍스트: 4.5대1 이상.
• 큰 텍스트 (18pt 이상 또는 14pt bold): 3대1 이상.
• UI 컴포넌트 / 그래픽: 3대1 이상.

Level AAA (더 엄격)입니다.

• 본문 텍스트: 7대1 이상.
• 큰 텍스트: 4.5대1 이상.

자주 위반되는 패턴

• 회색 위 회색: #999 텍스트 위 #FFF 배경 = 약 2.85대1, AA 미달.
• 컬러풀한 배경 위 흰 텍스트: 노랑, 라임색 위에 흰색은 거의 대부분 미달.
• placeholder 텍스트: 너무 옅게 만들면 사용자가 안 읽음.
• 호버 상태: 정상 상태만 검증하고 호버는 잊는 경우.

도구

• Chrome DevTools: 요소 검사에서 자동 표시.
• WebAIM Contrast Checker (webaim.org/resources/contrastchecker).
• Stark (Figma 플러그인).
• Polypane 브라우저: 실시간 검증.

다크 모드에서

다크 모드에서는 순수 검정(#000)을 피하는 게 좋습니다. #000 배경 + #FFF 텍스트는 너무 강해서 OLED 화면에서 글자가 떨려 보입니다. 보통 #121212 배경 + #E0E0E0 텍스트입니다. 대비는 약 15대1, AAA 통과하면서 부드럽습니다.

바이브 메이커가 챙길 한 가지

본인 사이트의 모든 텍스트-배경 조합에 대해 대비를 한번 측정해 보세요. 회색 위 회색이나 컬러풀한 배경의 흰색이 AA를 통과하는지 확인합니다. 5분 안 걸리는데 사용자의 10%(저시력, 고령자)의 경험을 크게 바꿉니다.

관련

WCAG · Dark mode · a11y