Links cannot be distinguished from body text by color alone
Aliases: inline underline · link affordance · color-only links
What it is
If an inline link differs from surrounding copy only by hue — no underline, no weight, no icon — finding links becomes a search for a color. When color vision differs, the display tints, or the page prints gray, the link sinks into the paragraph. Links must be findable by a feature other than color. That is not the same question as whether the link text contrasts with its background: that pair is glyph versus ground; this pair is glyph versus neighboring glyphs.
Why it happens
Spotting links in a paragraph is visual search. If the only feature is hue, the search key vanishes when color vision or the display changes. An underline is spatial (a high-frequency horizontal structure) and survives gray, monochrome, and color-vision difference. Relying on “link blue is a bit darker than body gray” also needs that luminance gap to be stable. Many “quiet” styles make links a slightly bluish gray; the luminance gap is thin, and when hue collapses nothing remains.
An underline that appears only on hover locks discoverability behind a pointer: keyboard users see it after Tab, touch has no hover, and people scanning will not brush every word. Visited versus unvisited by hue alone is the same defect in a second costume. Nav bars, buttons, and whole clickable cards already have a component shape that says “this is an entry”; they do not each need an underline. This leaf is inline links running inside sentences.
Studying it
Strip color and count how many links in a paragraph can still be found. Compare underline, color only, and hover-only underline. Measure contrast between link color and adjacent body color (not link versus background).
Independent variables: visual cue (hue only / underline / weight / hover-only), link-to-body contrast. Dependent variables: links found, misses, times body is taken for a link or the reverse.
Walk a passage with several inline links keyboard-only and see whether people can predict what is clickable before focus arrives.
Where it stops holding
Buttons, menu items, and card entries already have control chrome and need no extra underline. Site navigation that is entirely a list of links already has bullets or placement as a cue. Dense underlines in legal prose can hinder reading; added weight plus a stable link-to-body contrast can substitute, but the links must still be findable in gray. A “click here” placeholder can be underlined and still fail as a name — that is a different quality problem.
Applying it
- Underline inline links by default (or give an equally stable non-color feature). Do not treat “no underline” as the brand default.
- Do not use a hover-only underline as the only cue.
- If visited state must differ, add a second feature (dashed underline, a small mark). Do not only swap hue.
- Verify: print a paragraph in gray, circle every link, compare with
ain the DOM. Misses get a non-color feature. Hide the mouse and read the same passage from the keyboard; links must remain visible in the body without hover.