Free Color Contrast Checker
Fixing real design problems, one at a time
Contrast problems tend to hide in the same few places, and a quick check usually fixes them. This checker calculates the contrast ratio of a text colour against a background, tells you which accessibility levels the pair passes, and suggests the closest passing shade if it does not. These are the situations it helps with most often.
Grey text on white
Light grey body text looks elegant and is the most common failure. Mid grey #757575 on white scores 4.6 to 1 and passes for normal text. Just slightly lighter, #777777, scores 4.47 and fails. The eye cannot see the difference, and the standard can.
White text on a brand colour
The indigo used on this site, #4338CA, gives white text a ratio of about 7.9 to 1, which passes even the stricter AAA level. A bright yellow such as #FFD700 behind white text scores around 1.4 to 1, which is unreadable. If your brand colour is light, use dark text on it instead.
What the numbers mean
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5 to 1 | 7 to 1 |
| Large text (24 px and up, or 18.66 px and up in bold) | 3 to 1 | 4.5 to 1 |
| Icons, input borders, focus outlines and other interface parts | 3 to 1 | Not defined |
Level AA is the usual goal and is what most accessibility laws and procurement rules refer to. The scale runs from 1 to 1, no difference at all, to 21 to 1, black on white.
Using the tool step by step
- Enter the text colour as a HEX code, or use the picker beside it.
- Enter the background colour.
- Look at the ratio and the pass or fail marks.
- If a pair fails, the tool suggests the nearest shade of your text colour that passes, found by moving toward black or white. Try it and check the result.
- Use Swap colours to test the reverse, light text on a dark background.
Beyond text: links, buttons and focus
- Links inside paragraphs. If a link differs from the surrounding text only by colour, people who cannot tell the colours apart will miss it. Add an underline, or make sure the link colour contrasts with the body text as well as with the background.
- Buttons. Check both the label against the button and the button against the page behind it.
- Form fields. A very pale border around an input may fail the 3 to 1 test for interface parts.
- Keyboard focus. The outline that shows where you are on the page needs enough contrast too, because keyboard users depend on it.
- Placeholder text inside fields is often too faint, and it disappears when people type.
What is exempt
Purely decorative text, logos and brand names, and disabled controls are generally not held to the contrast requirement. That is not a licence to make everything faint, though. A disabled button that nobody can read still confuses people, so give it a clear label even if it is dimmed.
Text over images and gradients
The tool compares two flat colours, so for text over a photo or a gradient, test the worst case: pick the lightest part of the image behind the text for dark text, or the darkest part for white text. A common fix is a semi-transparent dark layer behind the words, which gives the text a steady background wherever the image changes. The add text to image tool has a background box option for exactly this.
A quick audit routine for your own site
- List the colour pairs your site uses: body text, headings, links, buttons, form borders and footer text.
- Enter each pair here and note any that fail.
- Fix the worst ones first, usually grey body text and light buttons.
- Save the corrected colours in your style settings and test again.
A one hour audit once or twice a year catches most contrast issues before they reach visitors.
How the ratio is calculated
Each colour is converted to relative luminance, a measure of how bright it appears to the human eye, using the WCAG 2 formula. The ratio is the lighter value plus 0.05, divided by the darker value plus 0.05. The tool rounds the result down to two decimals, so a pair never appears to pass when it does not. Find exact codes for colours on your screen with the colour picker.
FAQ
At least 4.5 to 1 for normal text and 3 to 1 for large text, which is WCAG level AA.
Text of at least 24 CSS pixels, or at least 18.66 pixels when bold.
No. It uses the WCAG 2 contrast ratio, which current standards and laws refer to. APCA is a proposal for future guidelines.
Not directly. Pick the colour of the lightest area behind the text and test that pair.
No. Everything runs in your browser.