Runs in your browser. Nothing you enter is uploaded or stored.
Contrast is the difference in brightness between text and its background, expressed as a ratio. The free Colour Contrast Checker compares your text and background colours against the WCAG contrast ratios in your browser, so you can see whether the pairing is readable enough.
The HTTP Archive’s Web Almanac 2024: Accessibility found that only 29% of mobile sites had sufficient text colour contrast, so low contrast is one of the most common problems on the web.
How to use the Colour Contrast Checker
- Enter your text colour.
- Enter the background colour it sits on.
- Read the contrast ratio and compare it with the WCAG ratios below.
- If the pair fails, adjust one colour, usually darkening the text, and test again.
- Check every combination you use: body text, links, buttons, captions and text over images or banners.
How to read the results
A ratio runs from 1:1, which is no contrast at all, to 21:1, which is black on white. The WCAG thresholds you will see most often are:
| Use | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| Interface parts such as input borders and icons | 3:1 | not applicable |
Level AA is the usual target for websites. Large text means roughly 18 point, or 14 point bold, and above. A pass at AA means most visitors, including many with low vision, can read the text comfortably. AAA is stricter and is not always practical for a whole brand palette.
Common problems this finds
- Light grey text on white. Fashionable, but often too faint. Darken the grey until it passes.
- White text on a bright brand colour. Yellow, light green and orange backgrounds frequently fail with white text. Try dark text instead.
- Text over photographs. Contrast changes across the image. Add a solid or semi-transparent panel behind the words.
- Placeholder text and disabled-looking links. Visitors still need to read them.
Why this matters for SEO
Contrast is an accessibility and usability issue first. It is not a known direct ranking factor, so do not expect a jump in position from fixing it. What it does improve is how many visitors can read and act on your pages, which supports conversions and trust. Accessibility is also a legal and ethical consideration in many places. If your pages are slow as well as hard to read, pair this check with the PageSpeed and Core Web Vitals Checker.
Limits to keep in mind
A ratio tells you about colour only. It does not judge font size, thickness, spacing or whether text is clear on a patterned background. Colour alone should also never be the only way to show meaning, such as red for errors with no label. The tool checks the two colours you enter, so it cannot see how your live site renders them, and it is not a full accessibility audit.
A worked example (illustrative)
Imagine a travel agency whose buttons use white text on a pale orange background. It looks friendly in the design file, but the checker shows the pairing falls below the AA ratio for normal text. The designer has two choices: darken the orange until white text passes, or keep the orange and switch the button text to a dark colour. Either works, and testing both takes a minute. The same check on the footer, where grey text sits on a slightly darker grey, shows another failure that nobody had noticed because it only appears on certain screens.
Run the check on your whole palette once, write down which text and background pairs are approved, and give that list to anyone who edits your site later. That prevents the same problem returning with each new banner or button.
Designers can test colours before a layout is signed off, which is cheaper than changing a live site. Developers can use the same ratios when writing styles for hover, focus and disabled states, which are often forgotten. Content editors can check text they place over coloured blocks in a page builder.
Questions about the Colour Contrast Checker
What contrast ratio should body text have?
For WCAG Level AA, normal-size text needs at least 4.5:1 against its background. Large text needs at least 3:1.
Does the Colour Contrast Checker work on my live site?
It checks the text and background colours you enter. Look up the actual colour values used on your site, then test each pairing.
Does fixing contrast improve my Google rankings?
Not directly as far as is known. The benefit is that more people can read your content, which helps engagement and conversions.
Readable text helps every visitor, and it is one of the cheaper design fixes to make. Browse all the free SEO tools, see the full free image and website speed tools collection, or read about my website speed optimisation services. If you would like a person to look at your site, ask for a free audit.