Is your text readable? Check contrast in ten seconds
What WCAG, AA and AAA mean, which contrast numbers to aim for, and a checker you can use right on this page.
Light grey text on a white background looks neat in a mockup and turns unreadable on a phone in the sun. The check takes ten seconds, and it is the cheapest accessibility fix there is.
WCAG, AA and AAA in plain words
WCAG stands for Web Content Accessibility Guidelines. It is a public standard from the W3C, the body behind web standards, describing how to make sites usable for people with weak eyesight, color blindness, hearing loss or motor impairments. The current versions are 2.1 and 2.2, and both say the same about text contrast.
WCAG is a list of concrete checks, and each check has a level:
- A is the bare minimum. Without it, some people cannot use the site at all.
- AA is the working standard. When a contract, a law or a large client says “the site must be accessible”, it almost always means WCAG AA. In the EU, the European Accessibility Act requires it for many online shops and services since June 2025, and in the US accessibility lawsuits are usually judged against it.
- AAA is the strictest level. Nobody requires it for a whole site, but it is a good target for text people read for a long time.
Contrast is one of those checks. Two exceptions are worth knowing: logos, and text that is purely decorative or belongs to a disabled button, don’t have to meet it.
Who benefits? People with low vision, about one man in twelve with some form of color blindness, older readers, and anyone looking at a phone in the sun. That last group is all of us.
What the number means
The contrast ratio compares how bright the text is with how bright its background is. It runs from 1:1, the same color on itself, to 21:1, black on white. WCAG, the web accessibility guidelines, set the thresholds:
| Text | AA | AAA |
|---|---|---|
| Normal | 4.5:1 | 7:1 |
| Large: 24px, or 18.66px bold | 3:1 | 4.5:1 |
In short: aim for at least 4.5:1 for normal text, and for 7:1 where people read a lot.
Check your colors
Pick the text and background colors, or paste their HEX codes. The checker runs in your browser and sends nothing anywhere.
This is how the text looks
This is how the text looks
| AA | AAA | |
|---|---|---|
| Normal text | ||
| Large text |
The default pair is light grey on white, a favourite of mockups. It gets 2.32:1 and fails every check, even for large text. Now try : it is the lightest grey that passes AA on white, at 4.54:1. reaches AAA at 7:1. The difference on screen is small, the difference in readability is not.
When it fails
- Darken the text or lighten the background in small steps until the ratio clears 4.5:1.
- Keep low-contrast colors for decoration, borders and disabled states.
- Text on photos needs a solid or semi-transparent plate behind it: check against the lightest part of the image.
To check colors on any live site, an eyedropper such as the one in WhatStyle shows contrast on hover.