Jump to Content

Posts Tagged ‘links’

Accessibility of Links

March 1st, 2010 by Steve | 7 Comments | Filed in Accessibility Thoughts

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
  • Share This Post:
      Twitter Facebook Digg del.icio.us StumbleUpon Google Bookmarks Technorati LinkedIn Design Float Diigo FriendFeed Ping.fm Yahoo! Bookmarks

    Tags: , ,