Color Contrast Checker

Contrast Ratios and What the Thresholds Mean

Contrast is the difference in perceived brightness between text and the surface behind it. Get it wrong and your interface is unreadable for people with low vision, for anyone using a phone in sunlight, and increasingly for everyone as displays and eyes vary. The Web Content Accessibility Guidelines turn that into a measurable number, and this checker calculates it for any pair of colors.

How the ratio is calculated

Every color has a relative luminance, a value from 0 for black to 1 for white, derived from its red, green, and blue channels after each has been linearised and weighted for how sensitive human vision is to it. Green contributes most, blue least. The contrast ratio between two colors is then the lighter luminance plus 0.05, divided by the darker luminance plus 0.05.

That formula produces a value between 1 and 21. Identical colors give 1 to 1, meaning no contrast at all. Pure black on pure white gives 21 to 1, the theoretical maximum. The small 0.05 offset accounts for ambient light reflecting off a real screen, which is why even black on white does not reach infinity.

The thresholds you need to hit

• 4.5 to 1 for normal body text at Level AA, the level most organisations and procurement rules target.
• 3 to 1 for large text, meaning roughly 24px and above, or 18.66px and above when bold.
• 3 to 1 for meaningful non-text elements such as icons, input borders, and focus indicators.
• 7 to 1 for body text at Level AAA, a stricter target worth aiming for on text-heavy reading interfaces.

Worked example

A common mistake is mid-grey text on white. Grey at #777777 on a white background gives roughly 4.48 to 1, which fails AA for body text by a hair, even though it looks fine to most designers on a good monitor. Darkening it slightly to #767676 pushes it just past 4.5 and it passes. That is how tight the margin often is, and exactly why you check the number instead of trusting your eye.

How to use it

1. Enter your foreground and background colors as hex values.
2. Read the ratio and the pass or fail result for each level.
3. If it fails, adjust lightness rather than hue. Changing how light or dark a color is moves the ratio far more than shifting its hue does.
4. Re-check any state you forgot: hover, disabled, placeholder text, and text sitting on top of an image.

Tips

• Placeholder text and disabled controls are the most commonly failed elements on a page.
• Text over a photograph needs a solid overlay or a text shadow, because the ratio changes across the image.
• Passing the ratio is a floor, not a guarantee. Very thin fonts can still be hard to read at a technically passing ratio.

Frequently asked questions

Which WCAG version does this use? The contrast ratio definition and thresholds from WCAG 2.1, which are unchanged from 2.0 and carried into 2.2.

Does it handle transparency? Enter the color that actually results after the layer is composited over its background, since the ratio depends on the final rendered color.

Is AA good enough? AA is the usual legal and contractual benchmark. AAA is better where long-form reading is the point.

Related Reading

• → Color Contrast & Accessibility