How to use the Color Contrast Checker
- Choose foreground and background colors.
- Review the calculated ratio.
- Check normal and large-text thresholds.
Frequently Asked Questions
Is the ratio calculated locally?
Yes.
Does passing guarantee accessibility?
No. It is one accessibility check among many.
Passing accessibility contrast checks
Pick a text colour and a background colour. The tool calculates the contrast ratio using the WCAG formula and shows whether it passes AA and AAA for normal and large text. Aim for at least 4.5 to 1 for body text and 3 to 1 for large headings and key interface elements.
If a combination fails, darken the text or lighten the background slightly and test again. Light grey text on white and white text on mid-tone brand colours are the most common failures. Do not rely on colour alone to convey meaning; add icons or labels too.
Limits: the checker evaluates two flat colours. It does not account for gradients, images behind text or font weight. Use it as a first check and test the real page as well.