Make links in text blocks visually distinguishable

Approximately 8% of men and 0.5% of women have color vision deficiency (red-green being most common). If links are distinguished only by a color like blue or red, these users may not identify them as links and miss critical navigation or reference information. The underline is a universal, color-independent signal understood across cultures and vision abilities. Removing underlines is a common design trend that disproportionately affects users with low vision and cognitive disabilities.

Quick Reference

• Color must not be the only visual means of distinguishing links from surrounding text — WCAG 2.1 SC 1.4.1 (Use of Color)
• Option 1: Underline links (the browser default and most robust approach)
• Option 2: If no underline, the link color must have ≥ 3:1 contrast ratio against surrounding body text AND ≥ 4.5:1 against the background
• Focus and hover states must also maintain distinguishability
• Applies only to links embedded within paragraphs/text blocks; standalone navigation links have different requirements

Check

Find all <a> elements within text-heavy containers (paragraphs, article body, list items containing prose). Check the CSS applied: if text-decoration: none or text-decoration: underline is removed, verify that the link color has at least 3:1 contrast ratio against the surrounding non-link text color AND at least 4.5:1 against the background. Also check :hover and :focus states for a non-color visual change (underline appearing, outline, background change).

Fix

The simplest fix is to restore text-decoration: underline on inline text links within body copy — this is the most widely understood and color-independent link indicator. If the design requires no underline: calculate the contrast between link color and body text color using the WCAG relative luminance formula; it must be ≥ 3:1. Add a non-color visual change on :hover and :focus (e.g., underline appears, font-weight changes, or background-color is added).