전경색
배경색
미리보기
일반 텍스트 — The quick brown fox jumps over the lazy dog.
큰 텍스트 (24px 일반)
큰 텍스트 (18.67px 굵게)
UI 구성 요소
—
대비율
| 등급 | 일반 텍스트 | 큰 텍스트 | UI 구성 요소 |
|---|---|---|---|
| AA | — | — | — |
| AAA | — | — | 해당 없음 |
WCAG 2.1 — AA는 일반 텍스트에 ≥ 4.5:1, 큰 텍스트 및 UI 구성 요소에 ≥ 3:1이 필요합니다.
AAA는 일반 텍스트에 ≥ 7:1, 큰 텍스트에 ≥ 4.5:1이 필요합니다.
큰 텍스트 = 18pt(24px) 보통 또는 14pt 굵게(18.67px).
대비 검사기란 무엇인가요?
WCAG AA 및 AAA 접근성 준수를 위한 색상 대비율을 확인하세요. 일반 텍스트, 큰 텍스트, UI 구성 요소의 전경색과 배경색 조합을 즉시 검증하세요.
대비 검사기 사용 방법
- 전경 텍스트 색상을 입력하거나 선택하세요.
- 텍스트 뒤의 배경색을 입력하거나 선택하세요.
- 대비율과 WCAG 통과 또는 실패 결과를 즉시 확인하세요.
- 조합이 접근성 목표를 충족할 때까지 두 색상 중 하나를 조정하세요.
색상 대비 이해하기 ▾
예시
입력
흰색 배경에서 중간 회색 텍스트 확인:
출력
결과: 큰 텍스트(≥ 3:1)는 AA를 통과하지만 일반 텍스트는 AA를 통과하지 못합니다(4.5:1 필요). 모든 AA 수준을 통과하려면 회색을 약간 어둡게 하세요.
일반적인 사용 사례
- UI 업데이트를 배포하기 전에 버튼과 링크의 대비를 확인하세요
- 브랜드 시스템과 스타일 가이드의 텍스트 색상을 검증하세요
- 마케팅 그래픽의 가독성을 검토하세요
- 밝은 배경 위 어두운 색과 어두운 배경 위 밝은 색 조합을 빠르게 테스트하세요
자주 묻는 질문
AA와 AAA 대비 수준의 차이는 무엇인가요?
WCAG AA는 일반 텍스트에 4.5:1, 큰 텍스트에 3:1 비율을 요구합니다 — 이는 표준 법적 요건입니다. AAA는 일반 텍스트에 7:1, 큰 텍스트에 4.5:1을 요구하여 심한 저시력 사용자에게 향상된 접근성을 제공합니다.
이 도구는 비텍스트 대비(아이콘, 테두리)를 확인하나요?
예 — WCAG 1.4.11(비텍스트 대비)은 UI 구성 요소와 그래픽 요소에 3:1을 요구합니다. 표의 AA UI Components 결과가 이 요구 사항을 다룹니다.
내 색상이 AA는 통과하지만 AAA는 통과하지 못합니다 — 수정해야 하나요?
모든 콘텐츠에 AAA 준수가 필요한 것은 아닙니다. WCAG AA는 대부분의 관할 지역에서 표준 법적 요건입니다. 가능하면 AAA를 목표로 하되, 법적 준수에는 AA로 충분합니다.
큰 텍스트의 기준은 무엇인가요?
WCAG는 큰 텍스트를 일반 굵기 기준 18pt(24px) 이상 또는 굵은 텍스트 기준 14pt(약 18.67px) 이상으로 정의합니다. 큰 텍스트는 본질적으로 읽기 쉬우므로 더 낮은 대비 요구 사항(AA의 경우 3:1)을 가집니다.