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.
Why this matters and how to fix it
Why this matters
Users must be able to identify what is clickable without relying on color alone. Relying solely on color excludes users with low vision, color blindness, different display settings, or high contrast modes. If inline links look like plain text, users may miss important navigation.
How to fix this issue
Ensure that inline links stand out from surrounding text using at least one non-color cue, such as underline, bold weight, icon indicator, or hover/focus style changes. If color is used as the only difference, the contrast ratio between link text and surrounding text must be at least 3:1.
Developer guidance
Never remove link underlines in body text. If your design system requires minimal styling, use consistent and recognizable link styling across the site. On hover and keyboard focus, ensure the link becomes even more visually distinct (e.g., underline or color + outline).
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 Examples
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 transparent;
}
</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. View the page in normal and high contrast mode (Windows High Contrast or macOS Increase Contrast).
- 2. Look for inline links inside paragraphs or article text.
- 3. Check whether links are identifiable without relying on color alone:
- • Expected: Links are underlined, bold, or otherwise visually distinct.
- • Failure: Links look like plain text except for color.
- 4. Use a color contrast checker (e.g., GetWCAG Color Contrast Tool):
- • If color alone is used, confirm link text has at least 3:1 contrast difference from body text.
- 5. Use keyboard Tab navigation:
- • Expected: Focused links show a visible focus indicator (underline thickness, outline, or highlight).
Trusted by organizations across Europe working toward WCAG and EAA conformance