Choose Link Colors With Care
Are you sure your readers can find your links?
If your links are only designated with 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. 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 of what happens for these folks in Dive Into Accessibility Day 12: Using Color Safely. First, a set of links:
Here is the set of links as seen by someone who has trouble distinguishing red:
Oops. You can barely tell them apart from the text unless they're also in bold.
It's not just people who were born with color blindness who benefit when links are easy to distinguish from text. 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? Also, elders may have more difficulty distinguishing colors.
In general, it's just a good idea to make links distinct, and make everything else look different. If you've ever run into a site that has blue and underlined text that isn't a link, you understand the frustration of having your assumptions about the web turned upside down.
Checking Your Blog
If your text and links are a combination of red or green, or either one with black or grey, I'll just tell you straight out that you have a problem. If you want to see for yourself, 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 also try out Vischeck for a similar effect.
Even if your links don't completely disappear with one of those tools, take a step back from your monitor and honestly ask yourself whether your links stand out or blend in. If you're still not sure, ask your readers to give you feedback.
Fixing Your Blog
If your current color combination isn't working, you may want to choose another color. If you like your colors just fine, you can add underlining, bold, or some other decoration to help visitors find your links.
Your options for making changes 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 really bad color combinations and do not underline or 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 I found that may cause problems even for people with "normal" color vision. Your only option is to switch templates. (Or complain to WordPress, which I encourage.)
Some blogging tools allow for fairly easy customization:
- 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.
Editing Your Style Sheet
Some blogging 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 2.x, 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.
You're looking for 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 visited. Only links the user is hovering over will have an underline.
The code after the word "color" is what determines 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;
}
OR you could just remove the line text-decoration:none;. 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;
}
Sidebar, Comment, and Other Navigational Links
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. 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.
Leave a comment