가나다 ABC 123
일반 텍스트 예시입니다.
작은 텍스트 예시입니다. The quick brown fox jumps over the lazy dog.
대비율
21.00:1
AAA
WCAG 2.1 접근성 기준
AA 일반 텍스트
4.5:1 이상 필요
✓ 통과
AA 큰 텍스트
3:1 이상 필요
✓ 통과
AAA 일반 텍스트
7:1 이상 필요
✓ 통과
AAA 큰 텍스트
4.5:1 이상 필요
✓ 통과
큰 텍스트: 18pt (24px) 이상 또는 14pt (18.67px) 볼드 이상
일반 텍스트: 그 외 모든 텍스트
♿ 색상 대비 검사기란?
색상 대비 검사기는 텍스트와 배경 사이의 명도 대비율을 측정하는 웹 접근성 도구입니다. WCAG(Web Content Accessibility Guidelines) 2.1 기준에 따라 AA/AAA 등급 충족 여부를 실시간으로 확인할 수 있습니다. 시각 장애가 있는 사용자도 콘텐츠를 읽을 수 있도록 보장하는 것은 법적 요구사항이기도 합니다. 디자인 단계에서 대비율을 검사하면 접근성 문제를 사전에 예방할 수 있습니다.
📋 WCAG 대비율 기준표
| 등급 | 일반 텍스트 | 큰 텍스트 | 적용 범위 |
|---|---|---|---|
| AA | 4.5:1 이상 | 3:1 이상 | 최소 기준 (법적 요구사항) |
| AAA | 7:1 이상 | 4.5:1 이상 | 향상된 접근성 |
| 참고 | 큰 텍스트 = 18pt(24px) 이상 또는 14pt(18.67px) Bold 이상 | ||
💡 접근성 디자인 팁
- 본문 텍스트: 최소 AA(4.5:1) 충족, 가능하면 AAA(7:1) 권장
- 플레이스홀더: 힌트 텍스트도 3:1 이상 유지
- 에러 메시지: 빨간색 + 아이콘으로 색상에만 의존하지 않기
- 링크 텍스트: 주변 텍스트와 구별되도록 밑줄 또는 굵기 추가
- 다크 모드: 밝은 모드와 동일한 대비율 기준 적용
자주 묻는 질문
AA와 AAA 등급의 차이는 무엇인가요?▼
AA는 최소 접근성 기준으로 법적 요구사항입니다. AAA는 더 높은 대비율을 요구하며, 저시력 사용자에게 더 나은 경험을 제공합니다. 대부분의 웹사이트는 AA를 목표로 하고, 중요한 콘텐츠는 AAA를 권장합니다.
왜 큰 텍스트는 기준이 낮은가요?▼
큰 텍스트는 획이 두껍고 면적이 넓어 저시력 사용자도 인식하기 쉽습니다. 따라서 동일한 가독성을 위해 더 낮은 대비율이 허용됩니다.
색상 대비만 맞추면 접근성이 보장되나요?▼
아니요, 대비율은 접근성의 일부입니다. 키보드 네비게이션, 스크린리더 호환성, 포커스 표시, 의미 있는 대체 텍스트 등 다양한 요소를 함께 고려해야 합니다.