개발자 도구 · Free browser tool
WCAG 색 대비 검사기
텍스트와 배경의 색 대비 비율을 실시간으로 확인합니다. 접근 가능한 웹 디자인을 위해 WCAG 2.1 AA·AAA 준수를 즉시 검증합니다.
Colors
Pick or type hex values for text and background.
Live preview
Sample heading
The quick brown fox jumps over the lazy dog. Body text should stay readable at this size for AA compliance (4.5:1).
Smaller supporting copy — check Normal Text AA/AAA below.
Contrast ratio
17.74:1
Range is 1:1 (identical) to 21:1 (black on white).
- Text luminance
- 0.0092
- rgb(17, 24, 39)
- Background luminance
- 1.0000
- rgb(255, 255, 255)
WCAG 2.1 compliance
Large text means at least 18pt (24px) regular or 14pt (18.66px) bold.
- Pass
Normal text · AA
Body copy under ~18pt / 14pt bold · ≥ 4.5:1
- Pass
Normal text · AAA
Enhanced contrast for body copy · ≥ 7:1
- Pass
Large text · AA
≥18pt regular or ≥14pt bold · ≥ 3:1
- Pass
Large text · AAA
Enhanced contrast for large text · ≥ 4.5:1
Frequently Asked Questions
WCAG 2.1이 실제로 요구하는 대비 비율은?
WCAG 2.1 성공 기준 1.4.3(대비 최소)는 Level AA에서 일반 텍스트 최소 4.5:1, 큰 텍스트 3:1을 요구합니다. Level AAA(1.4.6 대비 강화)는 일반 텍스트 7:1, 큰 텍스트 4.5:1로 올립니다. 비율은 각 색의 상대 휘도에서 계산되며 1:1(동일 색)부터 21:1(순백 위 순흑)까지입니다.
AA와 AAA의 실무적 차이는?
AA는 공공 웹사이트·정부 서비스·상용 제품의 가장 흔한 준수 목표로, 가독성과 디자인 유연성의 균형입니다. AAA는 긴 읽기 경험이나 상당한 저시력 오디언스처럼 최대 가독성이 필요할 때의 더 엄격한 강화 수준입니다. 모든 UI 요소에 AAA를 맞추는 것은 종종 비현실적이라, 많은 팀은 전역 AA와 핵심 본문에 AAA를 목표로 합니다.
WCAG에서 "큰 텍스트"란?
큰 텍스트는 일반 굵기 최소 18포인트(보통 ~24px), 또는 볼드 최소 14포인트(보통 ~18.66px)입니다. 제목·히어로 카피는 종종 해당하고 본문 단락은 보통 해당하지 않습니다. 큰 글리프는 약한 대비에서도 읽히므로 임계값이 낮지만, 디자인 파일이 아니라 CSS의 실제 렌더 크기를 확인해야 합니다.
접근성에서 색 대비가 왜 그렇게 중요한가요?
낮은 대비는 가장 흔한 접근성 실패 중 하나입니다. 저시력 사용자, 고령자, 어두운·햇볕에 씻긴 화면의 사용자, 많은 색각 이상자가 텍스트를 읽으려면 색상(hue)만이 아니라 충분한 휘도 차이에 의존합니다. 초기에 대비를 검사하면 이상적 조건에서는 세련되어 보이지만 실제 방문자의 상당수에게는 쓸 수 없는 UI를 배포하는 일을 막습니다.
함께 보면 좋은 도구
판매자, 크리에이터, 전문가를 위한 다른 무료 브라우저 유틸리티를 둘러보세요.
접근 가능한 인터페이스에서 색 대비가 타협 불가능한 이유
장벽 없는 디자인은 있으면 좋은 광택 단계가 아니라, 저시력·색각 이상·강한 야외 눈부심에서도 UI를 읽게 하는 방식입니다. WCAG 2.1은 텍스트와 배경의 최소 대비 비율을 정해 훨씬 넓은 사용자에게 콘텐츠가 읽히게 합니다. 그 임계값을 놓치면 보정된 모니터의 디자이너에게는 괜찮아 보이는 폼·문서·대시보드·마케팅 페이지에서 사람들이 조용히 배제됩니다.
정부 사이트·엔터프라이즈 제품·많은 글로벌 소비자 앱은 최소 WCAG AA를 맞출 것으로 기대됩니다. 사양이 쓰는 것과 같은 상대 휘도 공식으로 브라우저에서 대비를 검사하면, 브랜드 색을 제3자 서비스에 업로드하지 않고도 출시 전 팔레트 결정을 검증할 수 있습니다. 텍스트와 배경을 바꾸고, 큰/일반 텍스트를 미리 보고, 조합이 통과하면 팀에 팔레트 링크를 공유하세요.
AA는 일반 텍스트 4.5:1·큰 텍스트 3:1, AAA는 7:1·4.5:1입니다. 큰 텍스트는 보통 18pt(약 24px) 일반 또는 14pt(약 18.66px) 볼드입니다. 디자인 리뷰의 빠른 게이트로 이 도구를 쓴 뒤, 최종 UI를 맥락에서 확인하세요—아이콘·그라데이션·오버레이는 두 평평한 헥스가 통과해도 실효 대비를 바꿀 수 있습니다.
이 사이트의 더 많은 개발자 유틸리티: 정규식 테스터로 폼 패턴 검증, JWT 디코더로 인증 토큰 검사, JSON 포맷터·유효성 검사기로 디자인 토큰 JSON 정리, Base64 인코드/디코드로 자산 인코딩. 마켓플레이스 상품 사진은 상품 사진 배경 검사기가 실제 이미지에 같은 휘도 산수를 재사용합니다.