Ensure links within text blocks are visually distinguishable
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
Users should be able to identify links without relying solely on color differences. If links blend with surrounding text, users may not realize they are interactive.
How to fix this issue
Make sure inline links are underlined, bolded, or otherwise visually distinct — not just a different color.
Developer guidance
Avoid designs that remove link underlines. If color is the only differentiator, ensure a minimum contrast difference of 3:1 between link and surrounding text.
Code examples
Incorrect Implementation
<p>Visit our <a href='#' style='color:#3366cc'>support</a> page for help.</p>Correct Implementation
<p>Visit our <a href='#' style='text-decoration:underline; color:#0044cc;'>support</a> page for help.</p>
Trusted by organizations across Europe working toward WCAG and EAA conformance