Color Contrast Checker
Check the contrast ratio between two colors against WCAG 2.1 accessibility standards. Get instant pass/fail results for AA and AAA compliance.
Contrast Ratio
21.00:1
WCAG 2.1 Results
Normal Text
(< 18pt / < 14pt bold)
Requires 4.5:1
Requires 7:1
Large Text
(>= 18pt / >= 14pt bold)
Requires 3:1
Requires 4.5:1
UI Components
(Icons, borders, inputs)
Requires 3:1
Live Preview
Heading Text Sample
This is how your body text will look with the selected foreground and background colors. Check readability at different sizes.
Small text (12px) — check this carefully for accessibility.
How It Works
Choose your colors
Use the color pickers or type hex values for foreground and background colors.
Check the ratio
See the contrast ratio and WCAG AA/AAA pass/fail results instantly.
Adjust for compliance
Tweak colors until you meet WCAG requirements for your target level.
Why Color Contrast Matters for Accessibility
Color contrast is a key accessibility requirement. WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA is stricter, requiring 7:1 for normal text.
Poor contrast makes content unreadable for people with low vision, color blindness, or those viewing screens in bright environments. About 1 in 12 men and 1 in 200 women have some form of color vision deficiency.