WCAG 2.2 명도 대비 검사기.
텍스트 색상과 배경 색상을 입력하면 명도 대비와 WCAG 2.2 AA, AAA 통과 여부를 보여 줍니다. 브라우저에서 실행되며, 입력한 내용은 업로드되지 않습니다.
명도 대비
13.79:1
- 일반 텍스트 AA · 4.5:1통과
- 큰 텍스트 AA · 3:1통과
- 일반 텍스트 AAA · 7:1통과
- 큰 텍스트 AAA · 4.5:1통과
- 아이콘과 UI 요소 AA · 3:1통과
브라우저 안에서 실행됩니다. 여기에 넣은 파일은 업로드되거나 저장되지 않습니다.
명도 대비 검사 방법
- 텍스트 색상을 입력하세요.
#1F2A22나#333같은 HEX 코드로 입력하거나 색상 견본에서 고릅니다. - 배경 색상도 같은 방법으로 입력하세요. 두 입력란 사이의 바꾸기 버튼을 누르면 두 색상이 서로 바뀝니다.
- 결과를 확인하세요. 입력하는 대로 대비 값이 업데이트되고, 샘플에 24px과 15px 크기로 색상이 표시되며, WCAG 등급마다 통과 또는 미달이 표시됩니다.
입력란에는 #을 붙이거나 빼고 세 자리 또는 여섯 자리 HEX 코드를 넣을 수 있습니다. 반투명 색상은 배경 위에서 실제로 보이는 불투명한 색상을 입력하세요. 대비 값은 내림하므로, 4.50:1로 표시되는 조합은 실제로 통과합니다.
WCAG 2.2 명도 대비 기준
| 대상 | AA | AAA |
|---|---|---|
| 일반 텍스트 | 4.5:1 | 7:1 |
| 큰 텍스트(24px, 굵게는 18.66px) | 3:1 | 4.5:1 |
| 아이콘과 UI 요소 | 3:1 | 없음 |
텍스트 기준은 성공 기준 1.4.3(AA)과 1.4.6(AAA)입니다. 아이콘, 입력란 테두리, 포커스 표시 등 컨트롤의 구성 요소는 AA 등급만 있는 1.4.11에 해당합니다. 로고와 비활성화된 컨트롤의 텍스트는 예외입니다. 대비 값은 1:1(대비 없음)부터 21:1(흰색 위의 검은색)까지이며, WCAG 2 상대 휘도 공식으로 계산합니다.
Codex로 접근성 있는 디자인 시스템 만들기
색상을 고르는 동안에는 한 조합씩 확인해도 충분합니다. 제품 전체를 읽기 쉽게 유지하려면 디자인 시스템이 의존하는 조합을 확인하고, 그 규칙을 Codex가 따르는 내용에 포함하세요.
- 핵심 조합을 확인하세요. 페이지 배경 위의 텍스트, 카드 위의 텍스트, 메인 색상 위의 버튼 텍스트, 그리고 가장 자주 미달하는 조합인 보조 텍스트용 흐린 회색입니다.
- 규칙을 DESIGN.md에 적으세요. DESIGN.md 생성기는 primary 위의 on-primary, 또는 surface나 neutral 위의 on-surface가 4.5:1 미만이면 경고하고, 파일에 “텍스트 명도 대비를 WCAG AA(4.5:1) 이상으로 유지하세요”를 추가합니다.
- 파일을 린트하세요. DESIGN.md 가이드에서 설명하듯
npx @google/design.md lint DESIGN.md도 명도 대비를 검사합니다. - 완성된 화면은 Codex에 점검을 맡기세요. 이미지 위의 텍스트, 배지, 플레이스홀더 텍스트처럼 새로운 조합이 생기는 곳입니다.
[screen.html]의 모든 텍스트·배경 색상 조합을 WCAG 2.2 AA 기준으로 검사해 줘: 일반 텍스트는 4.5:1, 24px 이상(굵게는 18.66px 이상) 텍스트는 3:1, 아이콘·입력란 테두리·포커스 링은 3:1. 미달하는 조합은 대비 값과 함께 모두 나열하고, 색조는 유지하면서 통과하는 가장 가까운 색을 제안해 줘. DESIGN.md에 있는 색상만 쓰거나, 어떤 토큰을 바꿔야 하는지 알려 줘.
자주 묻는 질문
좋은 명도 대비는 어느 정도인가요?
일반 텍스트는 최소 4.5:1, 큰 텍스트와 아이콘, 컨트롤 구성 요소는 3:1입니다. 대부분의 접근성 정책이 요구하는 WCAG AA 등급입니다. 일반 텍스트가 7:1 이상이면 AAA를 충족하며, 최댓값은 21:1입니다.
큰 텍스트의 기준은 무엇인가요?
24px(18pt) 이상인 텍스트, 또는 굵게 쓴 경우 18.66px(14pt) 이상인 텍스트입니다.
APCA를 쓰나요?
아니요. WCAG 2.2 적합성을 측정하는 공식인 WCAG 2 명도 대비 공식을 씁니다. 향후 WCAG 3에서 논의되는 다른 방식인 APCA는 WCAG 2.2에 포함되지 않습니다.
무료인가요?
네. 무료이고, 회원가입이 필요 없으며, 입력한 색상은 브라우저 안에만 남습니다.