대비(Contrast) 체커 — 접근성 텍스트를 위한 WCAG 준수
밝은 회색 텍스트가 흰 배경에 있으면 우아해 보이지만 접근성에 실패 — 구글도 모바일 순위에서 페널티. 이 도구는 두 색 간 대비 비율을 WCAG 표준 대비 측정합니다.
WCAG(웹 콘텐츠 접근성 가이드라인)는 대비 표준 설정: AA는 본문 4.5:1, 큰 글자 3:1. AAA(엄격)는 본문 7:1, 큰 글자 4.5:1. 비율은 두 색의 상대 휘도에서 계산.
WCAG 대비 요구
| 레벨 | 본문 | 큰 글자 (18pt+ 또는 14pt 굵게) |
|---|---|---|
| AA (최소) | 4.5:1 | 3:1 |
| AAA (강화) | 7:1 | 4.5:1 |
| UI 컴포넌트·아이콘 (AA) | — | 3:1 |
흔한 대비 실패
- •밝은 회색(#999) on 흰색 — 2.85:1, AA 실패
- •밝은 파랑(#88AADD) on 흰색 — AA 실패
- •어두운 회색(#666) on 검정 — AA 실패
- •노랑 on 흰색 — 거의 항상 실패
- •브랜드 색 버튼에 브랜드 색 텍스트 — 자주 실패
자주 묻는 질문
구글이 대비로 순위를 매기나요?
간접적으로 — Lighthouse 접근성 점수가 모바일 순위에 영향, 대비는 주요 요소. WCAG AA 실패 사이트는 일반적으로 점수가 낮음.
색상이 저장되나요?
아니요 — 브라우저에서만 처리.