Color and Graphics

• The colors you choose for your web site may not display consistently across all platforms, monitors, and browsers. The 216 colors in the web-safe color palette will display fairly reliably on 256-color monitors. But more modern --and increasingly more common-- monitors can display thousands of web colors. Even the web-safe palette is not consistent on these newer monitors. What should you do? While there is no right answer, whatever color choices you do make, be sure to test, test, test your site on as many browsers, monitor color settings, and platforms as you possibly can.

• If you do decide to venture beyond the web-safe palette, the tools on this site can help you explore (and code) the world of colors available to you.

• When working with colors in software products such as Photoshop, use RGB (additive) colors, not CMY (subtractive). Photoshop also helpfully displays a warning symbol next to unsafe colors.

• Have trouble choosing colors that work well with each other? This nifty tool calculates a matching palette for any color you select (Internet Explorer only).

Accessibility

• Always include the alt attribute with each image tag.

• Avoid animations. They can cause problems with some accessibility software. Alternatively, you may use javascript to create rollovers for an animated effect. Adding javascript rollovers with Dreamweaver is quick and painless. Be aware, however, that some users turn off javascript in their browsers. So, do not make any page functionality dependent on javascript.

• Ever wondered how the colors you've selected look to a color blind person? View your page through color blind eyes at http://www.vischeck.com/vischeck/vischeckURL.php. If important information on your page gets lost due to poor color contrast, you should rethink your color choices. This handy tool simulates the color palettes for 3 types of color blindness. It can help you pick colors with enough contrast for all your visitors.

Putting it all together

• If you want to use the same color both in an image as well as coded in your html, e.g, for a table cell background color, make sure the two are not juxtaposed. One of the more bizarre realities of color rendering is that the same color may be resolved differently for a gif image versus html coded color. So, the colors may not look the same and might show contrast when placed next to each other. To avoid this, keep the two colors apart, or set the color in question as a transparency if the image must lay over the background color. For in-depth discussion on the rather complicated topic of color rendering, read this excellent Web Monkey article.

• Make the file size of graphics as small as possible, 4-6K each. Use jpg format for photos and gif format for artwork. Resolution should be 72 dpi.

• Declare an alignment attribute for images.

• Include width and height specifications in image tags. This tells a browser how much space to allow for the image, thereby decreasing page loading time. Do not use the width and height attributes to resize an image; this will increase your page's loading time and may cause your images to display inaccurately.

• Try to avoid using background images.

Many thanks to the knowledgeable folks on the uwebd listserv for providing the web site resources mentioned here.