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:

See an incongruous or alarming combination of colors.
Worse happens when your visitor's browser preferences are light on dark, and the site is dark on light or vice versa. The visitor may find the text invisible, dark on dark or light on light.

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;
}

What's wrong with the FONT element? by Warren Steel
Effective Color Contrast - Designing for People with Partial Sight and Color Deficiencies by Aries Arditi
When Bad Design Elements Become the Standard by Jakob Nielsen
Let Users Control Font Size by Jakob Nielsen
See also the W3C CSS Validation Service

Created Date: 2003-07-30 by Olivier Thereaux and Susan Lesch
Last modified $Date: 2003/09/18 16:02:36 $ by $Author: dom $

Copyright © 1999-2003 W3C^® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.

If You Pick One Color, Pick Them All