Color Contrast Checker
Pick a text and background color to see the contrast ratio and whether it clears WCAG AA and AAA — with a live preview of real text.
How it works
Contrast is the difference in brightness between text and its background, written as a ratio from 1:1 (identical) up to 21:1 (pure black on pure white). The higher the number, the easier the text is to read, especially for people with low vision.
WCAG sets thresholds: 4.5:1 for normal text and 3:1 for large or bold text to pass AA, and 7:1 for the stricter AAA. The checker computes the ratio from the relative luminance of both colors and shows a pass or fail for each level.
The live sample uses your exact colors, so you can trust your eyes as well as the number. If it's failing, darken the text or lighten the background until the ratio clears the level you need.
Frequently asked questions
What contrast ratio do I need to pass WCAG?
For AA, at least 4.5:1 for normal text and 3:1 for large text (roughly 18px bold or 24px regular). For AAA, 7:1 for normal and 4.5:1 for large. The tool flags each one.
Why does contrast matter?
Low-contrast text is hard to read, particularly for older users, people with visual impairments, and anyone on a phone in bright sunlight. Good contrast is both an accessibility requirement and just better design.
Does contrast depend on font size?
Yes. Large text (about 18px bold or 24px regular and up) is easier to read, so WCAG allows a lower ratio for it — 3:1 for AA instead of 4.5:1.