Contrast checker
Make every word clearer.
Check two solid colors against WCAG AA and AAA text contrast thresholds. Adjust the pair and see the result as you go.
Clarity looks good.
A short headline. A useful sentence. Enough contrast to let the words do their work.
Read the ratio in context.
WCAG AA calls for at least 4.5:1 for normal text and 3:1 for large text. Large text is at least 18 points, or 14 points when bold (about 24 CSS pixels or 18.7 CSS pixels bold).
This checker evaluates solid, opaque sRGB color pairs. It does not inspect gradients, images, font rendering, interactions or a whole page. Passing a color check is not a certification of accessibility.
Read W3C’s contrast guidance or start with our practical contrast guide.
How is the ratio calculated?
The tool converts sRGB channels to linear light, calculates relative luminance, then divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. Pass/fail uses the unrounded value; the displayed ratio is truncated to two decimals.
Does this check buttons and interface components?
The results shown here are text-contrast thresholds. Non-text controls and visual information have separate requirements. A whole-interface review needs more than a color-pair calculation.
Why do very similar colors fail?
They have too little difference in relative luminance. Try darkening one color or lightening the other. Changing only the hue does not always create enough contrast.