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

Tags: links, user experience, ux