If You Pick One Color, Pick Them All

A surprising number of Web sites have color specified for body text, headings, and links of all kinds yet not for the background. Because your visitor may have any color set in their preferences, they may:

The rule of thumb to avoid these problems is: If you specify one color, you must specify them all.

Recommended Practices

Forget <font>, use CSS

The proper, modern way to set color in a Web page is to use Cascading Style Sheets. This is strongly recommended over the use of <body> attributes and the <font> element in HTML, because CSS is more flexible, easier to maintain and saves bandwidth. Use the CSS properties <color> and <background-color> or its shorthand <background>.

Example

The background, foreground and link colors are all specified in this simple black on white page.

html, body {
   background: #fff;
   color: #000;
}

a:link {
   background: #fff;
   color: #037;
}

a:visited {
   background: #fff;
   color: #636;
}

Further Reading

Some of the advice here differs from ours.

About the "QA Tips"

The W3C QA Tips are short documents explaining useful bits of knowledge for Web developers or designers, hosted and produced by the Quality Assurance Interest Group at W3C.

While the tips are carefully reviewed by the participants of the group, they should not be seen as anything else than informative bits of wisdom, and especially, they are not normative W3C technical specifications.

Learn more about the Tips, how to submit your own pearls of wisdom, and find all the other QA tips in the Tips Index.

Created Date: 2003-07-30 by Olivier Thereaux and Susan Lesch
Last modified $Date: 2007/07/23 15:55:02 $ by $Author: coralie $