Links in text need a cue besides color

• Rule: axe/link-in-text-block
• Checks: Links must be distinguishable without relying on color
• WCAG: 1.4.1
• Fix class: design: A fix needs a visual decision.

Who it affects

• People who see some colors weakly or not at all.
• People with low vision, who zoom, magnify or need strong contrast.

How to fix it

A link in a paragraph differs from the text around it only by color

Underline it with text-decoration: underline, or give it another cue that does not rely on color, such as a bottom border. Keep the cue at rest, not only on hover or focus.

The design keeps links in text without underlines

Give each link at least 3:1 contrast with the surrounding text, keep 4.5:1 against the background, and underline it on hover and keyboard focus. An underline at rest is still the more dependable choice: it holds up under forced colors and on touch screens, which have no hover.

axe asks for review because of a background image, a gradient or a ::before or ::after icon

Look at each link against the text around it. It must stand out without its color, such as by an underline or an icon every link carries; if it does not, underline it.

Fixes that fail

Underlining links only on hover

At rest the link is still marked only by color, so people who cannot see the difference, and touch users who cannot hover, cannot find it.

Making the link barely different, such as one step heavier in font weight

axe counts any change in weight, size, style or font as a cue, but a difference people cannot see does not mark the link. Bold used for emphasis elsewhere on the page blurs it further.

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.