Contrast checker
Set a text colour and a background. Read the ratio, see it on real type, and take the nearest colour that passes if yours does not.
- WCAG AA and AAA
- On real type
- The nearest fix
Contrast ratio
6.27:1
Clear at a glance
Contrast decides whether a sentence is read or skipped. This paragraph is set at the size most of a page is read in.
Small print, captions and the fine detail of a form.A button- Body text
- AA4.5Pass
- AAA7Fail
- Large text
- AA3Pass
- AAA4.5Pass
- Interface and graphics
- AA3Pass
Nearest text colour that passes
Runs entirely in your browser. Nothing you enter is sent or stored.
What the ratio measures
The contrast ratio compares how much light two colours give off, from 1:1 for two identical colours to 21:1 for black on white. It is defined by the Web Content Accessibility Guidelines (WCAG) and is what accessibility audits and laws refer to.
The ratio is not rounded up to a threshold: 4.49:1 does not pass where 4.5:1 is required. The checker shows two decimals, cut rather than rounded, so what it shows is what an audit will find.
The thresholds
| What is checked | AA | AAA |
|---|---|---|
| Body text | 4.5:1 | 7:1 |
| Large text (24 px, or 18.66 px bold, and up) | 3:1 | 4.5:1 |
| Interface components and meaningful graphics | 3:1 | — |
AA is the level most accessibility laws and policies require. AAA is the stricter level, for text that must be read by as many people as possible.
Logos, purely decorative text and disabled controls are exempt. Placeholder text is not: it is text, and it is very often too pale.
Beyond the number
A passing ratio is a floor, not a guarantee. A thin typeface needs more contrast than a sturdy one at the same size, and light text on a dark ground reads heavier than the reverse. That is why the checker sets your colours on real type, at body and heading sizes, before it gives a verdict.
When a pair fails, the suggested colour keeps your hue and changes only its lightness, as little as it takes. To see it in every notation, open it in the colour converter.
Made by Mystya.
We are a web studio in Québec. These tools are free and will stay free: they are how we show what we care about, in something you can use. If you want a site built with the same attention, we would like to hear about it.