Provide enhanced contrast for critical UI components
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
Enhanced contrast benefits users with more severe visual impairments or in low-light environments. While not mandatory for AA conformance, it reflects accessibility excellence.
How to fix this issue
For AAA-level conformance, use a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Developer guidance
You can use CSS custom properties to enable high-contrast themes dynamically.
Code examples
Incorrect Implementation
<span style='color:#666'>Status: OK</span>Correct Implementation
<span style='color:#000'>Status: OK</span>
Trusted by organizations across Europe working toward WCAG and EAA conformance