색상 대비 검사기
텍스트와 배경의 색상 대비가 WCAG 접근성 기준을 충족하는지 검사합니다.
대비 검사기
미리보기 텍스트
The quick brown fox jumps over the lazy dog. 다람쥐 헌 쳇바퀴에 타고파.
대비율
5.76:1
WCAG AA
check_circle통과
≥ 4.5:1
WCAG AAA
cancel실패
≥ 7:1
WCAG 기준
AA 등급은 최소 기준, AAA 등급은 향상된 기준입니다. 대부분의 웹사이트는 AA 등급을 목표로 합니다.
샘플 색상 조합
클릭하여 검사기에 적용해보세요.
WCAG 대비율 기준
| 등급 | 일반 텍스트 | 큰 텍스트 | 설명 |
|---|---|---|---|
| AA (최소) | 4.5:1 | 3:1 | 법적 요구사항 충족 |
| AAA (향상) | 7:1 | 4.5:1 | 저시력 사용자 최적화 |
* 큰 텍스트: 18pt(24px) 이상 또는 14pt(18.5px) 굵은 글씨
대비 개선 팁
- 텍스트 색상을 더 어둡게 또는 배경을 더 밝게
- 회색 텍스트 대신 진한 색상 사용
- 플레이스홀더 텍스트도 대비 기준 충족 필요
- 이미지 위 텍스트는 반투명 오버레이 추가
- 포커스 상태, 비활성 상태도 대비 확인
- 브랜드 색상이 대비 부족 시 대안 마련