> 개발자 도구 > 색상 대비 검사

색상 대비 검사기 (WCAG)

웹 접근성 표준(WCAG)에 따른 색상 대비율을 검사합니다

색상 선택

빠른 예시

미리보기

작은 텍스트 (14px) - 일반 크기
일반 텍스트 예시입니다. The quick brown fox jumps over the lazy dog.
큰 텍스트 (18px 볼드) - 큰 크기
매우 큰 텍스트 (24px) - Large Text Example

💡 WCAG 기준 설명

📊 대비율 기준

  • • AA 일반 텍스트: 4.5:1 이상
  • • AA 큰 텍스트: 3:1 이상
  • • AAA 일반 텍스트: 7:1 이상
  • • AAA 큰 텍스트: 4.5:1 이상

📏 텍스트 크기 정의

  • • 일반 텍스트: 18px 미만 (또는 14px 볼드 미만)
  • • 큰 텍스트: 18px 이상 (또는 14px 볼드 이상)
  • • 24px는 큰 텍스트로 분류됨

🎯 WCAG 레벨

  • • AA: 최소 준수 기준 (법적 요구사항)
  • • AAA: 향상된 접근성 (권장 사항)
  • • 대부분의 웹사이트는 AA 기준 준수

♿ 왜 중요한가요?

저시력자, 색맹, 노인 등 다양한 사용자가 콘텐츠를 쉽게 읽을 수 있도록 하여 웹 접근성을 향상시킵니다.

⚠️ 주의사항

  • • 그래픽 UI (버튼, 아이콘)는 3:1 이상의 대비율 권장 (WCAG 2.1)
  • • 로고와 장식적 요소는 대비율 요구사항에서 제외됨
  • • 비활성화된 요소도 대비율 요구사항에서 제외될 수 있음