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.
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.