Theresa O’Connor

HTML Colors: All or None

I don’t know what this web page looks like in your web browser, but I do know that, if it looks terrible, it’s your fault.

How do I know this? Consider the BODY start tag that appears in this file: <body>. Note that it does not have any specified values for bgcolor, text, link, alink, or vlink, which are the body color attributes defined in HTML 3.2. Since I don’t specify any color values, your web browser uses your default page color settings. And while most people leave these settings unchanged, people have been known to change them.

Not only do individual defaults differ: different browsers ship with different settings for these defaults. For instance, the default background in Netscape 4 is #c0c0c0, whereas it’s white in IE.

Lots and lots of web pages only specify some of the colors. By doing so, the other colors are drawn from the user’s defaults.

This is problematic, because the colors you actually specified might combine horribly with the user’s defined colors. For instance, consider a web page which explicitly sets it’s background color to white, but leaves the rest of the colors unspecified. Now consider a user whose default colors are given in this table:

User Colors
bgcolor Black
text White
link Yellow
alink White
vlink Red

Given this, the web page will be rendered with the following colors:

Rendered Colors
bgcolor White
text White
link Yellow
alink White
vlink Red

Reading white text on a white background is rather difficult for most human beings. What is the relevant principle of web design to learn from this?

Ted’s First Principle of Web Design

When designing a web site, choose from one of the following two options:

  1. Specify all of the colors, such that text always looks exactly how you want it to look, or
  2. Specify none of the colors, and let the user’s default colors do the dirty work for you.

There are no other acceptable options.

This principle applies to the use of stylesheets as well; I targeted HTML 3.2 <body> color attributes because 90% of the time I encounter this error, it is due to such HTML.