Link distinguished by colour only (link-in-text-block)

The link-in-text-block rule flags links inside running text that stand out from the words around them by colour alone, and not by enough of it. People who cannot tell the two colours apart cannot find the link. The simplest fix is the oldest one: underline links in text.

What the rule means

WCAG 1.4.1 says colour must not be the only visual means of conveying information – and "this word is a link" is information. The rule looks only at links that sit inside a block of text, such as a paragraph; navigation menus, buttons and links that stand on their own line are not checked.

For each such link, axe passes it if either is true:

  • the link has a non-colour style that the surrounding text does not – an underline, a border, a different font weight, style, size or family, or a background image;
  • the link colour has a contrast of at least 3:1 with the surrounding text colour (or the backgrounds differ by 3:1).

Otherwise it is a violation. Where axe cannot determine the colours – text over a gradient or image, or a link with ::before/::after content – the result is undecided and a person has to look.

Two limits are worth knowing. WCAG's technique for the 3:1 route (G183) also asks for a visual cue on hover and focus; axe checks the resting state only. And a link styled exactly like the text around it passes, because there is no colour difference to measure – yet nobody can find it.

Who is affected

People with colour vision deficiencies, who may see a blue link and dark grey text as the same shade. People with low vision and older people with reduced contrast sensitivity. And everybody reading on a phone in sunlight or on a poorly calibrated screen, where a subtle colour shift disappears.

Why the check fails

  • CSS resets that remove the underline from every link (a { text-decoration: none; }) and add only a colour back.
  • Brand colours chosen for buttons and headings, reused for links in body text where they sit too close to the text colour.
  • Dark grey body text (#333, #444) with a mid-blue link – both pass normal contrast against white, but differ from each other by only about 2:1.
  • Underline only on hover, which does not help anyone who has not already found the link, or anyone on a touch screen.
  • Rich-text editors and CMS themes whose content styles drop the underline for "a cleaner look".

How to fix it

  1. Underline links in running text. It needs no colour maths, works in every theme and is what people expect.
  2. If the design must go without an underline, give the link a colour with at least 3:1 against the text and 4.5:1 against the background, and add an underline or border on hover and focus.
  3. Fix it in the base stylesheet for text content (.prose a, .content a), not link by link.
/* Before – the link differs from the text by colour alone */
.intro   { color: #333333; background: #ffffff; }
.intro a { color: #1a5fb4; text-decoration: none; } /* about 2:1 against the text */
/* After – an underline, so colour is no longer the only cue */
.intro   { color: #333333; background: #ffffff; }
.intro a { color: #1a5fb4; text-decoration: underline; text-underline-offset: 0.15em; }

If you remove the underline anyway, bring it back where it matters most:

.intro a:hover, .intro a:focus-visible { text-decoration: underline; }

How to test it manually

  1. Read a text-heavy page and ask: can I see every link without hovering over it?
  2. Switch the page to greyscale – in Chrome or Edge developer tools, open Rendering and emulate "achromatopsia". Links that vanish into the text fail.
  3. Where there is no underline, measure the link colour against the text colour with the free Colour Contrast Analyser: at least 3:1.
  4. Tab through the text and hover over each link: is there a change other than colour – an underline or outline?

1.4.1 Use of Color, Level A. Related: 1.4.3 Contrast (Minimum), which the link text itself still has to meet against its background, and 2.4.7 Focus Visible for the focus cue on links.

How Reviseberg reports it

Reviseberg runs link-in-text-block on every crawled page at 1280px. The issue list shows the rule with its severity, WCAG criterion and level, the number of links and pages affected, and the points you get back by fixing it. The cause is nearly always one line in a shared stylesheet, so a single change can clear every page; the detail view gives the CSS selector, the HTML snippet and each affected page.

Links whose colours axe cannot resolve go to the Potential issues queue for a person to decide, and are not counted as passes. Findings can be marked "ignore", "can't fix" or "false positive" with a reason; every decision is logged. Because colour use is something only a person can fully judge, 1.4.1 with no findings stays "untested" in the WCAG coverage view until somebody records a manual result – a clean run of this rule is not a pass.

Find colour-only links across your site – get a free scan

Frequently asked questions

Do links in navigation menus need an underline?

No. The rule only checks links inside running text. In a menu, the position and layout already say "these are links".

Is a 3:1 contrast between link and text enough on its own?

axe accepts it. WCAG's technique G183 also asks for a non-colour cue – usually an underline – on hover and focus, which axe does not test. An underline in the resting state avoids the question.

Does bold text count instead of an underline?

For the rule, yes – a different font weight is a non-colour cue. Readers may take bold for emphasis rather than a link, though, so an underline is clearer.

Why does a link in the same colour as the text pass?

Because there is no colour difference for the rule to measure. The link is still invisible to everybody, so check for this by eye.

Sources

  1. W3C, Understanding SC 1.4.1 Use of Color – https://www.w3.org/WAI/WCAG22/Understanding/use-of-color
  2. Deque University, axe-core 4.13 rule link-in-text-block – https://dequeuniversity.com/rules/axe/4.13/link-in-text-block
  3. W3C, WCAG Technique G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover and focus – https://www.w3.org/WAI/WCAG22/Techniques/general/G183
  4. W3C, WCAG Failure F73: links not visually evident without colour vision – https://www.w3.org/WAI/WCAG22/Techniques/failures/F73

See what a scan finds on your site

One page in about thirty seconds, no email needed. The full report covers up to 100 pages and a keyboard journey.