About the Contrast Checker
Contrast ratio measures the difference in relative luminance between text and its background, from 1:1 (invisible) to 21:1 (black on white). WCAG 2.1 asks for at least 4.5:1 for body text and 3:1 for large text or interface components. Low contrast is the single most common accessibility failure found on the web, and it is also the easiest to fix.
How to use the Contrast Checker
- Set the text colour and the background colour, by picker or HEX code.
- Read the contrast ratio at the top.
- Check which WCAG levels pass and which fail.
- Darken or lighten one colour until the level you need passes, using the live preview to judge the look.
Why use this tool?
All WCAG thresholds
AA and AAA for both normal and large text, plus the 3:1 rule for icons, borders and form controls.
Realistic preview
Heading, body and small print samples in your colours, so you judge the result rather than just the number.
Swap in one click
Flip foreground and background to check the reverse pairing used in dark mode or inverted banners.
Frequently asked questions
What counts as large text?
18pt (about 24px) regular, or 14pt (about 18.66px) bold and above. Large text only needs 3:1 for AA.
Does contrast apply to logos?
No. Logotypes and purely decorative images are exempt, as is disabled UI text. Everything a user must read or operate is covered.
Is grey text on white acceptable?
It depends on the grey. #767676 on white just passes 4.5:1; the popular #999999 only reaches about 2.8:1 and fails for body copy.