How contrast is measured
WCAG defines contrast as a ratio between the relative luminance of the lighter colour and the darker one, from 1:1 (identical colours) to 21:1 (black on white). Each colour is converted from sRGB to linear light, weighted for how sensitive the eye is to red, green and blue, and the ratio is (L1 + 0.05) / (L2 + 0.05). This checker uses exactly that formula from WCAG 2.2, so its numbers match what accessibility engines such as axe-core report.
Enter colours as hex codes (#651b32 or the short form #fff) or use the colour pickers. The ratio, the pass or fail badges and the preview update as you type. Semi-transparent colours are not supported; flatten them onto their background first.
The thresholds
Ratios are not rounded up: 4.49:1 fails AA for normal text even though it looks close. Placeholder text, disabled-looking labels and text over photos are where firm websites most often fall short, so check those colour pairs too.
- Normal text, level AA (1.4.3): at least 4.5:1.
- Large text, level AA: at least 3:1. Large means at least 24 px regular or 18.66 px bold (18 pt or 14 pt bold).
- Normal text, level AAA (1.4.6): at least 7:1; large text AAA: at least 4.5:1.
- User interface components and graphics (1.4.11): at least 3:1 — input borders, icons, focus indicators and chart lines.
Finding a colour that passes
When a pair fails, the checker can suggest the nearest passing colour. It keeps the hue and saturation of your text colour and moves only its lightness — darker on a light background, lighter on a dark one — until the ratio reaches the level you chose. The result usually still looks like your brand colour, just a little deeper. You can apply it to the text or adjust the background instead.
Brand colours that are too light for body text can often still be used for large headings, backgrounds behind dark text or decorative elements. Contrast rules apply to text and meaningful graphics, not to every colour on the page.
Privacy
The checker runs entirely in your browser. Nothing you enter is sent to our servers. To find contrast problems on a live page instead of a single colour pair, run the accessibility checker on your website.