대비 검사기

WCAG 접근성 대비 검사기. AA/AAA 준수, 색상 제안, 실시간 UI 미리보기.

Foreground (Text)

HEX

Background

HEX

Contrast Ratio

14.0:1

Excellent — AAA

✓

AA Large Text

Requires ≥ 3:1

✓

AA Normal Text

Requires ≥ 4.5:1

✓

AAA Large Text

Requires ≥ 4.5:1

✓

AAA Normal Text

Requires ≥ 7:1

Contrast Scale

AA (4.5)

AAA (7)

1:121:1

Live Preview

AppName

HomeAboutContact

Large Heading Text (24px+)

This is normal body text at 16px. Good contrast ensures all users can read your content comfortably, including those with visual impairments. WCAG guidelines define minimum contrast ratios to guarantee readability.

Small text (12px) requires even higher contrast to remain legible.

Link text

Input Label

Placeholder text...

Popular Palettes

접근성을 위한 색상 대비 확인하는 방법

The IT Hustle의 무료 Contrast Checker로 WCAG 2.1 색상 대비 준수 여부를 확인하세요.

1
색상 입력컬러 피커나 헥스/RGB 값 입력으로 전경(텍스트)색과 배경색을 설정하세요.
2
대비율 확인대비율이 자동으로 계산됩니다. WCAG AA는 일반 텍스트에 4.5:1, 큰 텍스트에 3:1을 요구합니다.
3
준수 배지 확인WCAG AA 일반, AA 큰 텍스트, AAA 일반, AAA 큰 텍스트 기준에 대한 합격/불합격 배지를 확인하세요.
4
불합격 색상 수정대비가 부족하면 최소 비율을 충족하는 제안 색상을 사용하세요. 제안을 클릭하면 즉시 적용됩니다.

자주 묻는 질문

WCAG(Web Content Accessibility Guidelines) 2.1은 웹 접근성에 관한 국제 표준입니다. 저시력이나 색맹이 있는 사람들도 텍스트를 읽을 수 있도록 최소 대비율을 정의합니다.

AA는 대부분의 사이트가 충족해야 하는 최소 기준으로, 일반 텍스트 4.5:1, 큰 텍스트 3:1입니다. AAA는 강화된 기준으로 일반 텍스트 7:1, 큰 텍스트 4.5:1입니다. AAA는 권장되지만 항상 필수는 아닙니다.

큰 텍스트는 18pt(24px) 또는 14pt(18.67px) 굵게로 정의됩니다. 큰 텍스트는 낮은 대비에서도 읽기 쉬우므로 대비 요건이 더 낮습니다.

대비 검사기

Large Heading Text (24px+)

접근성을 위한 색상 대비 확인하는 방법

자주 묻는 질문

관련 도구

대비 검사기

Large Heading Text (24px+)

접근성을 위한 색상 대비 확인하는 방법

자주 묻는 질문

관련 도구