link-in-text-block
Links in text blocks must be distinguishable from surrounding text without relying on color alone
Checks that a link inside a run of text is visually distinguishable from the surrounding text by underline, a font-weight/style difference, or a sufficient (>=3:1) color-contrast difference, not by color alone.
Applies to. Applies to <a href> elements whose immediate parent element also has at least one direct-child text node with non-whitespace content (i.e. the link sits inline within a run of plain text, not as a standalone item, e.g. not the sole content of a <li> nav item).
Expectation. A link inside a text block must be visually distinguishable from the surrounding text by at least one non-color means:
- text-decoration: underline, OR
- a different font-weight than the surrounding text, OR
- a different font-style than the surrounding text, OR
- a contrast ratio of at least 3:1 between the link's text color and the surrounding text's color (WCAG technique G183's threshold, sufficient contrast alone is an accepted alternative to underline).
Fails only when none of the above hold AND the color contrast between link and surrounding text is confidently computable and below 3:1, i.e. color is demonstrably the only cue.
Examples
<p>Read <a href="#" style="text-decoration:underline">this underlined link</a> for more information.</p>
The link is underlined, distinguishing it from surrounding text by more than color.
<p style="color:#222222;">Read <a href="#" style="text-decoration:none; color:#2a2a2a;">this link</a> for more information.</p>
The only difference from surrounding text is a color shift with about 1.1:1 contrast, well under the 3:1 minimum, and no underline or weight/style change.