While this article is written on an introductory level, understanding
work will help you better grasp the material here.
The basic rules of avoiding color distortion on television are:
If you're not familiar with terms like "saturation", or "Y", this article
will explain them. If you'd rather see a "real-world" application of
these concepts, you may wish to use the "TV-Friendly" Color Picker
available on this site.
- 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.
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:
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.
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.
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.
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,
(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.
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
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.
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
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.
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
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.
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.
Hello World! What a nice day.
Hello World! What a nice day.
|In order for a television
to draw the "Hello World" text, the color signal
it receives will contain many color transitions like the one
above. Note that the transition between the two colors (the
part in the middle) is quite small.
between two saturated colors, however, is more pronounced,
and thus difficult to draw crisply. Since the signal is "sloppy",
the television will have a difficult time drawing rapid color
transitions. Thus, the edges of text become blurred.
How To Avoid Problems
Saturated colors can be very powerful in Web pages viewed
on computer monitors, but these same colors frequently blur
and distort when viewed on television. To avoid problems,
resist using any colors with saturations above 80%. Additionally,
beware of transitions from one 80% saturated color to another;
this can cause problems in some instances. When in doubt,
use the color tool available on our site.
While truly understanding color can take
years, it only takes a few minutes to learn how to avoid the
most severe problems when making your Web page. In fact, you
probably know most of it already. Turquoise text on a pink
background looks terrible on a computer monitor, and you shouldn't
be surprised that it looks even worse on a TV.
When choosing text and link colors, remember that you
want people to read your site, preferably without
permanent eye injury. By following the few rules outlined
in this article, and by spending a few minutes with our
visitors viewing your site on a television will thank you
for the color choices you make.