What This Rule Checks
Links embedded within blocks of text must be distinguishable without relying solely on color to convey their presence. Users with color vision deficiencies or other visual impairments may not be able to identify links if they rely only on color differentiation. Links must have additional visual cues, such as underlining, boldness, or a clear contrast, to ensure they stand out from regular text.
Who Is Affected
This issue primarily affects: Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Colorblindness users, who cannot distinguish certain color combinations and need non-color visual cues.
Why This Matters
Users with color vision deficiencies cannot distinguish links from surrounding text when color is the only differentiator. WCAG 1.4.1 (Use of Color) requires an additional visual cue such as underlines, borders, or weight differences.
How to Fix
To ensure links are accessible within text blocks:
- Ensure that links have sufficient contrast between the link text and the surrounding text. Use underlines or bold styles to make links easily distinguishable.
- Avoid relying solely on color to distinguish links from surrounding text.
- Use CSS to underline or otherwise style links differently from the surrounding text.
Code Examples
/* Link distinguished only by color */
a {
color: #1a73e8;
text-decoration: none;
}
/* Users with color blindness cannot identify links */
Copy
/* Link with underline or additional visual cue */
a {
color: #1a73e8;
text-decoration: underline;
}
/* Or use both color and font weight */
a {
color: #1a73e8;
font-weight: 600;
}
a:hover,
a:focus {
text-decoration: underline;
}
Copy
Common Mistakes to Avoid
- Removing underlines from links within paragraphs of text.
- Relying on color alone without ensuring 3:1 contrast between link and body text.
- Using hover-only indicators that keyboard users cannot trigger.
AI Auto-Fix Available
This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.
Tip: Text accessibility includes contrast, spacing, and visual presentation. Users with low vision or cognitive disabilities depend on well-formatted, high-contrast text that can be resized and recolored with user stylesheets.
Related WCAG Criteria
- 1.4.1: Use of Color