Colour contrast is one of the most common accessibility failures on the web. In fact, 86% of websites fail WCAG colour contrast requirements according to the WebAIM Million report. If your text is hard to read against its background, you're excluding users — and potentially breaking the law.
What is WCAG Colour Contrast?
The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios between foreground text and background colours. These ratios ensure that people with low vision, colour blindness, or age-related vision changes can read your content.
Contrast ratio is measured on a scale from 1:1 (no contrast — white on white) to 21:1 (maximum contrast — black on white).
WCAG Contrast Ratio Requirements
| Level | Normal Text | Large Text (18pt+) |
|---|---|---|
| AA (required) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
Large text is defined as 18pt (24px) or larger, or 14pt (18.5px) bold or larger.
Common Contrast Mistakes
1. Light Grey Text on White
Using #999999 on a white background gives a ratio of just 2.85:1 — failing both AA and AAA. Switch to #595959 or darker for AA compliance.
2. Brand Colours That Don't Work Together
Many brands choose colours for aesthetics without checking accessibility. A bright blue button with white text might look modern but fail contrast requirements. Always test your brand palette.
3. Placeholder Text
Form placeholder text is notoriously low contrast. Most browsers render it in light grey that fails WCAG standards. Add visible labels above your form fields.
4. Text Over Images
Hero images with overlaid text rarely maintain consistent contrast. Use a semi-transparent overlay or text shadow to ensure readability in all areas of the image.
How to Check Your Contrast
Use our free colour contrast checker to instantly test any colour combination. Enter your foreground and background hex codes and see your contrast ratio with AA and AAA pass/fail results in real time.
For a full audit of every contrast issue on your website (plus 16 other WCAG checks), try our free accessibility scanner.
The Law: European Accessibility Act 2025
As of June 2025, the European Accessibility Act (EAA) requires websites selling products or services in the EU to meet WCAG 2.1 Level AA standards. That includes colour contrast. Non-compliant businesses face fines and legal liability.
UK businesses serving EU customers must also comply. Don't wait for a complaint — scan your site now.
Quick Fixes for Common Issues
- Body text: Use at least
#595959on white (4.58:1, passes AA) - Links: Ensure 3:1 contrast against surrounding text AND 4.5:1 against background
- Buttons: White text on buttons needs a background darker than
#767676 - Headings (18pt+): Only need 3:1, so you have more colour flexibility
- Form inputs: Input borders need 3:1 contrast against their background
Check your colours now: Free Colour Contrast Checker — instant results, no sign-up needed.