A: Links must be distinguishable from the surrounding text (WCAG 1.4.1)
link-in-text-block
This means
Links within text paragraphs must not be recognizable solely by their color. They must also stand out visually, for example by being underlined, marked with a symbol, or clearly formatted. This is the only way that users with impaired vision or color blindness can reliably identify links.
Impact
If links are identified solely by color, many people cannot distinguish them from normal text. This leads to orientation difficulties, reduces usability, and violates WCAG 1.4.1 (A) Use of Color. Users with color blindness or contrast problems are particularly affected.
Recommendation
- Links should differ from the body text not only in color but also in style.
- Use permanent underlining or an additional symbol (e.g., an arrow or icon).
- Do not remove underlining using CSS (e.g., text-decoration: none;).
- If you rely on color, ensure a contrast ratio of at least 3:1 between the link and text color and additional highlighting on hover or focus.
Examples
Problematic:
<p>Further information can be found in our <a href="/guide" style="color:#2563eb; text-decoration:none;">guide</a>.</p>
For more information, see our guide.
The link is only color-coded. Users with color blindness cannot see the difference.
Better:
<p>For more information, see our <a href="/guide" style="color:#2563eb; text-decoration:underline;">guide</a>.</p>
Further information can be found in our guide.
The link is also underlined, making it recognizable even for people with color vision deficiency.
Alternatively:
<p>Further information can be found in our <a href="/guide" style="color:#2563eb; text-decoration:underline;">guide ↗</a>.</p>
Further information can be found in our guide ↗.
A symbol or icon can also improve visual recognition.
Note
Accessibility here means not only visible contrast, but also redundancy of information: Color should never be the only distinguishing feature. Also pay attention to focus and hover states to highlight links when using a keyboard.
Related WCAG criterion:
WCAG 1.4.1 – Use of Color