Contrast checker
Can everybody actually read that? Check a text colour against its background — and find out what size it starts working at.
- It all happens here
- Every part runs in your browser. Nothing you type is uploaded, and it works with the internet off.
- No account, ever
- No sign-up, no email address, no trial that turns into a bill.
- Yours to use
- Nothing watermarked, nothing limited to a preview.
The two colours
The colour of the text, and whatever is behind it.
Pairs worth checking
The ones that fail on real sites. Tap to load.
The bits people forget
Text on a photo. The background changes from one corner to the next, so check it against the lightest part, not the average.
Placeholder text in a form. Almost always too faint, and it is frequently carrying the instruction for the field.
The focus outline. The ring that shows where you are when moving by keyboard. Invisible on most sites, and the only way some people can use them at all.
Dark mode. A different pairing, so it has to be checked separately. Passing in light mode says nothing about the other one.
Large text only — 24px, or 19px if bold
3.41:1This works for headings and large text, but not for anything set small. Body text in this pairing will be hard work on a phone in daylight.
Try this instead
The same colour, a little darker. It passes at every size and is close enough that nobody will notice it changed.
How it actually looks
A heading, set large
A line of the sort of text that goes under a heading, at the size most sites use for reading.
And this is body text, which is the size that most often fails. If you are squinting at this line, that is the answer.
Small print, a caption, or the line under a form field explaining what to type.
What this is, if you have never had to think about it
Most people arrive here having been told they need one of these, without being told what it is. Nothing below assumes you already know.
Why pale grey text is the most common mistake on the web
It looks calm and expensive on a large bright screen in a dim office, which is exactly where design decisions get made. On a phone in daylight, or to eyes over about forty, or to the roughly one in twelve men with some colour blindness, it starts to disappear. Contrast is the one accessibility measure that is genuinely just a number — you can check it, and then you know.
What the numbers mean
The ratio compares how much light comes off the text against the background, from 1 to 1 (identical, invisible) up to 21 to 1 (black on white). The accepted standard is 4.5 to 1 for ordinary text and 3 to 1 for large text, since bigger letters are easier to read at lower contrast. A stricter standard asks for 7 to 1, which is worth aiming at for anything that gets read at length.
The bits people forget to check
Text on top of a photo, where the background changes from one corner to the next. Text on a coloured button, which is a foreground and a background you chose separately. Placeholder text in a form, which is almost always too faint. And the focus outline that shows where you are when navigating by keyboard — invisible on many sites, and the only way some people can use them at all.
Questions people ask
One pair takes a second. A whole site takes a habit.
My Site is built so this is handled already — readable text, focus outlines you can see, and headings in a sensible order come with the blocks, rather than being something you audit afterwards.
