November 11,1998

Choosing the right colors and combinations of colors to make your Web page look good on personal computer monitors and also on TV displays is a challenging task. Use this article to create Web pages that work well on personal computers as well as on WebTV systems.

Tip If you need more background before proceeding, see the Notes at the end of this article on  the browser-safe palette and hexadecimal numbers.

Readability and TV

The biggest breakthrough in the creation of WebTV was the ability to make HTML text legible on a TV screen. WebTV uses advanced technology to convert Web text to a large, readable font and to display text with relatively little distortion.

In other articles on this site, we describe some basic steps you can take to make sure text on your Web pages is legible. If you have limited time to spend making your Web site work well for WebTV users, ensuring legibility is a worthwhile beginning. See the WebTV Development Checklist to get started on these steps.

But legibility of text is only the first goal. The next step to making your site work really well across platforms is readability, making text not only decipherable but actually easy to read on personal computers and also on TV. To do this, you need to carefully consider the background color and text color you use on your Web page so they work well on both personal computers and television.

There are two key issues to consider: comfort and contrast:

• Comfort. Both your text color and, especially, your background color must be "easy on the eyes" and not vibrate or glow when displayed on television. For instance, bright white, a common color in Web sites, is hard to look at when displayed on a TV; not only does it glow, it actually causes the edges of the picture to warp. Bright yellow isn't pleasant to look at on a TV screen either.
  
  Tip. You can make your Web pages more comfortable to read on TV by avoiding higher intensities of any one primary color -- red, green, or blue -- over the others, and by testing your Web page's background and text colors on a TV using a WebTV system.

• Contrast. You need to choose background/text combinations that provide enough contrast to make it easy for your users to distinguish letters from the background.

To create readable background/text combinations, you need to strike a balance between comfort and contrast. The most soothing thing to look at on a TV screen is an even field of medium blue, but that doesn't convey any information. Using bright white letters on a black background provides maximum contrast, but is hard to look at for long. You need to find a background/text combination that's legible but easy to look at. We'll describe a procedure for doing so below.

Cross-Platform Colors and TV

Many personal computer users have computers with video display systems that are either limited to displaying 256 colors (for instance, most laptops), or set up by the user to display only 256 colors so as to get greater screen resolution or faster screen updating. When a Web page has a color in it that's not one of the 256 colors, that color may be replaced with a "dithered" version made up of different-colored dots. From a distance, a large area of the dithered color looks OK. But fine detail, such as all the little curves in text characters, is lost. Pages with a dithered text color, dithered background color, or both are very hard to read.

Sometimes, instead of dithering, a Web browser substitutes another color for the designer's chosen color when the chosen color is outside the range of colors available on a specific computer. Whether the browser dithers the color or substitutes for it, the designer's intent is still lost.

Web designers have long worked to create Web pages that look the same on all personal computer systems. One key tool that helps this effort is the "browser-safe palette," a list of 216 colors that works equally well on almost any computer. If you want to create cross-platform Web pages that look good when displayed on TV as well as on various personal computers, one way to do so is to start with the browser-safe palette. Then choose colors from the browser-safe palette that also look good on TV and combine them to make background/text combinations that are highly readable.

This is not an easy thing to do, because the browser-safe palette's colors were not chosen to be easy on the eye even on a personal computer monitor, let alone on television and its color system. They're just the colors that are most differentiated from one another when displayed on a low-end RGB (Red, Green, Blue) computer video subsystem. In general, these are not the most attractive colors for use on television.

A television set displays a more "natural"-looking image than a computer monitor but does a poor job of displaying thin lines and colors with high intensities of red, green, and blue. Television stations use expensive equipment, and even try to specify what on-air personnel should and shouldn't wear, to keep your television set from having to display high-intensity colors and patterns such as checks and thin stripes.

However, text characters are made up of thin lines, and Web pages tend to use colors with high intensities of red, green, and/or blue, such as 100% red and bright white. Because of this, many Web pages display poorly on TV. The way to avoid these problems within cross-platform Web pages is to first choose your background, text, and link colors from the browser-safe palette,  then test on a personal computer and on WebTV to make sure your pages are easy to read on both platforms. The next section gives steps for doing so.

Creating Cross-Platform Color Combinations

To create cross-platform color combinations that work on personal computers and WebTV, you need a personal computer to preview color combinations on the computer side, and two other tools:

• WebTV Color Picker. This tool lets you test the appearance of any background and text color on a personal computer or WebTV. Just enter the hexadecimal RGB value of the background color, then the text color, and the color combination appears onscreen.
  
  
• A WebTV system. You need a WebTV system -- either a Classic or a Plus system -- and a TV to run the WebTV Color Picker and view what the resulting combination looks like on a TV screen. If you don't have a WebTV system of your own, you may be able to do a limited amount of testing on a demo system at a WebTV retailer.

Using these tools, here are the steps to creating readable cross-platform color combinations:

