← All rules

Colour and contrast

Links in text need more than colour

• Rule: link-in-text-block
• Severity: Serious
• WCAG level A

Why it matters

Roughly one man in twelve has a colour vision deficiency. If a link inside a paragraph differs from the surrounding text by colour alone, it is invisible to them.

How to fix it

1. Underline links inside body text, at least on the default state.
2. Or raise the contrast between link and surrounding text to 3:1 and add a non-colour cue on hover and focus.
3. Keep whatever cue you choose visible without hovering — hover does not exist on touch.

In markup

a { color: #4a7dff; text-decoration: none; } /* colour only */

a { color: #4a7dff; text-decoration: underline; }

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

• 1.4.1 Use of Color (opens in new tab) — WCAG level A

Further reading

Deque University on link-in-text-block (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.