CS 552, Spring 1998
General Guidelines Based on Color Studies and Practice
Guidelines based on computer display technology
(1) Where possible, use hardware-independent "standard" color values,
at least as a baseline RGB value that you will modify.
- Explanation: RGB values in themselves are not portable.
"Portable" platforms (such as the X Window System) provide
standard metasymbols which are interpreted
differently for different monitors.
- Example: To get a very dull cyan, it makes sense to start
with "standard" cyan and decrease the intensity, rather than
attempting to define static RGB values.
- Caveat: "The first law of analytical chemistry says the
analysis is no better than the sample. The second law says
that it's no better than the standard, either." (Ben Luberoff)
(2) Be sure the duration of an image is long enough to allow the
perception of color.
- Explanation: CRT technology limits the rate at which any
part of the screen is updated. If the duration of a color
is too short, it is not visible.
- Example: If the color is important (e.g., because it
codes information), don't have a quick flash rate. The
eye may see the object, but won't accurately perceive the
color if the flash rate is too quick.
(3) Alternating colors too quickly will cause them to be perceived as
a single, fused color.
- Explanation: This is the principle behind the use
of phosphor triads on CRTs. The eye can't adjust to the
quick change in wavelength, so the color is perceived as the
"sum" of the colors.
- Example: Changing and object quickly between red
and green will cause it to be perceived as yellow.
(4) Display colors should be selected experimentally, not
- Explanation: RGB values are linear in theory, but decidedly
non-linear in terms of how they're perceived. Logarithmic scaling may
be necessary in color ranges of low perceptual sensitivity (like blues)
- Example: If you need multiple shades of blue, it's not
enough to just "double" the RGB value - to the eye, they will look like
the same color.
(5) To reduce the effects of flicker, use dark colors for backgrounds,
large expanses of color, and dense text.
- Explanation: Lighter colors and larger visual areas result
in more flicker perception. Flicker is also more apparent in the
- Example: Using a pale green background will cause the
eye to be more distracted by apparent flickering than if a dark,
dull green background is used.
(6) Put light colors next to dark colors to remain compatible with
monochrome displays and to adapt to the constraints of projection
- Explanation: Even when monochrome displays need not be
supported, many presentation or projection tools are limited in
terms of their capability to display colors accurately.
Most manuals, documentation, and other publications will either
require monochrome, or reduce the scale of the image so much that
similar colors are blurred.
- Example: Make adjacent areas have as much contrast as
possible, so that the edges will be clear even when the image
is displayed on a monochrome CRT, projected on a screen, or
reduced for printing in a manual.
Guidelines based on psycho-physical effects
(1) Vary color along more than one dimension to maximize
- Explanation: It's hard to focus edges that vary only
in hue, so it's important to vary brightness and saturation as well.
Complementary colors also enhance discrimination.
- Example: Where colors are adjacent, don't choose two
colors that have the same brightness and saturation. Make one of
them duller so that the edge can be perceived better.
(2) Avoid subtle distinctions in color codes.
The difference between actual colors and their perceived
color means that a color may not be seen accurately, or
the user may see a color that isn't there. It's important
to make colors as distinct as possible, given the constraints
of the display topic.
If only three or four colors are needed, they shouldn't be
closely related, such as pale pink, pale orange, and pale
(3) Juxtapose different colors to be compared, particularly similar
- Explanation: It's harder to discriminate colors when
they are separated by another color, particularly when they are
widely separated. For the same reason, place related colors
near each other.
- Example: In a bar chart, make the bars touch each other,
rather than being separated by strips of the background color. Also,
group the blue and green bars near each other, rather than separating
them with red/yellow bars.
(4) As the number of colors increases, increase the size of small
Larger-sized targets enhance detection and discrimination.
If you need seven color codes, the colored areas should be larger
than in displays where only four colors are needed.
(5) Font and line width are at least as important as color in
- Explanation: The size or width of the colored area have
great influence on whether a color is perceived, and how sharp the
edges appear to be.
- Example: A color combination that is clearly visible for
thick lines, such as black on red, may not be perceived clearly when
the lines are thin.
Guidelines based on cognitive effects
(1) Use color sparingly.
- Explanation: Limitations on sensory input channels and
short-term memory make it difficult to keep track of more than five to
nine colors when color encodes meaning.
- Example: Keep to five or seven colors in a color-coded
image. Even fewer should be used for abstract representations (e.g.,
(2) Use the four "focal colors" to encode information that needs to
- Explanation: Red/green/blue/yellow are recognized well by all
cultures, and are easy to remember with accuracy.
- Example: Using red, yellow, and blue to represent project
ID will make it quicker to find color-tagged info than using orange,
purple, and brown.
(3) Minimize the amount of coding the user is
expected to learn and re-learn.
- Explanation: Be consistent in the use of color coding, so
the user only has to learn the code once. Where possible, choose
easily remembered colors and associations.
- Example: If several different displays are being used
to graph densities or intensities of different measurements, choose
a single color scheme. If oxygen density is shown with
bright yellow for highest density, and
progressively dimmer yellows shading to brown for the lowest densities,
carbon dioxide density might be shown with bright green for high
density, shading back to olive greens and ultimately brown.
(4) "False coding" will confuse and frustrate users.
Some colors (e.g., red/yellow/green) have emotional associations that
should not have to be un-learned.
Avoid using red/yellow/green in arbitrary contexts, such as to
identify voting patterns.
(5) "Overloaded colors" will confuse and frustrate users.
Like false coding, this puts a burden on the user, who must not only
learn the code, but that it means one thing in some contexts, and
something else in others.
If a color is being used to code some characteristic (e.g., project ID),
don't overload the same colors to encode budget status info as well.
(6) Color use must be meaningful and consistent to facilitate
searching or tracking.
A poor choice of color can be worse than no color at all, actually
slowing the time to search for or track an object.
Using red to mean "dense" on one display, "project ID" on a second,
and "budgeted amount" on a third can make it harder to find a
particular project's info or a budgetary amount than a monochrome
(7) Provide labels or legends with colors when the meaning is not
obvious or when several meanings must be remembered.
- Explanation: Don't rely on the accuracy of the user's
memory; provide an explanatory key that's easily available.
- Example: Add a "legend box" to color-coded displays. If
it occupies needed space, or isn't always needed (because the coding
scheme is simple), make it possible for the user to enable/disable
display of the legend.
(8) Use names, rather than numbers, to describe colors.
- Explanation: Don't force the user to memorize color names
as well as codes. Keep color names short and use "standard" names
- Example: In legends and documentation,
stick to one-word descriptors like red, orange, gold, yellow,
(9) Use redundant cues to augment color coding.
To compensate for variation among users, color memory, and other
perceptual problems, vary shape, hatching, font, etc. in addition to
To represent different types of objects in diagrams, show one as
dark green circles, another as yellow squares, etc.
(10) Where possible, match hues with conditions or actions being
Capitalizing on existing associations makes it easier for users to
recognize color codes.
Use red for hot or high volume; blue for cold or low volume