CS 552, Spring 1998
General Guidelines Based on Color Studies and Practice
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.