Contrast Checker

Set the text color and the background color - either by typing a hex value or by opening the color picker in the swatch. The ratio updates as you type, and the table below it reads out pass or fail for each element type at both conformance levels. When a pair fails, a suggested nearest passing color appears beneath the table, holding your hue and changing only the lightness until the ratio clears the threshold.

That suggestion is the fastest way out of a failing pair without redesigning the palette. It keeps the color recognizably the same and moves it just far enough to pass, so a brand blue stays a brand blue while becoming readable. If the suggested color is uncomfortably different from the one you wanted, that is a signal the pair itself needs rethinking, not that the tool is being difficult.

Contrast is a ratio from 1:1 to 21:1, measured from the perceived luminance of the two colors. Black on white is 21:1; a color against itself is 1:1. WCAG sets 4.5:1 as the AA baseline for normal text, 3:1 for large text and for interface elements such as borders, icons and focus rings, and 7:1 as the AAA level for normal text. AAA also asks 4.5:1 for large text.

Large means 18pt and above, or 14pt and above in bold - roughly 24px and 19px. Those sizes are easier to read at lower contrast, which is why the bar is lower. Everything smaller is normal text, however thin or light the weight looks on screen. A light gray caption at 12px is normal text and needs 4.5:1.

The most common mistake is testing a color against the wrong background. Text over a gradient, a photograph or a translucent panel sits against several different values, and the pair that matters is the worst one - the lightest point of the gradient behind light text, not its average. Check the extreme, not the middle.

The second mistake is stopping at the ratio. WCAG also asks that color not be the only way information is conveyed, that focus states be visible, and that meaning survive in grayscale. A red error border at 3:1 still needs an icon or a message beside it, because a third of the people looking at it may not see the red.