Non-color visual distinction for links as a Best Practice

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 (Web Content Accessibility Guidelines), 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 and here’s why:

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 is 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 …” 2

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.” 4

However, a ratio of 3:1 is lower than we’d like—that’s only A level compliance. We should be striving for AAA compliance in whatever we can and for AA compliance overall. For AA, contrast should be 4.5:1, and AAA is 7:1. (Jonathan Snook’s Colour Contrast Check is useful for this.)

Conclusion

I’m suggesting underlines since it’s the most familiar and well-known non-color visual distinction but we should be open to other options. Hoping this sparks some conversation and yields a great solution we can start to implement as soon as possible.

References

  1. Use of Color: Understanding SC 1.4.1
  2. How to Meet 1.4.1 (Use of Color)
  3. G182: Ensuring that additional visual cues are available when text color differences are used to convey information
  4. Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision
  5. Government Accessibility Standards and WCAG 2.0
  6. WebAIM’s WCAG 2.0 Checklist

Leave a Reply

Your email address will not be published. Required fields are marked *