Check your contrast
The free Vivlab contrast checker measures the contrast ratio between a text color and a background color, following the WCAG accessibility criteria, right in your browser.
Pick your two colors: the ratio and the checks update automatically.
Sample text
Sample text
Contrast ratio
17.01:1
AA · normal text
Pass
AA · large text
Pass
AAA · normal text
Pass
AAA · large text
Pass
Understanding WCAG levels
AA is the recommended level: a ratio of at least 4.5:1 for normal text and 3:1 for large text.
AAA is the stricter level: a ratio of at least 7:1 for normal text and 4.5:1 for large text.
Large text means text of at least 24px, or 18.5px in bold.
How it works
Check a contrast in 3 steps
Pick your colours
Set the text colour and the background colour with the swatches, or type in their hex code.
Read the ratio
The large number shows the contrast ratio between the two colours, from 1:1 (identical) to 21:1 (black on white).
Check the levels
The four badges show AA and AAA compliance; nudge a colour until they turn green.
What contrast is for
WCAG contrast and ratio
Contrast measures the difference in brightness between a text color and its background. The WCAG accessibility rules express it as a ratio, from 1:1 (no contrast) to 21:1 (black on white). The higher the ratio, the more the text stands out and stays readable.
The AA and AAA thresholds
The recommended AA level requires a ratio of at least 4.5:1 for body text (3:1 for large text). The stricter AAA level raises the bar to 7:1 (4.5:1 for large text). These thresholds keep text comfortable to read, including for people with low vision.
Why accessibility matters
Good contrast improves the experience for every visitor, on a small screen or in bright sunlight. It's also a legal requirement for many sites, and a signal that search engines like: an accessible site is better structured, which helps your SEO.
Our advice
Aim for at least 4.5:1 on body text: it's the easy way to stay AA compliant. For headings and large text you get a bit more room, but never go below 3:1.
Frequently asked questions
Contrast and accessibility
How is the ratio calculated?
It compares the relative luminance of the two colours, using the W3C formula: (lighter + 0.05) / (darker + 0.05). The result runs from 1:1 for two identical colours to 21:1 for pure black on pure white. The higher it is, the more the text stands out.
Which WCAG thresholds must I meet?
For level AA, normal text needs to reach 4.5:1 and large text 3:1. Level AAA is stricter: 7:1 for normal text and 4.5:1 for large text. These are the same values the WCAG standard sets everywhere.
What counts as large text?
Under WCAG, it means text of at least 24px (18pt), or 18.66px (14pt) when it's bold. Anything smaller is treated as normal text and should aim for the 4.5:1 threshold.
Why does contrast matter?
Enough contrast keeps text readable for people with low vision, for colour blindness, or in bright sunlight on a phone. It's also a legal duty: across Europe, digital accessibility applies to many sites, based on the WCAG criteria.
How do I fix low contrast?
The most effective move is to change lightness rather than hue: darken the text or lighten the background until you clear the threshold. Making the type bold or larger helps too, since large text gets a lower threshold.
Keep exploring