전경·배경색의 읽기 대비를 테스트
WCAG 색 대비 검사: 텍스트/배경 hex를 AA·AAA 접근성 목표로 테스트.UI 색상 조합 확인에 유용. 브라우저에서만 계산합니다.
Sample text Aa
대비율: 3.15:1
AA 본문(≥4.5)미통과
AA 큰 글자(≥3)통과
AAA 본문(≥7)미통과
팁: 전경을 더 어둡게 하거나 배경을 밝히면 AA를 통과하기 쉽습니다.
비공개 · 빠름 · 무료
대비율은 접근성의 핵심 지표입니다. 숫자가 높을수록 배경 위 글자가 또렷합니다. WCAG는 본문과 큰 굵은 제목에 다른 기준을 둡니다.
빠른 디자인 점검이지 전체 감사가 아닙니다 — 포커스 순서, 스크린 리더, 키보드 경로도 중요합니다.
브랜드 색이 매우 옅으면 사용자에게 눈을 찌푸리게 하지 말고 글자를 어둡게 하거나 받침을 더하세요.
검사 방법
- 전경·배경 hex 입력
- 비율과 AA/AAA 힌트 읽기
- 목표에 맞을 때까지 색 조정
대비 검사가 잡는 것
- 저시력 독자의 부담을 줄임.
- 읽기 어려운 회색으로의 디자인 리뷰 왕복을 줄임.
- 「나는 괜찮은데」 논쟁을 숫자로 정리.
시나리오
- 버튼 라벨 vs 채우기 색
- 옅은 회색 푸터 링크
- 틴트 패널 위 다크 모드 본문
팁
- 본문은 큰 디스플레이 서체보다 기준이 엄격합니다 — 그래도 높게 목표하세요.
- 아이콘도 구분 가능한 대비가 필요합니다.
- 그라데이션에서는 글자 바로 뒤의 색을 샘플링하세요.
참고
| 입력 | 출력 | 설명 |
|---|---|---|
| 흰 배경에 어두운 글자 | 보통 AA 통과 | 전형적 본문 |
| 흰 배경에 옅은 회색 | 종종 실패 | 글자나 배경을 어둡게 |
대비 FAQ
- AA vs AAA?
- AAA가 더 엄격합니다. 많은 제품은 최소 AA, 가능하면 AAA.
- 큰 텍스트란?
- 대략 더 큰 일반 크기 또는 중간 크기의 굵은 글자 — 페이지는 흔한 임계값을 적용합니다.
- 색각 다양성 사용자는?
- 대비는 도움이 되지만 상태 전달을 색에만 의존하지 마세요.