Guidelines for Using Color Effectively
CS 252, Winter 2000
The guidelines presented here are based on a variety of
as well as practical experimentation with user interfaces. Each guideline
is presented with an explanation and a specific example.
Specific recommendations for combining colors,
based on user tests, are available as a separate document.
Guidelines based on physiology
Adapted from Gerald M. Murch, 1984, "Physiological Principles for the
Effective Use of Color," IEEE Computer Graphics and
Applications, Nov 1984, pp. 49-54.
(1) Avoid the simultaneous display of highly saturated, spectrally
- Explanation: Frequent refocusing causes visual fatigue.
Don't use reds with blues, or yellows with purples, unless one or
more are desaturated.
Reds/oranges/yellows/greens can be viewed without refocusing, but the
combination of cyans/blues with reds is fatiguing.
(2) Pure blue should be avoided for text, thin lines, and small shapes.
The eyes can't handle detailed, sharp vision of the shorter wavelengths.
Although blue is perceived well at periphery of vision, it isn't at the
center of vision.
- Example: Using blue for an item that must be focussed
on works against the eye. For the same reason, blue makes an
excellent background color.
(3) Avoid adjacent colors that differ only in the amount of blue.
The short wavelengths don't contribute to the perception of brightness,
which is what defines edges. Therefore, edges differing only in
the amount of blue will appear fuzzy.
Adjacent objects that are colored cyan and red will show up better
than cyan/blue, cyan/green, or red/magenta combinations.
(4) Older operators need higher brightness levels to distinguish
The eye loses both sensitivity and transparency as aging progresses.
This makes it harder to distinguish among colors unless they are
If your users will include people over 30 or 35, dark olive green
and navy might not be distinguished, while medium green and blue will
(5) Colors change in appearance as the ambient light level changes.
Colors appear differently in different lighting environment, due to
increase or decrease in contrast, or to shifts in the eyes' sensitivity
Use colors that are distinct enough to be visible in a variety of
lighting conditions, and test the interface under a range of conditions.
(6) The magnitude of a detectable change in color varies across the
- Explanation: Cone sensitivities are variable.
Small changes in extreme reds and purples are harder to
detect than same-size changes in yellows and blue-greens.
Stronger changes will be needed in order to be discernible.
- Example: If three shades of red and three shades
of yellow are needed, the reds much change in a more extreme
way in order to be perceived as "similar" to the yellows.
(7) It is difficult to focus upon edges created by color alone.
- Explanation: Some difference in brightness is needed for
- Example: Instead of making two adjacent areas bright
green and bright red, make one of the colors dim.
(8) Avoid red and green in the periphery of large-scale displays.
- Explanation: The retinal periphery is insensitive to
reds and greens.
- Example: Use a blue component in the color of objects
that need to be "found" or "tracked" at the edge of the screen.
(9) Opponent colors go well together.
Opponent colors that are across the color space from each other
- i.e., across the color wheel for subtractive color, or across the
color cube for additive color - are easier perceptually.
- Example: For subtractive colors, like paint, red/green,
blue/orange, or purple/yellow make good combinations, as opposed
to red/yellow and blue/green. For additive colors, like computer
displays, the pleasing combinations are red/cyan, blue/yellow, and
green/magenta, while red/blue or red/green are less harmonious.
(10) For color-deficient observers, avoid single-color distinctions.
A palette where just one color varies - while the other two are
constant - will cause problems from people with color perception
anomalies. Color mixtures should differ by a change in at least two
channels. Also, subtle differences in color should be used with
caution, since a reduced sensitivity to brightness typically
accompanies color deficiencies.
Varying shades of red are not a good choice for supporting users
with possible problems; instead, the colors should move from red
through orange to yellow as well as changing in brightness/saturation.
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