One of the most common deficiencies I find while surfing the web is the failure to set a background color.

Many designers think that white is the default and that a background color is only necessary if white is not used. Many other designers think that a background color is not necessary if they use a background graphic.

These are wrong. This page explains why.

What Happens If No Color Is Specified?

If the page does not specify a background color, then the browser specified background color will be used. If you do not specify a background color, it may not be white. If the page designer truly wants white, the designer should specify white.

This page has purposely been created without a background color to illustrate these effects. If you change your browser as indicated below you will see this.

But What If I Use a Background Image?

You should still specify a background color, even if you use a background image. There are several reasons.

First, the background image may take time to load. Using a background color helps ensure that the page is viewable while the background image is loading.

Second, the background image may not load. The browser may not support the background image or there may be another problem. If you use white text on a dark image and the image doesn't load, then your text may be unreadable. Using a background color helps ensure that the page is viewable even if the background image does not load.

Of course, you must also choose the correct background color. If you use white text on a dark image and set your background color to white, this will not help. You should choose a background color similar to the background image. This will preserve the contrast between the text and other foreground elements and the background.

For example, if your image is mostly dark blue, choose a similar dark blue background color.

How Can I Check My Pages?

The easiest way is to change your browser to use a default color like gray. The instructions are below. Once you have changed your default color, you can then surf your site to check it; any page missing a background color will show as gray (or whatever color you chose) alerting you to the problem.

This page has purposely been created without a background color to illustrate these effects. If you change your browser as indicated below you will see this.

Also, if you use background images, you should check your site by turning off image loading in your browser. This will show how the page looks without that image.

Do you want people to be able to print your pages? Then remember that white or light text will not print well, regardless of background color. If you want people to be able to print your pages, print them yourself on a black and white printer as a test.

What About HTML Email?

HTML email should also set a background color. On some systems (e.g., Windows/IE/Outlook) the default background color for the email derives from the default for the browser.

When I set my browser to show gray pages, it also shows gray email for all HTML email I receive that did not set a background color.

How Does the Browser Specify Color?

Microsoft Internet Explorer

1. Select Tools
2. Select Internet Options
3. Select Colors
4. De-select Use Windows Colors
   At this point, the background color will now probably be gray.
   You may choose any color as the default
5. Select OK to exit back out

Netscape Navigator

1. Select Edit
2. Select Preferences
3. Open the Appearance Folder
4. Select Colors
5. Select background color of your choice.
6. Deselect Use Windows Colors
7. Select OK to exit back out

This page created:
before
Fri, 25.Oct.2002

Last updated:
18:17, Thu, 27.Mar.2008