Design guide
How to Check Color Contrast for Accessibility (WCAG)
What contrast ratios WCAG requires for text, large text and icons, how the ratio is calculated, and how to fix failing colors without changing your brand.
By M2Toolkit Editorial TeamPublished 6 min read
Quick answer
Check the contrast ratio between the text color and its background. WCAG 2.2 level AA requires at least 4.5:1 for normal text and 3:1 for large text and icons. Enter both colors in the Contrast Checker to see the ratio, pass/fail results and a suggested fix.
Low-contrast text is one of the most common accessibility failures on the web — and it doesn't only affect people with low vision. Light gray text on white is hard for everyone to read on a phone outdoors. The fix is usually a small adjustment to one color.
What WCAG requires
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5 : 1 | 7 : 1 |
| Large text (≥ 24px, or ≥ 18.5px bold) | 3 : 1 | 4.5 : 1 |
| UI components and meaningful icons | 3 : 1 | — |
| Logos and purely decorative text | No requirement | No requirement |
AA is the standard most laws and procurement rules reference, including the European Accessibility Act and the ADA guidance in the US.
How the ratio is calculated
Each color's relative luminance (its perceived brightness, from 0 for black to 1 for white) is calculated from its red, green and blue values, with green weighted most heavily because our eyes are most sensitive to it. Then:
Black on white is 21:1, the maximum. Identical colors are 1:1.
Real examples
| Text color | Ratio | Normal text AA |
|---|---|---|
| #767676 | 4.54 : 1 | Pass — the lightest gray that passes |
| #999999 | 2.85 : 1 | Fail |
| #2c48d6 (blue) | 6.99 : 1 | Pass |
| #ff0000 (pure red) | 4.00 : 1 | Fail — large text only |
Fixing failing colors without changing your brand
- Darken (or lighten) the same hue. Moving lightness a few steps usually fixes contrast while keeping the color recognisably yours. The checker suggests the nearest passing shade.
- Use brand colors for large elements, where the 3:1 threshold applies, and a darker shade for body text and links.
- Build a shade scale with the Tints & Shades Generator, then pick text and background pairs from it.
- Don't rely on color alone to show meaning. Add text, icons or underlines for errors and links.
Frequently asked questions
Does contrast matter in dark mode?
Yes, the same ratios apply. Very pure white on pure black can feel harsh, so many dark themes use off-white text on dark gray while still passing AA.
What about WCAG 3 and APCA?
WCAG 3 is still a draft and may use a new method called APCA. For now, WCAG 2.2 ratios are the legal and industry standard.