Alternative link style method for high link-density content (addition to Guideline 1.4 – Adjustable text style)

[hata6502]

Background

The standard link style is a solid underline.
However, WCAG 2 G183 states:

“If there are not a large number of links in the block of text, underlines are recommended for links in blocks of text.”

This implies that when there is a large number of links — such as on wiki pages or glossaries — a different, less visually distracting approach may be acceptable.

On the other hand, G182 provides various examples of non-underlined link styles such as blue bold text or red italic text, but these may not be reliably recognized as links by users.
Because most users’ experience still associates links with some form of underline, purely color- or font-based cues can reduce discoverability.

Therefore, I propose introducing an alternative, accessible link style — for example, a dotted underline — that remains recognizable as a link while reducing visual clutter in high link-density content.

Proposal

This is an additional proposal to Guideline 1.4 – Adjustable text style.

While the current draft focuses on font size, line height, and spacing,
this Method extends the concept to link text decoration, showing how authors can adjust visual presentation (e.g., using dotted underlines or subtle visual cues) to maintain link perceivability while improving overall readability.

Example: Use text-decoration-style: dotted instead of a solid underline to reduce clutter.
dotted-underline-link-example.html

References

• WCAG 3 Guideline 1.4
• WCAG 2.2 Techniques G182 / G183

[TestPartners]

I would not recommend using a dotted outline because my tests show that the dots get massively anti-aliased in Firefox unless they are at least 3px wide. This results in a far lower colour contrast that the hex values would imply. The anti-aliasing is different in each browser, but I believe Firefox may be the worst.

For the measurement of text contrast, WCAG states that the hex colours must be used rather than the rendered colours. This is reasonable because the anti-aliasing may be affected by various factors on a user's machine and it may even be turned off. However, none of this is the case with the anti-aliasing of the dotted outline - it is always enabled and the only variable is the browser.

The anti-aliasing did not happen with dashed outlines, so they would be my recommendation. I did those tests 4 years ago, so it's worth doing them with the current browser versions.

[hata6502]

Thank you very much for sharing test results and insights.
I agree that the anti-aliasing behavior of dotted decorations, especially in Firefox, can significantly affect apparent contrast.

In my recent tests on macOS 15.6 Retina display (Chrome / Safari / Firefox), did not show the blur:

color: #4d6bd5;
text-decoration-style: dotted;
text-decoration-thickness: 1px;

• Chrome
  • 
• Safari
  • 
• Firefox
  • 

But I suspect this difference may be related to device pixel ratio or OS or browser version.
For robustness, dashed underlines might be a recommended fallback.

[hata6502]

That said, I still consider dotted underlines useful as a secondary for contexts where the link text already meets the 3:1 lightness contrast requirement.

https://www.w3.org/WAI/WCAG22/Understanding/use-of-color

Note If content is conveyed through the use of colors that differ not only in their hue, but that also have a significant difference in lightness, then this counts as an additional visual distinction, as long as the difference in relative luminance between the colors leads to a contrast ratio of 3:1 or greater. For example, a light green and a dark red differ both by color (hue) and by lightness, so they would pass if the contrast ratio is at least 3:1. Similarly, if content is distinguished by inverting an element's foreground and background colors, this would pass (again, assuming that the foreground and background colors have a sufficient contrast).

https://www.w3.org/WAI/WCAG22/Techniques/general/G183.html

While using this technique is sufficient to meet this success criterion, it is not the preferred technique to differentiate link text. This is because links that use the relative luminance of color alone may not be obvious to people with low vision. If there are not a large number of links in the block of text, underlines are recommended for links in blocks of text.

Therefore does not rely solely on the line for recognizability.
The dotted underline serves to subtly indicate link without strong visual weight.