색상 대비 검사기 (WCAG)
글자색과 배경색의 명도 대비를 계산해 WCAG AA·AAA 기준 통과 여부를 알려주고, 실패 시 통과하는 색을 추천합니다.
–대비비
| 기준 | 최소 대비 | 결과 |
|---|---|---|
| AA · 일반 텍스트 | 4.5 : 1 | |
| AA · 큰 텍스트 | 3 : 1 | |
| AAA · 일반 텍스트 | 7 : 1 | |
| AAA · 큰 텍스트 | 4.5 : 1 | |
| UI 요소 · 그래픽 | 3 : 1 |
AA 일반 텍스트 기준 미달입니다. 배경을 유지하면서 글자색을(으)로 바꾸면 통과합니다.
큰 텍스트 미리보기 — Large text 24px
일반 텍스트 미리보기입니다. The quick brown fox jumps over the lazy dog. 0123456789
사용법
글자색과 배경색을 입력하면 두 색의 명도 대비(contrast ratio)를 1:1 ~ 21:1 범위로 계산합니다. WCAG는 이 값으로 가독성 기준을 정합니다.AA 일반 텍스트는 4.5:1 이상, 큰 텍스트(약 24px 이상, 또는 굵은 18.66px 이상)는 3:1 이상이어야 합니다. 더 엄격한 AAA는 각각 7:1, 4.5:1입니다.
색은 #RGB, #RRGGBB 형식으로 입력하거나 색상 선택기를 쓸 수 있습니다. 기준을 통과하지 못하면 배경은 그대로 두고 글자색만 조정해 AA를 통과하는 가장 가까운 색을 추천합니다. 추천 색을 누르면 바로 적용됩니다.
대비는 색상(hue)이 아니라 밝기 차이로 결정됩니다. 빨강 위의 초록처럼 채도가 높아도 밝기가 비슷하면 대비비는 낮게 나옵니다.