|Cross-Platform Color for
PCs and TVs
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:
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:
Using these tools, here are the steps to creating readable cross-platform color combinations:
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.
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.
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.
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.