I've built a site where all hyperlinks have the default colors: blue for links, purple for visited links. They turn red on hover.
I believe that always using blue for hyperlinks is a good thing, so your users quickly can see what's a hyperlink, and what isn't. However, some of my colleagues disagree and want other colors.
What are your thoughts on this?
A standard, such as #0000FF for unvisited links and #800080 for visited links, is only good if nearly everyone does it. Otherwise users cannot anticipate when the standard will and won’t be followed and thus can no longer use it to predict site behavior. Unfortunately most web sites do not follow these color standards. In a haphazard survey (not to be confused with a random survey), I find that less than a third of sites comply with the standard. In my experience, users who are relatively new to the web may not even be aware of the standard –it just isn’t something they’ve been able to pick up from their experience. Color has proved to be too important of a graphic attribute for aesthetic and branding purposes for designers to strictly follow the standard. Frankly, it wasn’t a great standard anyway –it’s hard for some users to focus on high-saturation blue text, especially older users. Overall, I don’t think there’s much point to complying with this standard anymore.
However, it still makes sense to make your links blue in a more broadly defined sense. Over 80% of the sites I surveyed use some shade of blue for link. So while it’s not exactly a standard users can rely on, I believe they will tend to assume bluish is more linkish than other colors. From what I’ve seen you can get away with using a non-blue color for links as long as it is a distinct color (your users shouldn’t have to scrub the mouse over each color text to see if it’s a link or not). However, if it’s at all reasonable to use blue, then go blue.
Even more important than color choice is to underline your links, at least for links that aren’t in a top or side-bar menu. Over 90% of the sites I looked at use underlining to distinguish links (although often on mouseover only), making it a very consistently followed convention. Underlining also neatly side-steps the accessibility issues of color –including issues involving the small minority of users that are completely colorblind.
Putting it together, I recommend pretty much the same things Jakob Nielsen recommended six years ago:
For a give site, use one color for all unvisited links. Using multiple colors to mean an unvisited link increases the learning burden of your site and makes it harder for users to scan for links to select.
By “color” I mean it has a hue -links must not be black, white, or gray. Non-colors indicate non-link text to users.
If there is any blue in your site’s palette, then use that blue for links.
Never use the chosen link color for non-linking text on the site. This will confuse users on what is and isn’t a link, defeating the purpose of coloring links.
Underline all links. Use mouse-over underlining with caution. I would only consider it if links are blue or the links are in a top or sidebar menu.
Never underline non-links. Use italic or bold for emphasis instead.
For sites with static content, research suggests that you show visited links in a different color. However, with no specific color for unvisited links, it’s hard to know what to use for a visited link. Only a third of the sites I surveyed distinguish visited and un-visited links, and most of these don’t use purple for their visited links, so I don’t know how familiar users are with this convention. Color-coding is arbitrary here –there’s nothing about purple per se that means “visited.” Users may be able to infer the meaning once they click on a link and go back and see the color change, but imagine a user who returns to the site a month later, and some links are one color while others are different color –it can be hard to remember which is which.
All I can suggest is to try to leverage broader user experiences and adopt a “worn”-looking color for visited links. This should have lower color saturation than the color for unvisited links (consistent with the use of #800080 versus #0000FF), but lower saturation by itself is probably not sufficient to make visited adequately distinct from unvisited for all your users. What else? Red-shift the hue like some sites do, consistent with using purple versus blue? Use a lighter color, like other sites do to make the link look “faded”? Use a darker color like still other sites do to make the link blend in more with ordinary text? I think this needs some research, and then we need to make it a standard.
Convention is nice when your color scheme allows it, but internal consistency is more important, so don't feel like you need to stick to the blue/purple/red palette. It's also vital that your links are differentiated from normal text. Differentiation is usually accomplished by color, weight, or an underline. Different colors for different link states increases usability.
Whether links should be blue or not is an old discussion. Jakob Nielsen, for one, has been known to advocate this, although he has changed over the years: in Homepage Usability he makes a point out of his changed view (Nielsen & Loranger 2006, p. 100).
However, more important than #0000FF colored links are that you change the color of visited links. Not necessarily to purple, but to something (notably) different.
My (inspired) opinion: Aesthetics is important. Therefore, I would go for a distinct link color which matches the overall visual feel, be it #0000FF or another color.
The reason for it being this horrible blue is, that colorblind people (that is, the most common case of colorblindness) can distinguish between black and blue, so they actually see the difference. If you have a hugh number of users who could potentially be colorblind (e.g. google or bing) you might want to stick with this convention. Otherwise you need not do that if it does not work with your design. But you might at least underline links or make them be different apart from just the color.
They don't need to be blue, just consistent. And by consistent, I don't mean they all have to be one color. Links in the navigation vs. links in the footer vs. links in content - they can each have their own color, as long as they're consistent within their areas, and stand out as clickable.
In my opinion, it's best if button colors are also consistent with link colors, giving the user a "this is clickable" color, not just a link color. I also agree with previous comments about visited links - they don't need to be drastically different, but noticeably different.
Last but not least, when you define link colors, define background and text colors.
Don't assume that you're starting with a white background, black text, and blue/purple links - the user can change these. You should set your browser to use non-default colors, so you can see when your sites (and so many others) fail to define these. (I have my browser background color set to light gray, maroon text, bright green links, dark green visited links, and orange link hover.)
First, the key issue with links is not so much whether they be a specific colour, but in ensuring that they are differentiated enough to make it clear they are links.
@VirtuosiMedia and @jensgram, I'd agree that visited link differentiation is good, but still key is simply making sure your links stand out. Particularly now, with information overload and so much scanning as opposed to reading, users have to see links at a glance and it is helpful to know if you've visited something, particularly something you didn't visit from the page you're on. I believe that concept is more important if one reads content within one main topic area or industry, where many sites link to the same material. We always have to remember that users can override how visited links behave in their browser settings (as I do).
@Lukas and @Charles I'd also agree that underlining does not necessarily work. If designing for high enough contrast, then for those who are colour blind simply using a different colour may also not be enough. The more differentiation you can give your links and the more pseudo class variation after that, the better. For example with a simple stark design, #333 text colour and #000 link colour will probably not be enough for low acuity or colour blind users, but making the black link bold and underlined may be enough. The state would then be best to change on hover and on active and then change yet again, perhaps to something like a #999 in the case I've cited above.
@Stewbob Really? Even if it makes your design stink to stick to blue, you should do it? Hardly.
I don't think the specific colour matters, or even that they're underlined. As long as it is immediately apparent that they can be clicked on, then that is okay.
I have been on sites where I've had to go hunting (with my mouse) for something I can click on. If the cursor turned into the little hand then I knew I could click on it. To me that's very poor design.
While each site design will be different, I think in general it should be obvious what can be clicked to perform an action by just looking (passively) at the page. Having said that following general standards, in terms of where things are is good. A lot of websites will have the account information in the top-right. Again I've been on sites in the past where I had to spend 5 minutes or more trying to find the "log out/off" link.
Here are Microsoft's published standards for links. There is a specific section about link colours and backgrounds, with amusing illustrations of incorrect usage.
