link-in-text-block
Web validation
Inline links inside paragraphs or sentences need a visual cue beyond color, such as an underline or bold text. Color alone is not enough to show that text is a link. People who cannot perceive color differences, or who see low contrast, may miss links that rely on color alone. Give the link a distinct style like an underline, or a 3:1 contrast ratio against the surrounding text plus a clear change on hover and focus.
Pass Patterns
Color plus an underline
The link keeps an underline in addition to color, so it stays distinguishable without relying on color.
<p>
For more information, <a href="/help" style="color: #0000ee; text-decoration: underline;">read the guide</a>.
</p>Bold weight as a non-color cue
The link is bold, a cue that does not depend on color, so it is distinguishable from the surrounding text.
<p>
Visit our <a href="/support" style="font-weight: bold; color: #0055aa;">support page</a> for details.
</p>Fail Patterns
Color difference only
The link removes its underline and differs from the text only by a color below the 3:1 ratio, so it is not distinguishable without color.
<p>
Visit our <a href="/support" style="color: blue; text-decoration: none;">support page</a> for help.
</p>Underlines removed by a stylesheet
A stylesheet strips link underlines, so the inline link is distinguished only by color.
<style>
p a { text-decoration: none; }
</style>
<p>
Visit our <a href="/support" style="color: blue;">support page</a> for help.
</p>WCAG techniques
Sufficient techniques
- G14: Ensuring that information conveyed by color differences is also available in text
- G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover for links or controls where color alone is used to identify them
Advisory techniques
Failure techniques
Try It Yourself
Inspecting the browser dev-tools
- Open the page and right-click the inline link, then choose Inspect.
- Review the link's
text-decoration,font-weight, andcolor. - Compare the computed color of the link text and the surrounding text.
Expected results: The link has a non-color cue, or a color contrast of at least 3:1 with the surrounding text plus a distinct hover and focus style.
Actual results: The link differs from the surrounding text only by a color below 3:1, with no other cue.
Using a color contrast analyzer
- Open a browser extension or online color contrast checker.
- Sample the link text color and the surrounding text color.
- Compare the two colors.
Expected results: The link text has at least a 3:1 contrast ratio with the surrounding text.
Actual results: The ratio is below 3:1 and the link has no other visual cue.
FAQ
How does this issue relate to 1.4.1 Use of Color?
SC 1.4.1 says color must not be the only way to convey information. An inline link needs a second visual cue, such as an underline, or a 3:1 contrast with the surrounding text plus a hover and focus change, so users who cannot perceive color can still find it.
Why is this issue marked as Serious?
When inline links rely only on color, people with low vision or color vision deficiency may not see them as interactive. This makes content harder to navigate and understand, especially on screens with poor contrast, so the impact is significant.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.4.1 Use of Color (A) | Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. |
| EN 301 549 | 9.1.4.1 Use of Color | Same as the WCAG text. |
| Section 508 | 1194.22(c) | Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. |
| 508 Trusted Tester | 1.4.1-color-meaning, 13.A | Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. |