As a functional component of a web page, a link should look like a link — and obviously so. On some of our sites, color alone is used to indicate a link, but, according to WCAG 2.0, color isn’t sufficient for a link to be accessible. For general usability, when WCAG are applied, our sites become easier to use for everyone. I’d like to suggest using underlines on links as a best practice.

Links indicated by color alone aren’t accessible.

We need to pass criterion 1.4.1 for WCAG 2.0 compliance:

“Color is an important asset in design of Web content, enhancing its aesthetic appeal, its usability, and its accessibility. However, some users have difficulty perceiving color. People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using text-only, limited-color or monochrome displays and browsers will be unable to access information that is presented only in color.” 1

Non-color visual distinction required

“… avoid situations in which people who cannot perceive color differences cannot identify links (when people with color vision can identify links). Link underlines or some other non-color visual distinction are required …” 4

Underline on hover/focus is still a failure

Having an underline but only on hover is still a failure of criterion 1.4.1.

“Note 3: If the non-color cue only happens when the mouse hovers over the link or when the link receives focus, it is still a failure.” 3

Color is equated to hue: caveat when there’s sufficient contrast

“So red and pink would pass the requirement for “not distinguished by color (hue) alone” since they differ by lightness (which is not color) — as long as the difference in lightness (contrast) is 3:1 or greater.” 3

Although this is offered as a way to comply with criterion 1.4.1, it is not the preferred or recommended way: “While using this technique is sufficient to meet this success criteria, it is not the preferred technique to differentiate link text. … If there are not a large number of links in the block of text, underlines are recommended for links.”

If you use technique, “you also need to provide additional visual cues on focus.” And the color choices you have are very restricted, especially if you want to be AA or AAA compliant since you must combine 3:1 contrast between link and surrounding text with 4.5:1 or 7:1 contrast between text and background.

References