Give links distinguishable visual cues

Applicable Role(s): Developer

Overview

Picking out links from a block of text can be challenging for users with low vision or color vision disabilities, if color is the only way to tell the difference. Providing additional cues like underlines or backgrounds can make it easier to find links without needing color alone.

Best Practices

Links should be underlined

Browsers by default underline their links because that allows users to easily tell which content can be clicked and which content can't. We maintain this convention in our themes for links within blocks of text.

Most sites at Western do not have this style applied in the navigation, though, as a user would expect to find links in a navigation.

If there is no other affordance that it is a link (i.e. an underline), links must also have 3:1 contrast if they introduce an indicator like an underline on focus/hover. Use the Contrast Triangle tool to ensure non-underlined links meet color contrast.

Links need hover and focus styles

Hover and focus styles help users know which link they are about to click, regardless of whether they use a mouse, a keyboard, or assistive device to navigate.

Ideally, the hover and focus styles are fairly similar or completely match so the experience is consistent for a variety of users. Focus should especially have a distinguishing style, like a dotted outline or an inverse color change (i.e. the background/foreground styles are swapped).

Hover and focus states also must meet the color contrast guide.

Pattern Examples

Link with Underline and Default Hover/Focus

Link to accessibility guide.

Button style link, with hover/focus styles

Accessibility guide

Link without underline

Web Content Accessibility Guidelines (WCAG) 2.1 is the current baseline W3C Recommendation for developing accessible web content based on four principles.

The green WCAG link in the previous paragraph has enough contrast with the black paragraph text at a large enough font to be distinguishable, and not need an underline.

This example only works if the font is larger than 18px and on this gray background or lighter (this will fail if dark mode is turned on in the site).

In the default Western theme, links need underlines since the blues used do not have enough contrast against the surrounding black text.