Color Contrast Checker
Check text and background colors against WCAG accessibility contrast requirements.
What the levels mean
WCAG AA requires a 4.5:1 ratio for normal text (3:1 for large text, 18pt+ or 14pt+ bold) — the baseline most sites should meet. AAA requires 7:1 for normal text, a stricter standard for higher-accessibility needs.
About the Color Contrast Checker
The Color Contrast Checker measures the contrast ratio between a text colour and a background colour and tells you whether it meets the Web Content Accessibility Guidelines (WCAG) levels AA and AAA. Good contrast makes text readable for people with low vision, colour blindness or glare on a screen.
The contrast ratio runs from 1:1 (identical colours) to 21:1 (black on white). WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (about 18 pt or 14 pt bold). AAA requires 7:1 for normal text and 4.5:1 for large text. The ratio is calculated from the relative luminance of each colour.
How to use it
- Enter the foreground colour as HEX.
- Enter the background colour.
- Read the ratio and the pass or fail for each level.
- Adjust either colour until you pass.
Tips and good to know
- Do not rely on colour alone to convey meaning.
- Check hover, focus and disabled states, which are often missed.
- Placeholder text and icons also need enough contrast.
Frequently asked questions
What ratio should I aim for?
At least 4.5:1 for body text.
Does it work for images of text?
You can test the colours but images need separate review.
Is passing AA legally required?
Many laws and policies reference WCAG AA; check what applies to you.