How to Fix Colour Contrast Issues (WCAG 1.4.3) — The Most Common Accessibility Failure
Colour contrast failure (WCAG SC 1.4.3) is the single most common accessibility violation on the web. In our audits, over 70% of websites fail this criterion. The good news: it's one of the easiest to fix.
What the standard requires
- Normal text (under 18pt / 24px): minimum 4.5:1 contrast ratio
- Large text (18pt+ / 24px+ or 14pt+ bold): minimum 3:1 contrast ratio
- UI components and graphics (SC 1.4.11): minimum 3:1 contrast ratio
Common failures
- Light grey text on white backgrounds (e.g.,
#999on#fff= 2.85:1 — fails) - Brand colours chosen for aesthetics, not readability
- Placeholder text with insufficient contrast
- Disabled button states that are too faint
- Text over images without a colour overlay
How to fix
Use a contrast checker to find your current ratio, then darken the text or lighten the background until you hit 4.5:1. Useful tools:
- WebAIM Contrast Checker — webaim.org/resources/contrastchecker
- Chrome DevTools — inspect element → colour picker shows contrast ratio
- Figma/Sketch plugins — check contrast during design phase
Example fix
Grey text on white that fails:
color: #999999; /* 2.85:1 on white — FAILS */
Darkened to pass:
color: #767676; /* 4.54:1 on white — PASSES */
That's all it takes. A few hex value changes can eliminate the most common accessibility violation on your site.