Link appearance and usability
On this page: By changing the appearance (colour, underlines) of your links, you may compromise the usability of your web pages. In this article, Lois discusses why, and how to mitigate this. Don't mess with links!
Background on link appearance
Since the earliest browsers, there has been an unwritten convention for what links look like:
- The text that describes the destination is underlined (by default - some browsers allow you to turn this off, but not many people bother)
- Links that you haven't visited are shown as blue text
- Links that you have visited recently are shown as purple text
- (More recently, active links are shown as red text. And in some browsers, when you hover the mouse over them, they are red too.)
In the early days of the web, this was always what links looked like. Later versions of HTML (e.g. 3.2) allowed page authors to change the link colours by attributes on the <body> tag, and with the advent of stylesheets, you can now remove the default underline too.
Why not change link colours and styles?
You mess with this convention at your peril! Users have come to expect what links will look like, and by changing them, you can compromise the usability of the page. Many users already find the web a confusing place, so by changing one of the few constants, you just make then feel more uncomfortable. (The same is even more true of the #1 usability sin - breaking the Back button.)
Research has shown that users often scan a page for headings and links to see what's there, rather than reading all the text. If you make it difficult to find links - if you change the colour, and especially if you remove the underline, you can make scanning slower and more unrewarding. See this page for example: 
an Alertbox on how users read web pages from Jakob Neilsen.
Users rely on being able to tell the difference between visited and unvisited links to navigate in a site - without this distinction, they may go around in circles. However carefully you crafted the navigation model of your site, remember that you are an expert in it, while most visitors aren't, so give them all the help you can.
(Of course, for graphic links, they don't usually see this difference. Very few pages use coloured borders on images these days: see the example left. On usability grounds, we probably should use borders - but for a corporate or e-business site, this would destroy the carefully crafted image. A useful alternative is to provide text equivalents.)
When is it OK then?
Of course, there are exceptions to the rule of not changing the link defaults, for example:
If you have chosen a dark page background, the default link colours are almost unreadable. See the example screen shot right taken from an international law firm in 2001 - oops.- If your site depends on æsthetics for its appeal or brand image, you may feel that changing the link colours and possibly the style is worth it, in terms of overall appearance.
- Your target audience may have specific visual problems that you wish to address. (See another Alertbox on the poor default choice of link colours.) For example, problems might include colour deficiency, poor acuity, or the necessity for working in an environment with unusual lighting conditions.
(The rule really applies to links in text paragraphs; text links in a navigation bar, for example with rollover colours, are commonly expected to look different, and probably safe.)
Conclusion
For links in text:
- Never remove the link underlines if you want your page to be scannable.
- Use the default link colours, or something pretty close to them, unless you have a good reason to change them. Just making the page more colourful isn't a good reason.
- If you need to change the colours, stick to a recognisable colour scheme: a bright colour for unvisited links, and a duller shade of a similar hue for visited links. Two equally bright colours give no clues about which is which. You can't expect your visitors to work it out, and remember, just for your site.
- Don't use several colours on the same page (or even the same site).