WCAG 대비율 검사기 — 접근성 색상 테스트

웹 접근성은 선택이 아닌 필수입니다. 전 세계 인구의 약 8%가 색각 이상을 가지고 있으며, 많은 사람들이 낮은 대비율로 읽기 어려움을 겪습니다.

WCAG 대비율 기준

• AA 기준 — 일반 텍스트: 4.5:1 이상
• AA 기준 — 큰 텍스트: 3:1 이상 (18pt 이상 또는 14pt 굵은 체)
• AAA 기준 — 일반 텍스트: 7:1 이상
• AAA 기준 — 큰 텍스트: 4.5:1 이상

대비율 계산 방법

WCAG 공식: (L1 + 0.05) / (L2 + 0.05) (L1은 밝은 색, L2는 어두운 색의 상대 휘도)

일반적인 실수

• 밝은 배경에 밝은 텍스트 색상 사용
• 회색 텍스트를 너무 밝게 설정
• 배경 이미지 위에 색상 텍스트 사용
• 비활성 UI 요소의 대비율 무시

접근 가능한 색상 조합

• 흰색 배경 + #595959 (회색 텍스트): 7:1
• #003366 (진한 파랑) + 흰색 텍스트: 9.6:1
• 검정 배경 + 흰색 텍스트: 21:1