Web Page Color Restrictions

Posted Tuesday, July 15, 2003

This week I shall discuss which restrictions in color displays you should design for. Not all computers will display color in the same way. For a web designer, one of the most difficult decisions is which colors should you use? If you are like me, you will prefer to set your monitor to work at its optimum performance. In my case this means a 1280x1024 display at 24 or 36 bits. I spend a lot of time programming which is a lot easier using a large terminal set to a high resolution. I know a lot of you probably have a strong graphics background. If so, you may be using an even larger monitor set to a higher resolution. Graphics have always placed the highest demands on computer technology.

The typical web surfer however, probably does not have a 19 or 21inch monitor set to 1600x1200 at 36 bits and 100 Hertz refresh. Just a few years ago the typical system was a 14inch monitor set to 640 x 480 at 8 bits (256 colors). Have you tried looking at your web site with these settings? On most PC's you can change the setting by right clicking on the desktop or open the Control Panel and select Display. Select the "Settings" tab and select 256 colors and a screen area of 640x480. Save, exit the control panel and visit your web site (you may need to reboot first). What do you see? Is it acceptable?

If you normally work with high display settings you will probably find the low resolution very cramped and the colors cumbersome. For someone used to these settings however, the more important question is how does your web site look? Can you read the text easily or do you have to scroll horizontally to read from one line to the next. What about the colors? Do they look acceptable or does it look like your 3 year old has attacked it with her crayons?

Some systems will attempt to maintain the selected colors by using a technique called dithering. When the requested color is not available, the system will set adjacent pixels to complimentary colors that will appear to mix to make the requested color. Although this may often appear to be better than using a color that is completely wrong (red or yellow used for flesh tones is a good example), it will still create a pixilated effect especially on a low resolution devices. This can be very distracting particularly if it appears on a large design element that is intended to be a solid color.

Last week I told you how color tables are used to make 16.8 million possible colors available on 8 bit graphic displays that could otherwise only display 256 colors. If you recall, although this makes almost any color available on an 8 bit system, they are still limited to displaying only 256 of them at a time. In many respects if color tables were not used by anyone life would be a lot simpler. In this instance everyone would use the same 256 colors on an 8-bit system. Incompatible colors would not exist and you would be sure that the color you selected would be the color that was displayed on someone else's computer.

To make matters worse, GIF, the most popular Web Graphic file format uses it's own color table. Not only is it possible for a GIF image to include a color table which does not match the loaded table on an 8 bit system, it is possible and more common than not, for two GIF images on the same web page to include two different color tables. As you add GIFs to a Web Page, the potential for conflicting and incompatible color tables increases.

On a 32, 24 or even a 16-bit display these color tables will be displayed close to or exactly as specified. On an 8-bit display however, the result could be disastrous. On an 8bit computer the application program will decide which color table it is going to use. When a GIF is loaded on an 8bit display, the application will look at the requested colors and attempt to find the closest possible match in the loaded color table. As more GIFs are loaded with incompatible color tables, the greater the number of gross mismatches there will be. Eventually even the best dithering will not help.

The good news however, is that the color table that will be selected by most browsers is known. It is called the Web Safe or Non-Dithering color table and contains 216 common RGB color combinations that will be loaded into PC's and Mac's 8bit color table. If you select these colors in most cases they will be displayed exactly the same on all 8bit systems without dithering. I have posted an example at colorsafetable.

If you use these colors the color elements of your web site will probably be safe. Unfortunately, ensuring your GIFs are color safe can be cumbersome especially if you are using imported GIFs from other sources. If you design your own graphics you may also find the selection too restrictive. The whole point of having a 24bit display after all is to not be restricted by color limitations.

Deciding upon a compromise between the limitations of low-end systems and the advantages of high-end systems is a critical element for a web designer. Low resolution and low colors simply do not look as good as Hi-Res but as a designer, it is your job to make it work. You simply cannot do that unless you invest some time and effort to work with it.

The more difficult question is how much compromise should you make? Is 640x480 by 256 colors the low-end display to design for? What about monochrome displays? There are still a lot of Mackintosh's out there with an 11inch monochrome display. The vast majority of new computers even at the low-end are now shipped with at least 16bit color capability, even at higher resolution settings. Or maybe your web site is designed for business professionals that will have at least a mid-range computer.

There is no simple answer to selecting the low-end system that you should design for. As with all computer technology, the low-end is rapidly migrating upward. It is now unrealistic to hinder the advantages with hi-end systems by designing for a 386 with 4 MEG and 16 colors running Win 3.0 (assuming it could actually access the Internet). It may soon be unnecessary to consider support for a 256-color 640x480 system but for the time being you should.

For what it is worth, I would recommend that you design for an 800x600 by 16bit display but test that it is acceptable at 640x480 and 256 colors. If possible, you should also test that it works with a grayscale display to ensure that the text is easily readable. In addition to supporting older displays, this will also ensure that the website is legible to color impaired people.