Web Page Color Degradation

Most web page designers don't concern themselves with whether their web pages work with text-only browsers or not. Probably even less of them worry about how the color in their web pages degrades in different color palettes. Believe it or not, there are still some folks out there who surf the web in 256- and 16-color modes, and if your pages don't use much color perhaps you should consider picking colors that degrade to their color modes gracefully. Color dithering can result in completely unreadable web pages, and background patterns complicate the matter further.

When you are selecting a 24-bit color for an item on your web page (a graphic or a solid background), select a color from the 216-color Netscape "safe palette" of colors that degrades to a satisfactory color in the 16-color Standard VGA palette. For example, if you intend to have a light blue background, you might select one of the light blues in the 216-color palette that degrades to either white, light grey, or cyan in the 16-color palette. To assist in the selection of such colors, I suggest creating tables something like the following:

The 4 colors in the 216-color palette which degrade to white (#FFFFFF):

#FFFFFF #FFFFCC #FFCCFF #CCFFFF

The 37 colors in the 216-color palette which degrade to light gray (#C0C0C0):

#FFFF99 #FFCCCC #FFCC99 #FFCC66 #FF99FF #FF99CC #FF9999 #FF9966
#FF66CC #FF6699 #CCFFCC #CCFF99 #CCFF66 #CCCCFF #CCCCCC #CCCC99
#CCCC66 #CC99FF #CC99CC #CC9999 #CC66FF #CC66CC #99FFFF #99FFCC
#99FF99 #99FF66 #99CCFF #99CCCC #99CC99 #9999FF #9999CC #9966FF
#66FFCC #66FF99 #66CCFF #66CCCC #6699FF      

By choosing colors from tables like those above, you can ensure that all viewers of your web page will be able to view your pages without any serious difficulty. The colors in your pages should degrade gracefully, just as the HTML in them should.

As an example of what happens as a result of color degredation, I've prepared a pair of graphics. Let's say you've decided to select the RGB color set 150, 200, 200 (#96C8C8) as your background color. The images below show what that background would look like in 24-bit (16M) color mode (undegraded) and 4-bit (256) color mode (degraded).

[Undegraded Background] Undegraded Background      [Degraded Background]
     Degraded Background

If you had instead selected the RGB color set 153, 204, 204 (#99CCCC) as your background, it would look very similar, and yet would not degrade in 256-color mode. You can see charts of the 216-color palettes on my page about Web Page Color Palettes.


This page is copyright © 2024 by Donovan K. Loucks (Home Page / E-mail)