색상 대비 검사 도구
두 헥스 색상 사이의 WCAG 대비 비율을 확인하고, 그 조합이 AA 및 AAA 웹 접근성 기준을 통과하는지 함께 확인합니다.
이 도구가 궁금증을 해결해 주었나요?
감사합니다 — 도구 개선에 큰 도움이 됩니다.
이 도구 사용법
- 전경(텍스트) 색상과 배경 색상을 헥스 코드로 입력하세요.
- 도구가 각 색상의 WCAG 상대 휘도를 계산합니다.
- 대비 비율과 AA·AAA 기준의 통과/실패 결과를 확인하세요.
두 색상이 WCAG 2.1 대비 기준을 충족하는지 확인합니다. 일반 텍스트(AA)는 최소 4.5:1, 최고 등급 AAA는 7:1이 필요합니다.
공식
For each hex color, compute relative luminance L using the WCAG formula:L = 0.2126 × lin(R) + 0.7152 × lin(G) + 0.0722 × lin(B)
where lin(c) = c/12.92 if c ≤ 0.03928, else lin(c) = ((c + 0.055)/1.055)2.4.
Contrast ratio: ratio = (Llighter + 0.05) / (Ldarker + 0.05)
WCAG thresholds: AA normal text ≥ 4.5:1; AA large text ≥ 3.0:1; AAA normal text ≥ 7.0:1; AAA large text ≥ 4.5:1.
자주 묻는 질문
- WCAG 대비 비율이란 무엇인가요?
- WCAG(웹 콘텐츠 접근성 지침)는 대비 비율 공식을 정의합니다. 1:1(대비 없음)부터 21:1(흰 바탕에 검정)까지 범위가 있습니다. 일반 본문 텍스트는 AA 준수를 위해 최소 4.5:1이 필요합니다.
- 큰 텍스트의 기준은 무엇인가요?
- 큰 텍스트는 18pt(24px) 이상이거나 14pt 굵게(약 19px 굵게)입니다. 큰 텍스트는 AA 기준에서 3:1 비율만 있으면 됩니다.