Contrast Checker

Live Preview

See how your colors look together in real content.

Design with confidence

Great design starts with great accessibility. Test your color combinations against WCAG standards to ensure readability for everyone.

Small text passes when ratio is at least 4.5:1 (AA) or 7:1 (AAA)

Contrast Ratio
0.00
Text
Background

WCAG Compliance

Four levels of accessibility compliance for text contrast.

AA Large FAIL
Large text 18px+ or bold 14px+ (3:1)
AA Small FAIL
Normal body text (4.5:1)
AAA Large FAIL
Enhanced large text (4.5:1)
AAA Small FAIL
Enhanced small text (7:1)
How to Use This Tool
Step-by-step guide for students
01
Pick Your Colors
Click the color swatch or type a hex code for both text and background.
02
Check the Ratio
The number shows contrast ratio. Higher is better - aim for at least 4.5:1.
03
Review WCAG Grades
Green PASS means accessible. Red FAIL means contrast is too low for that text size.
04
Use Auto-Fix
If colors fail, click suggested fixes to find accessible alternatives instantly.
Pro Tip: Always test critical text like buttons, navigation, and form labels. These are where accessibility failures hurt the most.