Contrast checker
Check whether text can actually be read on its background.
Large text looks like this
And ordinary body text, the size most of a page is set in, looks like this.
4.80:1
- AA
- Pass
- AAA
- Fail
- AA Large
- Pass
- UI & icons
- Pass
Grey text on a white card looks refined on a designer monitor and disappears on a phone in daylight. This gives the ratio and the verdict, and then the part most checkers leave out: the nearest colour that actually passes, found by walking the lightness in OKLCH so the hue stays where you put it.
How to use it
- Enter the text colour and the background.
- Read the ratio and the AA and AAA verdicts.
- If it fails, take the suggested colour.
Why use this tool
Completely private
Everything runs inside your browser. Your files and text are never sent to a server.
Free, with no limits
No sign-up, no watermarks and no cap on how many times you can use it.
Instant results
There is no upload or queue to wait for, so results appear as fast as your device can work.
Works on any device
Runs in any modern browser on phone, tablet or desktop. Nothing to install.
Frequently asked questions
- What do AA and AAA mean?
- They are the two levels of the Web Content Accessibility Guidelines. AA needs 4.5:1 for ordinary text and 3:1 once it is large or bold, and is what most rules and contracts require. AAA needs 7:1 and is worth aiming for on anything long enough to read properly.
- Why does the suggestion keep my colour?
- Because a suggestion you will not use is no help. The lightness is moved in OKLCH and the hue is left alone, so the result is a darker or lighter version of the colour you chose rather than a different one.
- Does this cover colour blindness?
- No. Contrast is about light and dark, and works the same for everyone. Whether two colours can be told apart is a different question, and the colour blindness simulator answers it.