Guidelines for Using Color Effectively
CS 252, Winter 2000


The guidelines presented here are based on a variety of color studies 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 extreme colors.


(2) Pure blue should be avoided for text, thin lines, and small shapes.


(3) Avoid adjacent colors that differ only in the amount of blue.


(4) Older operators need higher brightness levels to distinguish colors.


(5) Colors change in appearance as the ambient light level changes.


(6) The magnitude of a detectable change in color varies across the spectrum.


(7) It is difficult to focus upon edges created by color alone.


(8) Avoid red and green in the periphery of large-scale displays.


(9) Opponent colors go well together.


(10) For color-deficient observers, avoid single-color distinctions.


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.


(2) Be sure the duration of an image is long enough to allow the perception of color.


(3) Alternating colors too quickly will cause them to be perceived as a single, fused color.


(4) Display colors should be selected experimentally, not mathematically.


(5) To reduce the effects of flicker, use dark colors for backgrounds, large expanses of color, and dense text.


(6) Put light colors next to dark colors to remain compatible with monochrome displays and to adapt to the constraints of projection technology.


Guidelines based on psycho-physical effects

(1) Vary color along more than one dimension to maximize discrimination.


(2) Avoid subtle distinctions in color codes.


(3) Juxtapose different colors to be compared, particularly similar ones.


(4) As the number of colors increases, increase the size of small images.


(5) Font and line width are at least as important as color in establishing legibility.


Guidelines based on cognitive effects

(1) Use color sparingly.


(2) Use the four "focal colors" to encode information that needs to be remembered.


(3) Minimize the amount of coding the user is expected to learn and re-learn.


(4) "False coding" will confuse and frustrate users.


(5) "Overloaded colors" will confuse and frustrate users.


(6) Color use must be meaningful and consistent to facilitate searching or tracking.


(7) Provide labels or legends with colors when the meaning is not obvious or when several meanings must be remembered.


(8) Use names, rather than numbers, to describe colors.


(9) Use redundant cues to augment color coding.


(10) Where possible, match hues with conditions or actions being represented.