Enable image upload

Create an account to upload screenshots of great design.

We believe that the activity of keeping and collecting screenshots
of great design makes you a great designer yourself. A good way to
start a design process is to get inspired by what others have done
before.

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.

14 comments

Anup
on Jul 16, 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.

Web Redesign
on Aug 27, 2009

Josh Johnson
on Aug 27, 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.

Anders Toxboe
on Aug 27, 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.

22i
on Nov 12, 2009

22i
on Nov 12, 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?

Jason
on Dec 03, 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

Patrick Kallie
on Dec 10, 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.