색상 대비 체커
텍스트와 배경 색상의 WCAG 대비율을 검사하고 접근성 준수 여부를 확인합니다.
Aa#1A1A1A / #FFFFFF
대비율
17.40:1
AAA
WCAG 등급
일반 텍스트
AA (4.5:1)
일반 텍스트
AAA (7:1)
큰 텍스트
AA (3:1)
큰 텍스트
AAA (4.5:1)
미리보기
일반 텍스트 (16px) 미리보기입니다. WCAG 기준에 따른 가독성을 확인하세요.
큰 텍스트 (24px) 미리보기
프리셋 색상 조합
색상 대비 가이드
WCAG 기준
- •AA 등급: 일반 텍스트 4.5:1 이상, 큰 텍스트 3:1 이상
- •AAA 등급: 일반 텍스트 7:1 이상, 큰 텍스트 4.5:1 이상
- •큰 텍스트: 18pt(24px) 이상 또는 14pt(18.67px) 볼드
- •UI 요소와 그래픽은 3:1 이상 권장
접근성 팁
- •순수 색상으로만 정보를 전달하지 마세요 (아이콘, 패턴 병행)
- •텍스트와 배경의 대비를 항상 확인하세요
- •색약 사용자를 위해 빨강-초록 조합을 피하세요
- •다크 모드에서도 충분한 대비를 유지하세요
관련 도구
색상 대비 체커(WCAG 접근성 검사)란?
색상 대비 체커는 텍스트와 배경 색상 간의 명도 대비율을 WCAG 2.1 국제 접근성 기준에 따라 검사하는 도구입니다. 웹 디자이너, 퍼블리셔, 프론트엔드 개발자가 색각 이상 사용자 포함 모든 사람이 텍스트를 쉽게 읽을 수 있도록 AA·AAA 등급 준수 여부를 실시간으로 확인할 수 있습니다. 한국의 웹 접근성 인증(KWCAG)과 장애인차별금지법 준수에도 필수적인 도구입니다.
색상 대비 체커 활용 팁
- AA 등급 최소 요건: 일반 텍스트(18pt 미만)는 4.5:1, 큰 텍스트(18pt 이상 또는 굵은 14pt)는 3:1의 대비율이 필요합니다. 대부분의 웹사이트가 이 기준을 목표로 합니다.
- AAA 등급 도전: 일반 텍스트 7:1, 큰 텍스트 4.5:1의 최고 등급으로, 시력이 약한 사용자까지 배려하는 고품질 접근성을 제공합니다.
- 버튼·아이콘 검사: UI 컴포넌트와 그래픽 요소도 배경 대비 3:1 이상을 확보해야 접근성 기준을 충족합니다.
- 색맹 배려: 빨강-초록 조합은 피하고, 색상 외에 텍스트·아이콘·패턴을 병행하여 색각 이상 사용자도 정보를 인식할 수 있도록 설계하세요.