색상 대비 체커
🎨 색상텍스트-배경 색상의 명암비를 WCAG 기준으로 검사합니다. 접근성 준수 여부를 바로 확인.
가나다 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 2.1 기준에 따라 AA/AAA 등급 충족 여부를 실시간으로 확인할 수 있습니다. 시각 장애가 있는 사용자도 콘텐츠를 읽을 수 있도록 보장하는 것은 법적 요구사항이기도 합니다. 디자인 단계에서 대비율을 검사하면 접근성 문제를 사전에 예방할 수 있습니다.
⚠️ WCAG 기준
일반 텍스트는 4.5:1(AA), 큰 텍스트는 3:1이 최소이며, 버튼 테두리·아이콘도 인접 배경과 3:1 이상 대비가 필요합니다(SC 1.4.11).
📋 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) 권장. 흰 배경에 #767676이 정확히 4.54:1로 경계선 케이스입니다.
- 플레이스홀더: 힌트 텍스트도 3:1 이상을 유지하세요. 흔히 보이는 옅은 회색(#CCC)은 1.61:1로 기준 미달입니다.
- 에러 메시지: 빨간색만 쓰면 적록색약 사용자(전체 남성의 약 8%)가 인지하지 못합니다. 아이콘, 텍스트 라벨을 함께 표시하세요.
- 링크 텍스트: 주변 본문과의 대비뿐 아니라 본문 색과 링크 색의 대비도 3:1 이상이어야 색맹 사용자가 구분할 수 있습니다.
- 다크 모드: 검은 배경에 순백(#FFF)을 쓰면 대비가 너무 강해 잔상이 생깁니다. #E5E5E5 ~ #F0F0F0 사이가 가독성이 좋습니다.
- UI 컴포넌트: 버튼 테두리, 폼 인풋 보더, 아이콘 같은 비텍스트 요소도 인접 배경과 3:1 이상 대비가 필요합니다(WCAG 2.1 SC 1.4.11).
📐 대비율 계산 원리
대비율은 (L1 + 0.05) / (L2 + 0.05) 공식으로 계산되며, L1은 밝은 색, L2는 어두운 색의 상대 휘도입니다. 상대 휘도는 sRGB의 R/G/B 값을 감마 보정한 뒤 0.2126·R + 0.7152·G + 0.0722·B로 가중 평균합니다.녹색 가중치가 가장 큰 이유는 사람 눈이 녹색 영역에 가장 민감하기 때문이며, 그래서 채도 높은 노랑(#FFFF00)은 흰 배경에서 1.07:1로 거의 보이지 않고, 채도 낮은 파랑은 같은 RGB 합산값이라도 대비가 더 높게 측정됩니다.
자주 묻는 질문
AA와 AAA 등급의 차이는 무엇인가요?▼
AA는 최소 접근성 기준으로 한국 KWCAG, 미국 ADA, EU EAA 등에서 법적 요구사항으로 채택됩니다. AAA는 더 높은 대비율을 요구하며, 저시력 사용자에게 더 나은 경험을 제공합니다. 대부분의 웹사이트는 AA를 목표로 하고, 정부·금융·의료 사이트는 AAA를 권장합니다.
왜 큰 텍스트는 기준이 낮은가요?▼
큰 텍스트는 획이 두껍고 면적이 넓어 저시력 사용자도 인식하기 쉽습니다. 18pt(24px) 이상 또는 14pt(18.67px) Bold 이상이 "큰 텍스트"로 분류되며, 동일한 가독성을 위해 더 낮은 대비율(3:1)이 허용됩니다.
색상 대비만 맞추면 접근성이 보장되나요?▼
아니요, 대비율은 접근성의 일부입니다. 키보드 네비게이션, 스크린리더 호환성, 포커스 표시, 의미 있는 대체 텍스트, 폼 라벨 연결, 동영상 자막 등 다양한 요소를 함께 고려해야 WCAG 전체 기준을 충족합니다.
브랜드 색이 기준 미달이면 어떻게 하나요?▼
브랜드 색은 강조 요소(헤더, 버튼)에만 사용하고 본문은 별도의 텍스트 색을 정의하는 것이 안전합니다. 예를 들어 brand-500이 본문에 부적합하면 brand-700 또는 brand-900을 텍스트 전용 토큰으로 추가하세요.