Color Contrast Checker
Processed Client SideCheck the WCAG contrast ratio between a text color and a background, and see which AA and AAA accessibility levels it passes.
Bookmark this tool now — skip the search next time you need it.
About Color contrast checker
This tool runs entirely in your browser. Whatever you paste is processed on your own device and is never uploaded, logged, or sent to any server.
Check the contrast ratio between a text colour and its background against the WCAG accessibility standard, and see exactly which levels it passes. The ratio runs from 1:1 for identical colours to 21:1 for black on white, and the thresholds that matter are 4.5:1 for normal body text at AA, 3:1 for large text and for user interface components, and 7:1 for the stricter AAA level. This is the check that catches the most common real accessibility failure on the web — light grey text on white, which looks refined to a designer on a good monitor and is genuinely hard to read for a large number of people. The ratio itself is colour-coded as you type, so a pair can be dragged into compliance by watching one number rather than re-running a check after every change.
Key features
- Live WCAG contrast ratio between any two colours
- Pass and fail results for AA and AAA at both normal and large text sizes
- Separate threshold for user interface components and graphical objects, which is 3:1
- Colour pickers and hex entry for both foreground and background
- Colour-coded status so a failing pair is obvious at a glance
- Live text preview rendered in the actual colours
- Swap foreground and background in one click, for checking a colour pair as it appears in both a light and a dark treatment
- Ratio itself colour-coded by threshold, so passing, borderline, and failing are distinguishable before you read any of the levels
- Invalid hex flagged rather than silently treated as black
- Runs entirely in your browser
How to use it
- Set your text colour as the foreground.
- Set the background colour behind it.
- Read the ratio and the pass or fail results for each level.
- Darken the text or lighten the background until it passes the level you need.
Tips & common mistakes
- The thresholds worth remembering: 4.5:1 for normal text at AA, 3:1 for large text and UI components, 7:1 for AAA. AA is the level most legal accessibility requirements reference.
- Large text means at least 24px, or 18.66px if bold. Below that it must meet the stricter normal-text threshold.
- Light grey on white is the most common real-world failure. The industry convention of #999 on white is 2.85:1 and fails AA outright.
- Placeholder text, disabled states, and helper text all still need to meet contrast if users are expected to read them. Being secondary is not an exemption.
- Contrast is symmetric — swapping foreground and background gives the same ratio. What changes is which one you should adjust.
- Check both ends of any gradient or image sitting behind text. A pair that passes at one end can easily fail at the other.
- Passing the ratio is a floor, not a guarantee of legibility. Font weight, size, and letter spacing all affect real readability too.
- The ratio is computed from relative luminance, not from how different two colours look. Two colours of similar lightness but wildly different hue can be visually striking and still fail badly, which is why red on green is a classic failure.
- Check your inverted pair too. A brand colour that passes as text on white often fails as white text on that same colour at a smaller size, and the swap button is there to make that a one-click check.