Search topics
Links in body text marked only by colour
Links inside paragraphs have their underline removed, so a colour close to the body text is all that sets them apart.
The problem
People who can't tell the link colour from the text colour can't find the links in a paragraph.
A garden shop's plant page has a care section. One paragraph says to water twice a week, to read the winter care guide before the first frost, and to check the delivery policy before ordering large pots. "Winter care guide" and "delivery policy" are links. The site's stylesheet removes the underline from every link, and the links are drawn in a dark blue. To someone with typical colour vision, on a good screen, the blue words are just visible. To many other readers, the paragraph is one block of dark text with nothing in it to click.
The only thing that marks the two links is their colour. WCAG 1.4.1 says colour must not be the only visual means of conveying information, and "this is a link" is information. The link blue, #285c99, has 6.82:1 against the white page, so the text itself is easy to read. Against the #1a1a1a body text, though, it has only 2.55:1. The difference is almost entirely one of hue, and hue is exactly what a colour vision deficiency takes away.
WCAG's failure technique F73 describes this case: links in running text that are not visually evident without colour vision. Technique G183 sets the alternative: a colour with at least 3:1 against the surrounding text, plus a visual cue such as an underline when the link is hovered or focused.
The same happens to anyone on a washed-out projector, a cheap laptop screen tilted away, or a phone in sunlight, where the blue and the black both fade into the same grey. Links in menus, buttons and cards are not the problem here: their position and shape already say they are links. The failure is in running text, where a link sits among words that look the same.
3 of 10 groups affected
- No vision (not affected)
- Low vision (affected)
- Colour vision (affected)
- No hearing (not affected)
- Hard of hearing (not affected)
- No speech (not affected)
- Motor (not affected)
- Reach, strength (not affected)
- Cognitive (affected)
- Seizures (not affected)
- Without perception of colour To many people with a colour vision deficiency, a mid blue and a near-black look like the same dark grey, so the link is invisible inside the sentence.
- Limited vision People with low contrast sensitivity, or reading at high magnification, see only a few words at a time and get no shape to tell a link from plain text.
- Limited language, cognitive and learning abilities People who find reading hard rely on links standing out to know where they can go next, and miss the ones that don't.
axe flags a link inside a block of text when its colour is less than 3:1 from the text around it and it has no other style that sets it apart. That catches the simplest case, but not every one. It can't tell whether an underline that appears only on hover is there, it often can't decide when the background is an image or a gradient, and it doesn't check visited links. A design generated from a brand palette tends to remove underlines because they look busy, and to keep a link colour that looks distinct on the designer's own screen.
Try it
Find the two links in the paragraph, then point at them or press Tab.
Turn on greyscale to see the paragraph as many people with a colour vision deficiency do. Can you still tell where the links are?
Broken Can you fix this?
Caring for your olive tree
Water twice a week in summer, and read our winter care guide before the first frost. Large pots ship separately, so check the delivery policy before you order.
A recreated demo. The broken version is intentionally inaccessible.
The fix
Mark links in running text with an underline, or with a colour 3:1 from the text plus an underline on hover and focus.
- 1A link in a paragraph needs a cue other than hue that sets it apart from the text around it.
- 2If that cue is lightness alone, it needs 3:1 against the text, and an underline on hover and focus.
- 3Keep the cue on visited links and in forced colors.
body { color: #1a1a1a;}a { color: #285c99; /* 6.82:1 on white, 2.55:1 against the text */ text-decoration: none;}The link is readable, but it is marked by hue alone. Without that hue, it is one more dark word in the sentence.
The underline is a cue that does not depend on colour at all, so the link stands out in greyscale, under every colour vision deficiency, and in forced colors, where the browser keeps it. The offset keeps it clear of descenders, and the thicker line on hover and focus still shows which link is under the pointer or the keyboard. Scoping it to .prose keeps it on links in running text and leaves menus and buttons alone.
Both pass 1.4.1. Use the underline: it marks every link for every reader on any background, takes four lines of CSS and gives up nothing but the look of a clean paragraph. The colour difference is what G183 allows when a design can't keep underlines, but it leaves the link findable only by lightness until someone points at it, and the two ratios it depends on leave little room: with #1a1a1a text, only a narrow band of colours reaches both 3:1 against the text and 4.5:1 against white.
An underline is not the only shape that works. A bottom border, a dotted underline, an icon, or bold text also differ by more than colour. Bold is a weak choice in running text, though, because the same paragraph may use bold for emphasis, and then nothing tells a link from an important word.
Scope the rule to content areas. Navigation menus, buttons, cards and footers with lists of links are recognisable by their layout, and an underline on every one of them adds noise without helping. A rich text component, a CMS body or a Markdown renderer is where the rule belongs, together with table cells and list items inside it.
Visited links need the same cue. If :visited changes the colour, check that colour against the text and the background too, and make sure it doesn't drop the underline.
In forced colors, the browser replaces link colours with the system LinkText colour, which may be very close to the text colour. The underline survives; a colour difference alone may not. Don't set text-decoration-color: transparent to hide an underline that then appears on hover, because it still looks like plain text in every mode.
Fixing this with an AI coding assistant? Get this guide as Markdown
Verify the fix
5 checks.
Test with: Contrast measurement, Mouse, Keyboard, Touch, Forced colors
Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat after the colour tokens or the content styles change.
Limits
This is a starting pattern, not a guarantee for every application. Colour values are examples; measure your own palette against your real text and backgrounds. This guide covers links in running text. Colour used alone elsewhere, such as a red border for an error, a green dot for "in stock" or lines in a chart, fails the same criterion and needs its own cue, such as text or a pattern. Check the complete pages with people who rely on it.
This is a recreated teaching example, not a finding about a named client. The code is a starting pattern: test it in your own product. No completed assistive-technology test is claimed here.
Keep this fixed as your code changes.
Turn guides like this into rules your coding agents and CI follow, then have the result retested with a keyboard and screen readers.