1. Use HTML text, not graphical text. Convey as much information as possible in HTML text, not text that's embedded in graphics. WebTV can't resize text to an appropriate size for display on television if it's embedded in a graphic. If you do use text embedded in graphics, design the graphic and its text for readability on both personal computer monitors and television.
   
   
2. Start with the background color. The background color you use sets the tone for the entire Web page. Start by choosing a background color that works well on both personal computers and TV
   

Tip Consider a lighter-colored background if the appearance of your Web page on personal computer monitors is your priority, but avoid pure white so you don't have problems on TV sets. If appearance on TV is your priority, or if you're willing to try something different from most Web pages, use a darker-colored background.

3. Pick text colors. Choose a main text color that works with your background color to create a text/background combination that's readable on both personal computer monitors and TV sets.
   
   
4. Pick link colors. Once you have your background/text combination selected and tested, change the colors for hypertext links and visited links if they are hard to distinguish from the background or from non-link text.
   
   Tip Users are accustomed to the default link colors for not-yet-visited and visited links. If you do change these colors, test the new colors to make sure that users can easily identify which is which.
   
   
5. Test. Test color combinations -- background, text, and links -- on personal computers and WebTV. Get other people involved. Be ready to test several different color combinations, since it's hard to predict what will look good on each platform until you actually see it on that platform.
   
   Tip Instead of committing to specific colors early in the process and risking disappointment when those colors don't work, decide in advance what effect you're trying to produce -- cool and easy to read, exciting, blending in with existing Web pages, standing out, etc. -- then see what color combination best produces that effect.

This can be a time-consuming process, but once you come up with a color combination that you like and that works well cross-platform, you can use it throughout your site. Many Web sites are not really designed with readability in mind, so the results of this process will be a Web site that not only makes WebTV users happy but that is likely to be more readable for your personal computer users as well.

Note: The browser-safe palette

There are a number of detailed explanations of the browser-safe palette that you can find by searching the Web, so here's the Cliff's Notes version for those of you in a hurry.

Two facts of life help make Web page design difficult: most Web page designers work on computer systems that are capable of displaying thousands or millions of colors, so they don't see the color substitutions that other users suffer from; and PCs and Macintoshes don't have the same 256-color palette, so some colors that don't dither on one platform do so on the other. (These problems do not occur on TV, by the way.)

It turns out that there's a core set of 216 colors that never dither on either PCs or Macintoshes. These colors are made by combining six values of red -- 0% intensity, 20%, 40%, 60%, 80%, and 100% -- with the same range of values for green and blue. Combining the six allowed reds, the six allowed greens, and the six allowed blues gives you 216 possible colors that won't get dithered on any personal computer. These colors are called the 216-color browser-safe palette.

In some cases the user can specify that the browser, instead of dithering a color, will automatically replace it with a color from the 216-color browser-safe palette. This causes less of a readability problem than dithering, but there is still a problem: what you see (when designing a Web page) is not what you get (when that Web page is displayed on some computer systems). Use the browser-safe palette to avoid problems.

Return to beginning of article.

Note: Hexadecimal numbers and RGB values

In HTML, the language of Web page design, colors are expressed as RGB values using hexadecimal numbers. An RGB value is a way to describe a color by describing the intensity of red, green, and blue (RGB) in the color. For instance, white is 0% red, 0% green, and 0% blue; black is 100% red, 100% green, and 100% blue. Grays are any color with equal amounts of red, green, and blue.

Hexadecimal numbers are a compact way to describe numbers that will be translated into bits and bytes for processing by a computer. Hexadecimal numbers use more digits than the base 10, or decimal, numbers we're used to. Hexadecimal digits range from 0-9 plus A-F, to represent the numbers 10-15. Computer programmers and others often write long strings of hexadecimal digits to express various numbers or specify computer memory locations.

You don't need to understand hexadecimal numbers in general to understand RGB values, though, because each color component -- red, green, and blue -- can only range from 0 to 255, or 0 to FF in hexadecimal. So a typical RGB value looks like this: A032FF, which means red intensity A0 (151 out of 256 possible values, or about 59%), green intensity 32 (51 out of 256, or almost 20%), and blue intensity FF (256 out of 256, or 100%).

Further simplifying matters, the browser-safe palette only uses the hexadecimal values corresponding to 0%, 20%, 40%, 60%, 80%, and 100% intensity -- 00, 33, 66, 99, CC, and FF in hexadecimal. So all the colors in the browser-safe palette look like this: 9966CC, or 60% red, 40% green, and 80% blue, a shade of purple. You'll quickly get comfortable with these values after working with them for a while.

Example: breaking down a color. One browser-safe color is 00CC66, which shows up as a shade of green. Let's break down the color and see why:

Red: 00. This color's red intensity is 00, or 0%; there's no red in the color.

Green: CC. This color's green intensity is CC, or 80% green; there's a lot of green.

Blue: 66. This color's blue intensity is 66, or 40% blue, just enough to change the color from a strong green to a more interesting shade.

Return to beginning of article