Don’t distinguish links by color alone

Rule use-of-color · Color & contrast · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A link sitting inside a block of text that removes its underline relies on color alone to tell users it is a link. People who cannot perceive the color difference (low vision, color blindness) will miss it. Color must not be the only visual cue — any other visible distinction (kept underline, border, background, bold, italic, or an inline icon in the link) satisfies 1.4.1.

How to fix#

Keep the underline on in-text links, or add another non-color indicator (bold, italic, an icon, a border). Reserve underline-removal for navigation/areas where links are obvious.

Example#

<p>Read <a href="/x" style="text-decoration:none;color:#06f">the docs</a> first.</p>

<p>Read <a href="/x">the docs</a> first.</p>

Example#

<p>See <a href="/y" style="text-decoration:none">our terms</a> before continuing.</p>

<p>Read <a href="/x" style="text-decoration:none;border-bottom:1px solid #06f">the docs</a> first.</p>

Example#

<p>Read <a href="/help" style="text-decoration:none">the help pages</a> for details.</p>

<p>Read <a href="/help" style="text-decoration:none">the help pages <svg class="icon" viewBox="0 0 8 8" aria-hidden="true"><path d="M1 7L7 1M3 1h4v4"/></svg></a> for details.</p>

An inline icon inside the link (or a distinct font-style such as italic) is a visible non-color cue, so the removed underline is acceptable.

WCAG success criteria#

1.4.1 Use of Color — Level A#

Color must not be the only way information is conveyed (e.g. links need more than color to stand out).

Understanding 1.4.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Section 508 Trusted Tester

References#

• WCAG — Use of Color