Good Color Practice - Part 3 of Chapter 2 from Web Graphics for Non-Designers (3/7)

Best Practice

The palette and techniques you use are dependent on your audience and the assumptions you make about them. You have a number of options:

Play it safe; really safe: If your brand and site image is a low priority, and you are looking for a challenge, then working within the 22 colors of the really safe palette might be worth considering.

Stick with web safe: To keep everyone mostly happy, you can work to the web-safe palette. The larger group of 16-bit users will experience some color shifting, but the fewer 8-bit users should be saved from the far less attractive dithering. Dithering occurs when the video hardware of a computer attempts to replicate an unsupported color by using a pattern of two other colors.

Use transparent backgrounds: If your GIF only has to blend seamlessly with one HTML background color, then making the equivalent color in your GIF transparent will remove many typical lines of stitching concerns (since the background color shows through, there is no seam between the HTML color and image color).

Keep GIFs and HTML colors separate: Since the color shifting which occurs for the majority of typical web audiences results from differences in color handling of images and HTML colors, separating the two within your page layout will prevent users from noticing seams. Nevertheless, some of the color shifting will be noticeable to the point that differences are discernible, even when colors are not adjacent. Testing will help you find out which colors are susceptible to this.

For most designs, using the restrictive 22-color palette will not be an option. With that in mind, the most sensible action would be a combination of the remaining techniques.

Where possible, use web-safe colors for backgrounds of pages and tables.

To minimize visible seams, make GIFs adjacent to an HTML background color partially transparent.

When designing, keep in mind that separating GIFs with background colors from their HTML background equivalents removes the possibility of noticeable color shifting.

Know your audience, and design to keep your site attractive for the majority.

Of course, regardless of the method you use you should always test your design on as many platforms, browsers, and color depths as you can. There may be valuable sacrifices you can make with your layout to remove seams and dithering.