Consistent Link Colors


Parts/Contexts:

electronic documents with hyperlinks, including Web pages

Keywords:

hyperlinks, anchors, hypertext, Web pages

Predecessor Patterns

. . . that Color Is Information is especially true for navigating hypertext documents like Web pages. While Colors In Context and Colors For The Colorblind apply to all elements of a document, hypertext links also need to be consistent.

Problem Summary

When hyperlink (anchor) colors are inconsistent or indistinguishable, navigating the hypertext is confusing.

Analysis

Some Web design guidelines advocate not changing link colors at all, arguing that people rely on the default colors provided by their browsers. Unfortunately, these default colors are not always compatible with the overall color scheme or color of the page background. In fact, the default link or visited link colors may be the same as the page background.

We suspect (but have no evidence) that the default link colors of most Web browsers are based on considerations of the default 16-color palette of low-end machines. But designing for 16-color machines is an extreme design constraint, and most PCs ship today (1996) with at least 256-color capabilities.

Given that, we find the default color choices of even the best Web browsers less than ideal. Mosaic uses blue for unvisited links and red for visited links. While both of these bright colors stand out on most page backgrounds, somehow the choice is backwards because red seems more appropriate for an unvisited ("hot") link than blue. (Unfortunately, reversing this scheme may be quite confusing to people used to using Mosaic.) Netscape also uses blue for unvisited links, but a dark blue for visited links. With this scheme the brighter unvisited links stand out more than visited links, but the dark blue is so dark it does not constrast well with black text, and could be easily lost if not for the underscore.

While there is no one right set of colors for visited and unvisited links, clearly constrasting hypertext links (including Web anchors) against other text on the page is a navigational aid. Visited links may be a different color altogether, or a similar color that is noticably less bright in value or saturation. But the most critical factor is that link colors are used consistently throughout a single multi-page hypertext document or Web site. In exceptional cases a major subset of a Web site (such as a long report) may use a different - but consistent - link color scheme if justified by a compelling visual or informational reason. (See Color Is Information and Colors In Context).

Solution Summary

Therefore:

Choose hyperlink (anchor) colors that contrast against the normal text color, with unvisited links brighter (hotter) than visited links. Within a set of related hypertext documents, use these link colors consistently. For Web sites this generally means the entire site.

Successor Patterns

(none) . . .


References/Sources


Author/Date

Gary Swift, 19 August 1996
Last updated: Saturday, 22-Sep-2012 18:29:42 MDT

Sponsored by

http://www.DesignMatriX.com