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