Colour Rule

Links in body text must not rely on colour alone link-in-text-block

When a link sits inside a paragraph, colour is often the only thing that marks it out. Someone who cannot tell that colour from the text colour sees ordinary words and never finds the link. Underline links in body text, or give them some other visible difference that does not depend on colour.

WCAG 2.2 A 1.4.1 Use of Color

Websight reports this as Links must be distinguishable without relying on color

Who it affects

A resident with red-green colour blindness reading the parish council minutes misses the link to the planning application, because the blue link and the dark grey text look the same to him.

Someone reading on a monochrome e-ink screen, or with a high contrast mode on sees every word in one colour, so the links vanish.

Someone with low vision cannot see a small shift in hue, but can see an underline.

Broken versus fixed

Both examples are live and rendered in a sandboxed frame. The broken one is deliberately broken.

Broken

Link colour #1a73e8 against text colour #333333 measures 2.8 to 1, under the 3 to 1 the scanner looks for, and there is no underline. Many readers see one grey paragraph.

Fixed

The underline marks the link for everyone, whatever colours they can see. The colours did not need to change.

Show the markup behind both examples
Broken
<style>body{font-family:Georgia,serif;margin:0;padding:16px;background:#fff;color:#333;line-height:1.5;font-size:16px}a{color:#1a73e8;text-decoration:none}</style>
<p>Councillors considered <a href="#app-24-0412">planning application 24/0412</a> for the extension at Mill Lane and resolved to object on the grounds of overlooking. The clerk will respond to the district council by <a href="#deadline">12 November</a>.</p>
Fixed
<style>body{font-family:Georgia,serif;margin:0;padding:16px;background:#fff;color:#333;line-height:1.5;font-size:16px}a{color:#1a73e8;text-decoration:underline;text-underline-offset:2px}</style>
<p>Councillors considered <a href="#app-24-0412">planning application 24/0412</a> for the extension at Mill Lane and resolved to object on the grounds of overlooking. The clerk will respond to the district council by <a href="#deadline">12 November</a>.</p>

Test it by hand in two minutes

  1. Find a paragraph with a link in it and view it in greyscale. On a Mac: System Settings, Accessibility, Display, Colour Filters, Greyscale. On Windows: Settings, Accessibility, Colour filters.
  2. If you cannot pick the link out in greyscale, it relies on colour.
  3. Hover the link. A cue that only appears on hover does not help someone who has not found the link yet.
  4. Right click the link, choose Inspect, and look at text-decoration in the Styles panel. If it is none, the link needs another cue.

The fix

Before
p a { color: #1a73e8; text-decoration: none; }
After
p a { color: #1a73e8; text-decoration: underline; }

The underline is the cue everyone already understands. Thin it with text-decoration-thickness and move it down with text-underline-offset if the default looks heavy.

Border instead of underline

Before
p a { text-decoration: none; }
After
p a { text-decoration: none; border-bottom: 1px solid currentColor; }

A bottom border reads as an underline and gives more control over thickness and gap. Keep it on all the time, not only on hover.

Why not just change the colour

Before
p { color: #333333; } p a { color: #1a73e8; }
After
p { color: #333333; } p a { color: #1a73e8; text-decoration: underline; }

A blue that reaches 3 to 1 against #333333 ends up too light to reach 4.5 to 1 against white, so with dark body text there is no colour-only answer. The underline is the way out.

Common mistakes

  • Removing underlines site-wide for a cleaner look and adding them back only on hover.
  • Choosing a link blue that is a little different from the text colour and assuming that is enough.
  • Making links bold while also using bold for emphasis, so the two cannot be told apart.
  • Underlining words that are not links, which teaches readers to ignore underlines.

WCAG criteria this rule maps to

axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:

The scanner looks at links inside blocks of text that have no underline or other style difference and measures the contrast between the link colour and the surrounding text, flagging anything under 3 to 1. It does not check links in menus or lists, and it cannot judge whether a non-colour cue is obvious enough to a reader. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.

AA Text must have enough contrast with its background color-contrast Text needs enough difference in brightness from its background to be readable by people with low vision, or by anyone on a dim screen. A Links must have text a screen reader can announce link-name Every link needs text that a screen reader can announce and a voice control user can say.

Scan your own page for this and 63 other checks

Open any page in Chrome, click Websight, and get a score out of 100 with every issue explained and a draft fix snippet per element.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.