Features
Start a free trial

Ensure links are distinguished from surrounding text in a way that does not rely on color

Rule ID: link-in-text-block User Impact: serious Guidelines: WCAG 2.0

Ensure that links within text blocks are identifiable through means other than color alone, aiding users with visual impairments in recognizing interactive elements.

About This Rule

This rule ensures that links within text blocks are distinguishable without relying solely on color, enhancing accessibility for users with visual impairments. Adhering to this guideline aligns with the following standards:

  • WCAG 2.1 (A): 1.4.1 Use of Color
  • WCAG 2.0 (A): 1.4.1 Use of Color
  • WCAG 2.2 (A): 1.4.1 Use of Color
  • Trusted Tester: 13.A
  • EN 301 549: 9.1.4.1 Use of Color

Why It Matters

Relying solely on color to distinguish links can pose challenges for individuals with visual impairments, such as color blindness or low vision. Without additional cues, these users may struggle to identify links, hindering navigation and access to information.

How to Fix

To make links distinguishable:

  • Use Underlines: Apply underlining to link text to provide a clear visual indicator of interactivity.
    Copy code
    <a href="example.html" style="text-decoration: underline;">Example Link</a>
  • Ensure Sufficient Contrast: If using color to differentiate links, maintain a contrast ratio of at least 3:1 between link text and surrounding text. This ensures that users who cannot distinguish between colors can still identify links. :contentReference[oaicite:0]{index=0}
  • Change Style on Hover and Focus: Implement visual changes, such as underline or bold styling, when links receive hover or focus to reinforce their presence.
    Copy code
    a:hover, a:focus {
  text-decoration: underline;
  font-weight: bold;
}
  • Use Distinct Font Styles: Differentiate links by applying unique font styles, such as italics or bold, in addition to color.
    Copy code
    <a href="example.html" style="font-style: italic;">Example Link</a>

Examples

Incorrect

A link distinguished solely by color:

Copy code
<p>Visit our <a href="about.html" style="color: blue;">About Us</a> page for more information.</p>

Correct

A link with an underline and sufficient contrast:

Copy code
<p>Visit our <a href="about.html" style="color: blue; text-decoration: underline;">About Us</a> page for more information.</p>

More Information

Other Rules

Interested in other web accessibility rules? Please see these other rules: