Ensure sufficient color contrast between text and background
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Low contrast text is difficult or impossible to read for users with low vision or color blindness. This includes common real-world cases like gray-on-gray text or light links on white backgrounds.
How to fix this issue
Maintain a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Use tools like the GetWCAG color contrast checker to test color combinations.
Developer guidance
When in doubt, increase contrast rather than decrease it. Ensure that text overlays (like on hero images) have enough opacity behind them.
Color Contrast Checker
Example text preview
Contrast ratio: 8.67:1
Normal text
Contrast Ratio:8.67:1
Normal Text (WCAG AA)
Pass ≥ 4.5
AAA
Pass ≥ 7.0
Code examples
Incorrect Implementation
<p style='color:#aaa;background:#fff;'>Low contrast text</p>Correct Implementation
<p style='color:#000;background:#fff;'>High contrast text</p>
Trusted by organizations across Europe working toward WCAG and EAA conformance