Is blue the best color for link?
Every now and then, I stumble upon a blog post or article suggesting that hyperlinks should always be blue and purple to hint that the link is a link. While, I do believe that it should always be possible to spot what is clickable and what is not – without clicking on- or hovering over the object – I do not believe that the actual link color needs to be anything else than distinctive.
It’s about affordance: giving visual clues to the function of an object. I would postulate that wether the link is red, blue, green, black, or white does not make much difference as long as it is distinguishable from non-clickable content. It is not the color of the link alone that makes it recognizable as a link: the color is not the pattern, a different color and underlining is.
Consider the image below. It has snapshots of 7 different sites, where only one features blue link color. Still, it is not harder to spot the where the links are located in the other 6 snapshots.
If anything should be said about the visual design of text links, a number of principles can be listed:
- A color different from the color of the main content enhances the link’s distinguishability.
- Choosing a color that is brighter than- or at least in contrast to- the main text color enhances the link’s distinguishability.
- Underlining a link enhances the links distinguishability.
- Any mouse-over behavior should have a highlighting effect.
- Links with different targets (for instance target=“_blank” for external links) should be clearly distinguishable.
- Title attributes should be descriptive as to where the link will take you.
Related stories
Is blue the best color for link? has 12 comments
-
8 months ago
Anup
16 Jul 2009
Nice post. I wonder if it is worth adding as a consideration that reliance on color alone isn’t always ideal — underline (or even bold, maybe???) or something else that helps with people who are color blind or have some other visual deficiency may be useful.
-
8 months ago
MDX
18 Jul 2009
I agree with Anup. If users had at least 2 ways to distinguish a link it would be an almost fail safe method for displaying links.
-
7 months ago
Dilini
15 Aug 2009
I agree with Anup as well. I was also wondering how you suggest distinguishing links with different targets. Many sites now use an icon to show external links. What’s your view on that?
-
7 months ago
Web Redesign
27 Aug 2009
The title attributes are important not only from an SEO perspective but also from a usability perspective. Can the titles be styled as well?
-
7 months ago
Josh Johnson
27 Aug 2009
Yeah, the idea of differentiating based on target seems a little ‘off’, because there may be a variety of reasons to change the default target. The more interesting differentiation for most users is whether or not the link leaves the current site, and that’s the case I commonly see where the link has an icon. If a site had an internal link that pops up in a new window/tab, I think it would surprise most users if that was given the same treatment as a link that goes to another site.
-
7 months ago
Anders Toxboe
27 Aug 2009
@Dilini and @Josh Johnson: In regards to distinguishing between different targets, I was especially thinking about the “external” icon that for instance wikipedia uses. There could of course be situations where you would use a target=“_blank” for staying on the same page -and that might be ok. It all depends on the context.
The only thing that matters is that the user has a good idea about what is going to happen once he or she clicks on a certain link. It’s about not surprising (and frustrating) the user.
-
7 months ago
Josh Johnson
2 Sep 2009
Yep, surprises are good on your birthday, but not in your UI designs. :)
-
5 months ago
Brad Pyne
27 Oct 2009
I agree, the only thing that matters is how distinguished it is from the content.
-
4 months ago
22i
12 Nov 2009
So how would you clearly distinguish links that are targeted to _blank?
-
4 months ago
22i
12 Nov 2009
Also how would you automate the coding of external links so that a content manager doesn’t have to manually add, for example, the image to an link opening in _blank whilst not appending it to internal links?
-
3 months ago
Jason
3 Dec 2009
I’ve been debating about this for a few hours now – playing around with css file sheets. Blue seems to be the “universal link color” – but, I wanted to do something more unique. Your post gave me some clarity and I just wanted to leave a note to say thanks.
Regards,
Jason Lanier
-
3 months ago
Patrick Kallie
10 Dec 2009
This is something that I have been debating for sometime now, I think your link should be a color that stick out. So people will have no problem with were your links are. I usually use a brighter color, when I was using a color that was similar to my text my click through ratio was way down.
You will have a much better click through when you have a link that is bright color. Do some experimenting to see which ones have the better click through rate, this will tell you which one you should use. Hope this has been help full.
Patrick Kallie