Powered by
Colour & contrast
Links in a Paragraph Are Shown by Colour Alone
When a link inside text differs only by colour, people who can't tell the colours apart can't find the link at all.
link-in-text-blockWCAG 2.0Introduced in WCAG 2.0.Level AA — the minimum. Missing it blocks people outright.
- Status
- SeriousSerious — Significant friction, or information that is lost.CurrentScanners run this rule today.
- Owner
- DesignDevTest
- Audit
- Automated+ManualA scanner finds it; a person confirms the fix.
Why it matters
Many people can't tell some colours apart, such as red and green or blue and purple. Others use high-contrast or greyscale settings. For them, a link that is only a different colour looks like plain text.
They miss the link, and so they miss the help, terms or next step behind it. An underline fixes this for everyone.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Low-vision users (magnification) | They see a paragraph of plain text and can't spot which words are links. | High impact |
| Cognitive and neurodivergent users | Without a clear underline, they may not realise the words can be clicked. | Partial impact |
| Voice control users | They can't say "click" plus a link's name if they can't tell which words are a link. | Partial impact |
| Motor and dexterity | Not directly affected, but they may waste effort hovering to find the link. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | Using colour as the only signal fails WCAG at Level A, the minimum. Complaints under Australia's Disability Discrimination Act and EN 301 549 point to WCAG. | High impact |
| Conversion | Hidden links to sizing guides, terms or help pages mean people get stuck or give up. | Moderate impact |
| SEO | Search engines don't care how links look — no real benefit here. | Low impact |
| Brand trust | About one in twelve men has some colour blindness. Many of your readers will notice. | Moderate impact |
| Cost to fix | Usually one CSS rule in the shared styles. Cheap to fix once. | High impact |
Fixing it in code
Links inside body text
Don't
p a {
color: #1a6fd1;
text-decoration: none;
}Do
p a {
color: #1a6fd1;
text-decoration: underline;
text-underline-offset: 0.15em;
}An underline shows the link without needing to see colour.
Fixing it in design and content
Only underlining on hover
Don't
Links in text have no underline. The underline appears only on hover or focus.
Do
Links in text are underlined all the time. Hover and focus add a further change, such as a thicker underline.
People need to find the link before they hover, not after.
Designer's handoff note
Underline links that sit inside sentences. Links in menus or buttons can rely on their position and shape instead.
If you must drop the underline, the link needs 3:1 contrast with the text around it, plus a non-colour change on hover and focus. An underline is simpler and safer.
Quick test
Tool
Your browser's greyscale view (Chrome DevTools (opens in a new tab) → Rendering → Emulate vision deficiencies → Achromatopsia)
Checklist
- Pass
- You can point to every link because it is underlined or marked another way.
- Fail
- Links blend into the text and you can't tell which words are links.
Check these at the same time
- Text colour is too close to its background colour
color-contrast - A link has no text a screen reader can read
link-name
What a green scan still misses
A scanner checks contrast and styles, but some cases it can't decide and flags for review. Only a person can judge whether a link is easy to spot in the real layout.
Reference
- Rule ID
link-in-text-block- Raised by
- axe-core: “Links must be distinguishable without relying on color”
- WCAG
- 1.4.1 Use of Color (opens in a new tab) · Level A · since WCAG 2.0
- Other standards
- EN 301 549 9.1.4.1 · RGAA 10.6.1
- Last reviewed
- 14 October 2026