While this article is written on an introductory level, understanding how televisions work will help you better grasp the material here.

The basic rules of avoiding color distortion on television are:

• Avoid large amounts of bright colors, especially pure white backgrounds.
• Avoid heavily saturated colors, especially reds and yellows.
• Keep the "Y" values of text and background as far apart as possible.

Different Descriptions of Color

Before we begin, you should know that there are several different models that can be used to describe the same color. Each of these has its own use and application, and it is usually easy to convert between them. In this article, we will use three different models of color. These models are:

RGB

Red, Green, Blue. The most common model of color, RGB defines a color as a combination of varying amounts of red, green and blue light. While not very intuitive, it has a basis in biology - the human eyeball has photoreceptors for red, green and blue light. Also, televisions create a picture by illuminating red, green or blue phosphors on the screen.

HSB

Hue, Saturation, Brightness. The most intuitive model of color, HSB defines a color as a combination of: its Hue, the position around a 360 degree color wheel; its Saturation, the "purity" of the color; and its Brightness, the lightness or darkness of the color. This chart may help you visualize the model.

YUV

Y = luminance, UV = chrominance. The most complex and specialized model of color, YUV is the color model used for constructing the color television signal. More detail on YUV is given below.

Color Consideration #1 - Bright Backgrounds

The color white is created by mixing the maximum amounts of red, blue and green light. Thus, to make a screen dot white, the cathode ray of a television must blast the screen phosphors with the maximum amount of electrons. Although pure white is the Internet's most popular background color for Web pages, televisions were simply not made to display it well.

The Problems
Two problems arise from selecting pure white backgrounds - screen "bowing" and "blotchiness". "Bowing" results when the large quantity of electrons necessary to draw white actually disturbs the electrical balance needed to draw the screen, causing the electron beam to draw wide in areas where white is dominant. When bowing occurs, the sides of the television screen will appear wavy, or bowed. Bowing can also occur when large amounts of pure white text appear on the screen. The problem is only temporary and goes away once a darker color is displayed.

The "blotchiness" that accompanies all white backgrounds is rarer, but worth noting due to its severity. Sometimes, the large amount of electrons bombarding the screen will cause the metal shadow mask to literally warp, causing the middle sections of the screen (which get the hottest) to become muddied. Newer televisions can avoid most of this problem.

How To Avoid Problems
As a general rule of thumb, avoid large areas of bright color. Keeping your white backgrounds to 90% brightness is advisable, although going a little lower than that certainly can't hurt. Computer users may also appreciate a toned-down background; bright white, while not damaging to computer monitors, can be painful to view.

Color Consideration #2 - Sufficient Luminance Variation

When the technology to create color television became widely available in the early '50s, the larger question was how a color television signal could be broadcast in such a way that black and white televisions could decode it into a black and white signal.

While several standards were considered, the NTSC (National Television Standards Committee) Standard of 1953 was adopted because it managed to encode a "backward-compatible" color TV signal that needed no more bandwidth than a standard black and white signal. The way in which this was accomplished, while ingenious, created inherent limitations for the medium, many of which are apparent today when viewing Web pages on a television.

Constructing Color Signals
The color television video signal created by the NTSC is actually made up of two different parts, the luminance information (Y) and the chrominance information (U&V). A black and white television displays only the luminance signal, while a color television displays both luminance and chrominance. Understanding the interactions between luminance and chrominance is crucial to understanding the limitations of color television.

Luminance
The Y, or luminance value, is actually a "weighted average" of the R,G and B values for a given color. The human eye perceives green as being brighter than it really is, and blue much less bright. By constructing a luminance signal that is biased toward certain colors, a brightness signal that approximates human color perception can be created.

The equation that is used when encoding the luminance signal is:

.3R + .59G + .11B

This means that the green component is given the most weight and the blue the least when determining the luminance of a pixel. Thus, green and red objects will appear brighter than blue objects, just as in the human eye.

Chrominance
While sending an accurate luminance signal seemed complex, the real feat of modern television was discovering how to embed color information into the TV signal in such a way that no extra bandwidth was needed, and so that black and white televisions could still interpret the signal.

A complex television signal is actually made up of many simple signals added together. The more complex or higher quality the signal, the more of those simple signals are needed to represent it. The number and range of these simple signals that a broadcaster is allowed to use is referred to as "bandwidth". The more bandwidth a signal is allotted, the more complex it can be, and thus, the more information it can convey.

While television signals are broadcast as radio waves, a TV signal is actually very different from the signal sent to a radio. Television signals are carrying information about individual scan lines, while radio signals are not. Since one scan line usually does not differ greatly from the next, there is a great regularity to television signals.

Back in the 1930s, researchers discovered that there was a good deal of unused bandwidth amid all the regularity. This unused space was a perfect place to insert the color information. Thus the luminance (brightness) and chrominance (color) information were combined into the same signal, with the luminance signal being given much more bandwidth than the chrominance signal. Special filters inside of color televisions could decode the composite signal, and black and white televisions would simply ignore it.

The Problem
As a television's electron beams travel left to right, these beams must make very rapid transitions among millions of possible colors and brightnesses. When these transitions are mainly changes in luminance, the beam can draw them with no problem, because of the high bandwidth of the luminance information in the TV signal. When the transitions are mainly changes in color, however, the relatively low-bandwidth chrominance information causes the beam to draw sloppier transitions on the screen. Thus, the edges around text and images become blurred.

How To Avoid Problems
In order to keep Web pages crisp on television, text and background combinations should differ in their luminance value, not just their color. Because it's difficult to figure "Y" values in your head, we have a ColorPicker tool on this Web site to help you choose appropriate combinations. You may wish to read the instructions in order to understand this tool better.

Color Consideration #3 - Highly Saturated Colors

"Saturation", a term derived from the HSB color model, refers to how "pure" or "rich" a color appears.

Before color information can be sent through the air as part of a television signal, it must be represented electrically as a wave. A color's saturation is represented as the amplitude (height) of that wave. The more saturated a color is, the greater its amplitude will be.

The Problem
By themselves, saturated colors are no problem on a television, and display properly. Problems arise, however, when a television attempts to transition from displaying a fully saturated color to something else. When displaying text, for example, a television would have to make many such transitions around the letters.

Due to the way in which the TV signal is constructed, the transition to and from saturated colors is difficult. For example, look at the text and images below. The first image represents a transition from one unsaturated color to another; the second, a transition between two fully saturated colors.