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.