Color Contrast Checker
Contrast ratio
A fresh perspective.
A quiet morning, a new page, and room to think.
What the ratio means
A contrast ratio compares the relative luminance of two colors. It runs from 1:1, where both colors are identical and the text is invisible, to 21:1 for pure black on pure white. The order of the two colors does not change the result.
Relative luminance is not the same as HSL lightness. It weights green most heavily and red least, which is why swapping a blue for a yellow of the same nominal lightness can change the ratio substantially.
The thresholds this tool reports
WCAG 2.2 sets 4.5:1 for normal text at level AA and 7:1 at AAA. Large text has lower requirements: 3:1 at AA and 4.5:1 at AAA. Large text means at least 24 CSS pixels, or about 18.67 pixels when bold. Essential user interface boundaries and meaningful graphics have their own 3:1 requirement.
All five thresholds are shown for the pair you enter, so you can see exactly which uses the combination supports rather than a single pass or fail badge.
One pair at a time
This tool evaluates a single foreground and background combination. It does not inspect a whole palette, text over a photograph or gradient, or anything that depends on how a page is actually assembled. Passing a ratio here does not certify a page as accessible.
When a pair falls short, the suggested replacement keeps the original hue and chroma where it can and adjusts lightness until the requirement is met, so the fix stays close to the color you chose.
Frequently asked questions
No. The ratio is calculated from the relative luminance of both colors, so swapping foreground and background produces the same number.