Check Your Link Colors - You May Need to Redecorate!

This tip has moved to its new home:

Even if your blog is mostly a personal journal, chances are you include some links. You see something online and think "Hey, my readers might be interested in that." It may be the latest sports scores, information about the federal budget, or the website for the restaurant you're reviewing. Links allow bloggers to participate in conversations, highlight resources, or show off their knowledge of what's new and hot.

But are you sure your readers can see your links?

What's the problem?

If your links are only designated by using a different color than your text, and you're using certain color combinations, people who have trouble distinguishing colors may not be able to tell what's a link.

The first group this affects is people who are color blind. "Color blind" is a bit of a misnomer, of course. Color vision deficiency would probably be a better term. Most people who have color blindness don't see in black, white, and grey. They just don't see the full spectrum of colors the way most people do.

Most common is red-green color blindness, which means the person sees green and red differently and can't always tell them apart. Roughly 8% of men and 0.5% of women are affected with red-green color blindness to some degree. These folks are in trouble particularly with combinations of red, green, and black or grey.

Mark Pilgrim offers a visual demonstration in Dive Into Accessibility Day 12: Using Color Safely. First, a set of links:

Pilgrim explains:

As shown, the link in the first sentence uses the default scheme, and displays blue/purple and underlined in visual browsers. The second link has two forms of text decoration applied, and displays bold and red (but not underlined). The third link has only one form of text decoration applied, and displays only as red.

So far, so good. However, here is the set of links again as seen by someone who has trouble distinguishing red:

Pilgrim explains, using a hypothetical man named Michael as an example of what happens:

As shown, the first link is still visible; Michael's colorblindness is not affected by the color blue. In the second sentence, the redness of the link fades, almost to black, but the link still appears bold, so Michael can still distinguish it. The problem occurs in the third link, which was previously only distinguished by its redness; now that the redness has faded to black, it is virtually impossible to tell which word is a link and which words are normal text."

Oops.

It's not just people who were born with color blindness who benefit from links that are easy to distinguish from text. Elders may also have difficulty distinguishing colors. And when colors are too close, even people with regular color vision may have a hard time telling them apart. Can you easily see the difference between dark blue and black text? Dark grey and black? Red and dark orange?

In general, it's just a good idea to make links look like links, and nothing else look the same. If you've ever run into a site that has blue and underlined text that isn't a link, you understand the frustration it can cause when your assumptions about how the web works are turned upside down.

How do I check my blog?

If your links are only differentiated by color, a basic test would be to ask ten other people if they can easily tell what's a link on your blog. For a more technical solution, Colorblind Web Page Filter lets you plug in your website and see what it would look like to someone who has a deficiency in their color vision. You can choose from one of three types of color deficiency. You can also try out Vischeck for a similar effect. If your color vision is normal and you can't tell the difference between your text and links, your blog may have a problem.

What if I want to make changes?

You have two basic options for making your links easier to distinguish: change color, or add decoration. If your current color combination of text and links isn't working, you may just want to choose another combination. If you like your colors just fine, you can add underlining, bold, or some other decoration to links to help visitors find them.

Your options will depend on what type of blogging software you use.

Some blogging tools don't offer the option to make changes:

If you have a basic TypePad account or Vox account, you don't have any direct control over specific elements in your template. The available themes and styles for these blogging tools seem to have all links underlined by default, though, so the color combination isn't as important.
On WordPress.com, you also can't edit your template. Unfortunately, many of the available themes use risky color combinations and do not decorate their links in any way. Green links with either black text or dark grey text, dark blue links with dark grey text, red links with black text, and light orange links with dark red text are just a few of the combinations that may cause problems even for people with normal color vision. Your only option is to switch templates, which you may not want to do.

Some tools allow for some customization without having to roll up your sleeves and edit your template or style sheet directly:

If you have a TypePad Plus or Pro account and you are using a custom theme, you can choose your link colors and either bold or underline. The instructions included in the TypePad help files under "Configuring a Custom Theme" will show you how.
If you have a basic LiveJournal account and you're using the S1 style system, you can easily specify the colors of your links under Journal Display > Look and Feel > Theme. Switch from "Default Theme" to "Custom Colors." If you're using the S2 style system, you can specify these colors under Journal Display > Custom Options > Colors. If you want to go beyond picking colors, see How do I customize the look of my journal or community? in the FAQ. Options vary depending on whether you have a basic, paid, or permanent account. If you're using a custom style sheet in LiveJournal using the S2 style system or another method, you're in the next group.

Some tools require you to edit your style sheet to make changes to link color and/or decoration:

If you're using Movable Type and you used StyleCatcher to select a theme, your link color and decoration scheme is in the CSS file for your theme. If you're just using a basic stylesheet, you can access that through the administrative interface or however you usually edit it.
If you have a TypePad Pro account and you are using Custom CSS, or if you have converted your templates to Advanced Template Sets, you'll be looking in those files.
In Blogger Beta, most or all of the default templates have links underlined. If yours doesn't, or you've made changes, you may need to edit your template by hand. Click on the Template tab, then click on Edit HTML. The style information is generally near the beginning, but you may have to scroll down quite a bit to find the right section.
In self-hosted WordPress, you need to find the style sheet that goes with your current theme. The name of the main style sheet is most likely style.css, and it should be in the folder for your theme. If you've made it readable, you may be able to edit it directly in the administrative interface.

I found my style sheet. What do I edit?

You're looking for is a section that looks something like this.

a:link {
  color:#000000;
  text-decoration:none;
  }
a:visited {
  color:#000000
  text-decoration:none;
  }
a:hover {
  color:#c60;
  text-decoration:underline;
  }

It may look slightly different in your style sheet - the elements inside the brackets may not each have their own line, or there may be other terms mixed in. The key is to look for the "a" which means link. In this example, this section of the style is telling the links to have NO decoration whether they are plain links, or links that the user has already gone to. Only links the user is hovering over will have an underline.

The code after the word "color" is what determines, you guessed it, the color of the links. To change the color, just replace that number or combination of numbers and letters with your new color. Here's a reference chart of color codes to get you started.

To make the links in this example underlined, you would do this:

a:link {
  color:#000000;
  text-decoration:underline;
  }
a:visited {
  color:#000000
  text-decoration:underline;
  }
a:hover {
  color:#c60;
  text-decoration:underline;
  }

You could also just remove the line text-decoration:underline;. The default behavior for links is to be underlined.

To use bold instead of underlining for your link decoration, you would do this:

a:link {
  color:#000000;
  text-decoration:none;
  font-weight:bold;
  }
a:visited {
  color:#000000
  text-decoration:none;
  font-weight:bold;
  }
a:hover {
  color:#c60;
  text-decoration:underline;
  }

It may take a little trial and error, since there may be multiple areas in your style sheet that control links. One may be the default link appearance, one may be the links in the footer of each entry, one may be the links in the sidebar, etc.

What about the links in my sidebar, and the permalink and comment links? Do I have to make them stand out?

Good question. My guess is that most visitors are going to understand that sidebar links are part of a menu and thus clickable, even if they're not distinctively colored or decorated in any way. The standard web convention seems to be not underlining navigation links. As for the permalink and comment links, they are repeating elements common to most blogs. If your visitor is blog-savvy, they'll probably know those are links.

Questions? Feedback?

Please comment or send me an email. If you disagree or if there's a way I could improve this article, I'd like to know. Thanks!

Sources