- Prooflive.ai
- Free tools
- Contrast checker
Free colour contrast checker
Check whether text is readable on its background, to the WCAG 2.2 accessibility standard. Pick two colours and see the contrast ratio, whether it passes AA and AAA for body text, large text and buttons, and the nearest colour that does.
Large text looks like this
Body text, the size most of a page is set in. It needs the most contrast to be comfortable to read, especially on a phone outdoors.
| For | Level | Needs |
|---|
How to check contrast
- Pick the text colourUse the picker or type a hex code.
- Pick the backgroundThe colour the text sits on. Swap them to check the reverse.
- Read the resultThe ratio, and pass or fail for AA and AAA at each text size and for buttons and icons.
- Fix itIf it fails, click one of the nearest passing colours: same hue, just lighter or darker.
Good to know
What the WCAG levels mean
- AA, body text: 4.5:1. The level most laws and contracts point to, including the UK's public sector accessibility regulations.
- AA, large text: 3:1. Large means at least 24 px, or 18.7 px bold.
- AAA: 7:1 and 4.5:1. The enhanced level, for sites whose readers need it most.
- Icons and interface parts: 3:1. Buttons' edges, form fields and icons that carry meaning.
Common fails
Light grey text on white (#999 on white is 2.8:1), white text on bright brand colours like orange and yellow, and the grey hint text inside form fields. Darken the grey to about #6B6B6B or below for body text on white.
Contrast in your palette
Check every pair you actually use: body text on the background, link colour on the background, button text on the button. The colour palette generator lists which of your colours pair up readably.
Questions
What is a good contrast ratio?
At least 4.5:1 for body text and 3:1 for large text and icons (WCAG AA). 7:1 meets the stricter AAA level.
Is this contrast checker free?
Yes, with no sign-up. You can link to a check with ?fg=1F2937&bg=FFFFFF on the address.
Which version of WCAG does it use?
WCAG 2.2, which uses the same contrast formula as 2.0 and 2.1, so the results apply to all three.
What counts as large text?
At least 24 px (18 pt) regular, or 18.7 px (14 pt) bold.
Does contrast affect SEO?
Not directly, but readable pages keep people on them, and accessibility is part of a good page experience. Lighthouse and PageSpeed Insights flag low-contrast text.
Do logos need to pass?
No. WCAG makes an exception for logos and brand names, and for text that's purely decorative.
More free tools
Colour palette generator
The main colours in a photo or logo, or a full palette from one brand colour.
Font pairing
Google Fonts pairs on your own words, with the CSS to copy.
Google search preview
Your title and meta description as Google shows them, measured in pixels.
Favicon generator
Every favicon size, the .ico, the web manifest and the HTML, from an image or a letter.
Need the website too?
Design it your way and your AI builds it on Prooflive.ai, exactly to the design, with hosting, email and SEO done. Free to build; from £19 a month when it goes live. Designers earn 10 to 20% of every client payment.