# Links in body text marked only by colour Source: https://easeweb.dev/learn/links-in-text Topics: Colour and contrast > Colour is not the only cue (WCAG 1.4.1) The fix: Give links in running text a cue that is not colour. Either keep the underline on them, or make their colour at least 3:1 against the surrounding text and add an underline on hover and focus. The underline works for everyone; the colour difference passes 1.4.1 but leaves links found only by lightness until someone points at them. Test with: contrast measurement, mouse, keyboard, touch, forced colors References: https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html https://www.w3.org/WAI/WCAG22/Techniques/failures/F73 https://www.w3.org/WAI/WCAG22/Techniques/general/G183 https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration 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. ## What happens 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. ## Why it fails 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. ## Who is affected 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. ## What automation and AI miss 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. ## Before: links set apart only by a colour close to the text ```css 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. ## After: an underline on links in running text ```css .prose a { color: #285c99; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } .prose a:hover, .prose a:focus-visible { text-decoration-thickness: 2px; } ``` 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. ## After: a 3:1 colour difference, with an underline on hover and focus ```css body { color: #1a1a1a; } .prose a { color: #1f6fd1; /* 4.94:1 on white, 3.52:1 against the text */ text-decoration: none; } .prose a:hover, .prose a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; } ``` A lighter blue reaches 3:1 against the body text, so the link differs in lightness, not only in hue, and that difference survives greyscale. The underline on hover and focus confirms the link when someone points at it or tabs to it. This holds only while the link colour stays at least 3:1 from the text and 4.5:1 from the background: a darker body text, a tinted panel or a visited colour can break either. Until someone hovers or focuses it, the link is still found by lightness alone, and on a touch screen there is no hover. ## Which option to use 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. ## Implementation decisions 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. ## Verify the fix 1. Turn the page to greyscale, with the browser's rendering tools or the operating system's colour filters, and confirm every link in running text can still be found without hovering. 2. Measure each link colour, and each visited colour, against the body text around it and against the background, and confirm the link has an underline or reaches 3:1 against the text, and reaches 4.5:1 against the background. 3. Hover over each link and Tab to it, and confirm a non-colour cue is shown in both cases. 4. Simulate protanopia, deuteranopia and tritanopia, and confirm the links still stand out, including on a touch screen where there is no hover. 5. Turn on forced colors and confirm the links in running text keep their underline or border. 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.