색 대비 검사기

WCAG 2.1 접근성 준수 확인

{{ __t('small_text') }}: The quick brown fox jumps over the lazy dog.

{{ __t('large_text') }}: The quick brown fox.

{{ ratio }}:1

{{ __t('contrast_ratio') }}

{{ passAAsmall ? '✓' : '✗' }}
AA Small (4.5:1)
{{ passAAlarge ? '✓' : '✗' }}
AA Large (3:1)
{{ passAAAsmall ? '✓' : '✗' }}
AAA Small (7:1)
{{ passAAAlarge ? '✓' : '✗' }}
AAA Large (4.5:1)

왜 대비를 확인해야 하나요?

남성의 약 8%, 여성의 약 0.5%가 어떤 형태로든 색각 이상이 있습니다. 낮은 대비는 텍스트를 읽기 어렵게 만듭니다 — 특히 작은 글자, 화질이 나쁜 화면, 시각 장애 사용자에게. WCAG는 여러 국가에서 법적으로 요구되는 최소값을 정의합니다(EU EN 301 549, 미국 ADA).

WCAG 2.1 기준값

AA 등급은 일반 텍스트(24px 미만 또는 18.66px 굵게 미만)에 4.5:1, 큰 텍스트에 3:1을 요구합니다. AAA 등급은 일반 텍스트 7:1, 큰 텍스트 4.5:1을 요구합니다. UI 컴포넌트와 그래픽은 최소 3:1. 이 값들은 WCAG 공식의 상대 휘도에 기반하며 색조는 영향이 없습니다.