• Success Criterion 1.4.1
  • Conformance level A
  • W3C reference F73

In-Text Links Distinguishable From Body Text Only by Color

1.4.1 — Use of Color

Scenario

Setting

A project-management tool's task board

What’s wrong

Links inside paragraphs look identical to normal text except for color — colorblind users can't tell what's clickable.

Example 

a { color: #2563eb; text-decoration: none; }
/* paragraph text is #111827; links only differ by color, no underline, no weight change */

Why it matters

A teammate scanning a task description can't spot which words link to a related ticket, so they miss context before starting work.

How to test

View the page in grayscale (Chrome DevTools > Rendering > Emulate vision deficiencies): if in-text links become indistinguishable from surrounding text, it fails.

How to fix

Keep the underline (or another non-color cue like a different weight) on inline links at all times, not just on hover.

a { color: #2563eb; text-decoration: underline; }

Outcome

A colorblind teammate spots the linked ticket reference at a glance and opens it without hunting through the paragraph.

Who is affected

Colorblind users, especially those with red-green deficiencies, who cannot distinguish the link color from surrounding text.

Learn more

Related scenarios