What a contrast ratio measures
A contrast ratio is a single number describing how different two colors are in brightness. It runs from 1:1 (identical colors, nothing readable) up to 21:1 (pure black on pure white). The Web Content Accessibility Guidelines (WCAG) use it to judge whether text is readable for people with low vision, and for anyone reading on a dim screen or in bright sunlight.
Each color is first converted to its relative luminance, a measure of perceived brightness that weights green most heavily and blue least. Then the lighter luminance plus 0.05 is divided by the darker luminance plus 0.05. Black is 0 and white is 1, so black on white gives (1 + 0.05) / (0 + 0.05) = 21.
The ratio depends only on brightness, not hue. A saturated red and a saturated green can have a low ratio and still be hard to tell apart as text and background.
When you need to check contrast
Contrast problems appear wherever text sits on a color: light gray captions on white, white text on a pastel button, link colors in a dark footer, placeholder text in form fields. Designers often pick these by eye on a good monitor, then discover later that they are hard to read on a phone outdoors.
Checking early is cheaper than fixing later. Test each text and background pairing before it enters a design system, and test the pairs that carry important information on a finished page. Many organizations are required to meet WCAG level AA, so a numeric result gives you something concrete to cite in a review.
How to check a color pair with this tool
- Set the Text color by clicking the swatch to open your browser's picker, or by typing a hex code into the box beside it.
- Set the Background color the same way.
- Look at the preview panel, which shows a heading-style line and a smaller line in your two colors.
- Read the ratio in the first result box, shown with two decimals, for example 21.00:1.
- Check the two pass/fail boxes: one tests the ratio against 4.5:1 (labeled WCAG AA, normal text) and the other against 7:1 (labeled WCAG AAA, normal text).
Everything is calculated in your browser as you type. Three-digit shorthand such as #FFF works as well as six-digit codes. If a code is invalid, the results disappear until you fix it. To convert a color from another notation first, try the HEX to RGB converter or the color picker.
Limits and common mistakes
This checker applies two thresholds only: 4.5:1 for AA and 7:1 for AAA, both for normal-size text. WCAG also allows 3:1 for large text and for interface components, but this tool does not show that result. A "Fail" for a big heading or a button border may still be acceptable under the large-text rule.
- Only opaque hex colors are supported. Transparency is not handled, so work out the final blended color first.
- The tool compares exactly two flat colors. Text over a photo or gradient must be checked at its worst spot.
- A passing ratio does not cover font weight or size. Thin type can stay hard to read at 4.5:1.
If a pair fails, nudge the lightness of one color and test again. A color palette generator can suggest starting points.