Ensure links within text blocks are visually distinguishable
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Links must LOOK like links — not just be a different color.
Overview
Why this matters
If links are distinguished by color alone, many users cannot reliably detect what is interactive.
How to fix this issue
Add a non-color cue for inline links (typically underline). Keep strong hover/focus indicators. If color alone is the differentiator, ensure at least 3:1 contrast between link text and surrounding text.
Developer Guidance
Use link styling tokens that enforce underlines in body copy by default. Do not depend on theme color alone. Validate states (default, hover, focus, visited) as a complete set.
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>Real-World Implementation
Before
<p>Learn more in our <a href="#">documentation</a>.</p>
<!-- Link is blue, but so is surrounding theme text → indistinguishable for many users -->After
<p>Learn more in our <a href="#" class="link">documentation</a>.</p>
<style>
.link {
text-decoration: underline;
color: var(--link-color);
}
.link:hover,
.link:focus {
text-decoration-thickness: 2px;
outline: 2px solid currentColor;
outline-offset: 2px;
}
</style>CSS Example (Guidance)
/* Recommended base rules for links in text */
a {
color: var(--link-color, #0055cc);
text-decoration: underline;
}
a:hover,
a:focus {
text-decoration-thickness: 2px;
}Manual Testing
- 1. Scan paragraph text and confirm links are identifiable without color perception.
- 2. Validate link states in normal mode and increased-contrast mode.
- 3. If links are color-only, measure text-to-text contrast difference (target 3:1 or better).
- 4. Tab through links and confirm visible focus treatment is obvious.
- 5. Verify styling remains consistent across reused text components.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance