Color Contrast Checker
Measure the WCAG contrast ratio of any text and background pair and find a passing shade when it falls short.
Check Color Contrast Against WCAG
Low-contrast text is one of the most common accessibility failures on the web. It affects people with low vision and color-vision differences, but also anyone reading a phone in sunlight. The Web Content Accessibility Guidelines turn "readable enough" into a number: the contrast ratio.
This page opens the Color Converter on its Contrast tab.
WCAG thresholds at a glance
| What you are checking | AA | AAA |
|---|---|---|
| Body text and labels | 4.5:1 | 7:1 |
| Large text (24px, or 18.7px bold) | 3:1 | 4.5:1 |
| Icons, input borders, focus rings and chart elements | 3:1 | — |
AA is the level most laws and procurement rules refer to. AAA is stricter and worth aiming for in long-form reading, but it is not expected for every element of a site.
Fixing a color that fails
When a pair falls short, the checker proposes the closest shade of the same hue that reaches 4.5:1 against your background, so you can keep the brand color recognisable while making text readable. Typical fixes are darkening a text color by 10 to 20 lightness points, or keeping the brand color for large headings and buttons while using a darker variant for small text.
Common mistakes
- Grey placeholder text that looks elegant but falls far below 4.5:1.
- White text on bright brand colors such as orange, yellow or light green.
- Checking only the light theme: dark mode needs its own check.
- Text over images: measure against the lightest area the text can sit on, or add a scrim.
The formula behind the ratio
Each sRGB channel is scaled to 0–1 and linearised, then combined as 0.2126 R + 0.7152 G + 0.0722 B to get relative luminance. The ratio is (L1 + 0.05) / (L2 + 0.05) with L1 the lighter color. Green dominates because the eye is most sensitive to it, which is why yellow on white fails so badly. To prepare colors for testing, convert them with HEX to RGB or adjust lightness with HEX to HSL.