The Importance of Background Color

Published on November 9, 2005

Many websites use an image as the background of a page element (take the header of this website, for example). And all too often, those websites do not provide a corresponding background color to go along with that image. Take, for example, the games section of Slashdot. The purple background for each headline is an image. In order for the headline text to be readable on this background, the text color is set to white. The following rules are used in the corresponding CSS file (the image URL has been chopped for formatting reasons):

.generaltitle h3
{
    margin: 0;
    padding: .3em .8em .2em .8em;
    color: #fff;
}

#slashboxes h4, .article h3, .generaltitle h3
{
    background: url(<path>) repeat-x;
    padding: .3em 0;
}

Note that no background color has been specified for the h3 element. What is the effect of this omission? If images are disabled, we end up with white text on a white background, rendering the page illegible! “But who would turn images off?” you ask. People on dial-up may turn them off (to speed up download times). Some low-vision users may also turn them off, to prevent distracting backgrounds (and presumably improve text contrast). And keep in mind that the image file may be corrupted, or the server that actually serves up the images (if they are located separately from the site content) may go down, causing images to be inaccessible. Regardless, a specified background color would fix this problem. The image would override the color (when images are available and enabled), but the color would get used when images are disabled.

If you ever develop a website, and you use images to specify a certain region, make sure that you also specify a corresponding background color. Web users the world over will thank you for it.

Comments are closed.

Copyright © 2004-2019 Jonah Bishop. Hosted by DreamHost.