Accessibility of Links

Recently, I was reviewing a couple web sites for accessibility recommendations and noticed something that’s starting to become a pet peeve.

Links were only identifiable by being a different color from the content around them. They weren’t bolded or underlined. A link was, for example, blue, amidst copy that was black.

This can cause significant problems for those with certain types of color blindness or vision limitations that prevent them from seeing certain colors. If you take color out of the equation, there is absolutely no way to visually identify which parts of these pages are links.

I think it can be confusing even for people with full vision, especially if the same color chosen for links is also used for other stylistic reasons.

It seemed like it was fashionable in the design world a few years ago to get away from the tried-and-true underlining of links. Even today there’s a fair number of sites who just have links as a different color.

If you’re dead set against using underlines for whatever design reason, at least make links a different color AND bolded so there’s differentiation between the rest of the content. Just make sure you don’t use bold for other, non-linking elements then.

It’s a time-honored expectation for links to be underlined on the Web — except in very few cases, I don’t think keeping it that way messes up too many awesome designs.

Some Tools For Testing Color:

  • VisCheck – test your web site’s colors against three different kinds of color blindness: deuteranope, protanope and tritanope
  • GrayBit – test your site’s accessibility by converting it to grayscale
  • Luminosity Colour Contrast Ratio Analyser at Juicy Studio – test the contrast between two different colors against WCAG 2.0 guidelines
  • 9 thoughts on “Accessibility of Links

    1. Joe Dolson

      This is an important thing to point out — but I’d also like to point out that having a color change only in :hover or :focus states is an equivalent problem; for keyboard navigability or for low vision, it’s very valuable for links to change in some explicit way when they are focused on (removal of underline, etc.)

      Thanks for your article!

    2. Pingback: GrindSmart » Blog Archive » Best Resources and Practices for Web Accessibility

    3. Pingback: Link Roundup including CSUN – March 2010 « The BAT Channel

    4. Pingback: Link Roundup including CSUN – March 2010 « AccessTech News

    5. Paul

      I accept your reasoning. However one of the reasons for not underlining is that it disrupts the readability of text, this is because the bottoms of letters contain more information than the tops plus you have descenders that are struck through by the underlining. The underlining of the spaces, reduces the definition of the words.

      Underlining also is a dated technique for highlighting words that most probably dates back to the need to highlight hand written words and was later carried over to the computer age when all you had was a green text screen and no colour.

      I agree that other techniques should be used as an alternative.
      If a site has a feature to increase the size of the text, could there also be an option to add underlining or bold fonts for links?

    6. Pingback: Link Roundup including CSUN – March 2010 | Web Axe

    7. Pingback: Keep the Underline | Web Axe

    Leave a Reply

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