Distinguish links from surrounding text, not color alone

Links in text must be distinguishable without relying on color alone

Links inside paragraphs must not be identified by color alone. Provide a non-color cue (for example, an underline) or ensure a 3:1 color difference from surrounding text plus clear focus/hover styling.

This issue appears in articles, product descriptions, and any block of text. It affects people with color-vision deficiencies, low vision, and many users on low-contrast displays.

Why It Matters

If a link looks like regular text, people miss navigation paths and key actions. Users with color-vision deficiencies may not perceive the color change at all.

Low-vision users and readers on dim screens struggle when the link color is too close to the text color. Missed links harm findability, increase task time, and can block conversions.

Common Causes

• Removing underlines from links in paragraphs without adding another visual cue
• Choosing a link color too similar to body text color
• Relying on hover color only (no benefit for touch users and not discoverable)
• Inconsistent focus styles or invisible focus indicators
• Global CSS that overrides link styles inside rich-text areas

How to Fix

1. Prefer a persistent non-color cue in text blocks:
   • Underline links inside paragraphs by default. This is the simplest, most robust solution.
2. If you do not underline by default, meet both of these:
   • Provide at least a 3:1 contrast ratio between the link text color and the surrounding non-link text color in that paragraph (recommendation aligned with WCAG techniques).
   • Add a clear non-color change on focus and hover (for example, underline appears, border, or font style change). Do not rely on color change only.
3. Maintain sufficient contrast against the background:
   • Body text and link text must each meet text contrast requirements against the background (commonly 4.5:1 for normal text). This is separate from the 3:1 link-vs-text requirement.
4. Ensure visible focus for keyboard users:
   • Use :focus or :focus-visible to add an outline or underline. The focus indicator must be clearly visible and not clipped.
5. Apply styles consistently in content editors and components:
   • Audit global CSS, typography systems, and CMS content blocks so links render consistently.

How to Test

Keyboard check:

• Tab through a page with paragraphs. Each link receives a visible focus indicator (underline, outline, or other non-color cue). Focus never disappears.

Screen reader check:

• With a screen reader, navigate by links and read through paragraphs. Ensure link text is meaningful in context and that links are discoverable in the reading order.

Mobile/touch check:

• On a phone or tablet, confirm links are clearly distinguishable without hover. Tapping places focus and shows a visible style change.

Visual/contrast check:

• In paragraphs, ensure either a persistent underline or verify link color vs surrounding text color is at least 3:1. Also verify link and body text each meet contrast against the background.

Good Example

<p class="copy">For setup help, visit our <a class="text-link" href="/docs">documentation</a> and follow the steps.</p>

<style>
.copy { color: #2b2b2b; font: 16px1.6 system-ui, sans-serif; }
.text-link { color: #0a58ca; text-decoration: underline; }
.text-link:focus-visible { outline: 2px solid #0a58ca; outline-offset: 2px; }
.text-link:hover { text-decoration-thickness: 2px; }
</style>

Why this works:

• Underline provides a non-color cue at all times.
• Focus is clearly visible for keyboard users.
• Link color and body text color also have strong contrast against the background.

Bad Example

<p class="copy">Read our <a class="link-plain" href="/policy">policy</a> for details.</p>

<style>
.copy { color: #3a3a3a; font: 16px1.6 system-ui, sans-serif; }
.link-plain { color: #4a4a4a; text-decoration: none; }
.link-plain:hover { color: #5a5a5a; }
.link-plain:focus { outline: none; }
</style>

What’s wrong:

• No underline or other non-color cue in the paragraph.
• Link color is too close to body text; the difference is hard to see.
• Hover-only cue does not help touch users; no visible focus for keyboard users.

Quick Checklist

• In paragraphs, do not rely on color alone to indicate links
• Prefer default underlines for links in running text
• If not underlined, ensure ≥ 3:1 color difference vs surrounding text AND add non-color hover/focus cues
• Maintain required contrast for both body text and links against the background
• Provide a visible focus indicator (:focus or :focus-visible)
• Keep styles consistent across components and CMS content
• Test with keyboard, on mobile, and with a contrast checker