WCAG contrast checker.
Check color contrast ratios between text and background to ensure your design is accessible and compliant with WCAG standards.
Contrast ratio
Good contrast is essential for accessibility. This tool helps you check if your text is readable for all users.
Button exampleWCAG contrast requirements at a glance
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | 3:1 |
Large text means 18pt (24px) regular or 14pt (18.7px) bold and above. The UI row comes from WCAG 2.1 SC 1.4.11 (non-text contrast) and covers things like input borders, icons, and focus rings.
How the ratio is calculated
The ratio compares the relative luminance of the lighter and darker color: (L1 + 0.05) / (L2 + 0.05). Pure black on white scores 21:1, identical colors score 1:1.
Luminance is not a simple average of the channels: green is weighted most heavily (about 71%), then red (21%), then blue (7%), because that is how sensitive our eyes are to each. That is why a mid-green can pass against white while a mid-blue of the same "brightness" fails.
Contrast questions
Do logos need to pass?
No. Logos and purely decorative text are exempt from WCAG contrast requirements.
What about placeholder and disabled text?
Disabled controls are exempt, but placeholder text is not: users have to read it, so treat it as normal text and aim for 4.5:1.
My brand color fails AA. Now what?
Darken the text shade or lighten the background; you usually only need a one or two step shade shift to pass. Keep the original brand color for non-text accents like icons and borders, where the 3:1 rule applies instead.
Why contrast matters
Low contrast text is difficult to read for many people, especially those with low vision, color blindness, or varying screen qualities (like glare on a phone). Ensuring good contrast is one of the easiest ways to improve your site's usability.
Updated June 2026