a11yTips

Make links easier to distinguish when color alone identifies them

Make sure links identified by color alone can be easily distinguished in another way

Links identified by color alone are quickly becoming the norm on a lot of websites, where authors tend to dislike when underlined links span on multiple words. As a consequence, whenever links are only identified by a different color, people that are colorblind or have low vision become at a risk of missing them altogether, because they don’t stand out enough against their surrounding text. This is especially true when links are much shorter, limited to a single word and scattered across the text. In order to make links more easily distinguishable, authors need to provide additional cues on mouse hover and keyboard focus, so that users who may have difficulties perceiving color differences or have low vision can still easily identify them.

To do so, simply make sure that link text always has a color contrast ratio of at least 3 to 1 with its surrounding text. Furthermore, always provide additional visual cues on hover or focus, so these links stand out more clearly against their surrounding content. Additional visual cues obviously can include regular underlining, but any other visual cue, such as changing the link’s font weight or its background color can be beneficial as long as it helps identify the link for what it is, in addition to a sufficiently contrasted color. Whenever authors want their links in a page to be displayed without underlines by default, providing both a high enough contrast ratio and additional cues on hover and focus should be the bare minimum to make these hyperlinks accessible.

User Story

As a user who is colorblind or has low vision, I want hyperlinks to rely on color combinations that are distinctive enough and are also supported by other visual cues when acted upon, so that I can easily perceive them in the page.

Simple Code Example

Not Applicable

Testing Methodology

Using the Color Contrast Check tool, locate all instances where color alone is used to convey information about text and check that the color of the text differs from its surrounding text color by a contrast ratio of at least 3 to 1. Verify that both pointing to the link with the mouse and setting focus to it with the keyboard also causes a visual enhancement.

Specification Details