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.
Picture
Anders Toxboe Author

As the head of Bonnier Publication’s Interactive department in Copenhagen, Denmark, Anders Toxboe builds awesome websites with his team. He also founded UI-Patterns.com and a series of other projects.

14 comments

  • 7dd8cf5ab16e43aad2185007fdd2fe47

    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.

  • 6ef2341b57e5cd117a55475c275d6165

    MDX on Jul 18, 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.

  • Fc207e0ed0120a5b4cb459377b3f98c3

    Dilini on Aug 15, 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?

  • 31270cf6736a9bfb08417c95836d5722

    Web Redesign on Aug 27, 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?

  • 2f94a58bbda2369618def09ec22a9aed

    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.

  • 2516c5faea230297ff3732e483b9218b

    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.

  • 2f94a58bbda2369618def09ec22a9aed

    Josh Johnson on Sep 02, 2009

    Yep, surprises are good on your birthday, but not in your UI designs. :)

  • 425be2d55b2370f866f48d028fa83b45

    Brad Pyne on Oct 27, 2009

    I agree, the only thing that matters is how distinguished it is from the content.

  • 28cac23d19a74657fe8f473c776bb2b0

    22i on Nov 12, 2009

    So how would you clearly distinguish links that are targeted to _blank?

  • 28cac23d19a74657fe8f473c776bb2b0

    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?

  • 127f274bcda366c286fee35a564758d3

    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

  • 8d6abf62fc3705d56d0408a1220847d6

    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.

    Patrick Kallie

  • 403d47c8b227172b283afd4e3ef7d969

    AJ on May 18, 2010

    Agreed. If it looks different than the normal text it is most likely a link. Whether it is blue or green is irrelevant. It really depends on your site’s design.

  • 93546e29f46ce7a1b6b02b9f6117e70c

    Tom on Jul 12, 2010

    Why has US english become standard english all of a sudden?

    Who invented the english language?

Post a comment

To avoid spam, no URLs are allowed.