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

(1) Avoid the simultaneous display of highly saturated, spectrally extreme colors.

• Explanation: Frequent refocusing causes visual fatigue. Don't use reds with blues, or yellows with purples, unless one or more are desaturated.
• Example: Reds/oranges/yellows/greens can be viewed without refocusing, but the combination of cyans/blues with reds is fatiguing.

• Explanation: 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.

• Explanation: 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.
• Example: Adjacent objects that are colored cyan and red will show up better than cyan/blue, cyan/green, or red/magenta combinations.

• Explanation: The eye loses both sensitivity and transparency as aging progresses. This makes it harder to distinguish among colors unless they are bright.
• Example: 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 be.

• Explanation: Colors appear differently in different lighting environment, due to increase or decrease in contrast, or to shifts in the eyes' sensitivity to color.
• Example: Use colors that are distinct enough to be visible in a variety of lighting conditions, and test the interface under a range of conditions.

• 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.

• Explanation: Some difference in brightness is needed for clear focusing.
• Example: Instead of making two adjacent areas bright green and bright red, make one of the colors dim.

• 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.

• Explanation: 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.

• Explanation: 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.
• Example: 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

• 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)

• 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.

• 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.

• 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.

• Explanation: Lighter colors and larger visual areas result in more flicker perception. Flicker is also more apparent in the visual periphery.
• 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.

• 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

• 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.

• Explanation: 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.
• Example: If only three or four colors are needed, they shouldn't be closely related, such as pale pink, pale orange, and pale purple.

• 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.

• Explanation: Larger-sized targets enhance detection and discrimination.
• Example: If you need seven color codes, the colored areas should be larger than in displays where only four colors are needed.

• 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

• 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., formulas, graphs).

• 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.

• 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.

• Explanation: Some colors (e.g., red/yellow/green) have emotional associations that should not have to be un-learned.
• Example: Avoid using red/yellow/green in arbitrary contexts, such as to identify voting patterns.

• Explanation: 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.
• Example: 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.

• Explanation: A poor choice of color can be worse than no color at all, actually slowing the time to search for or track an object.
• Example: 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 display.

• 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.

• Explanation: Don't force the user to memorize color names as well as codes. Keep color names short and use "standard" names where possible.
• Example: In legends and documentation, stick to one-word descriptors like red, orange, gold, yellow, and blue-green.

• Explanation: To compensate for variation among users, color memory, and other perceptual problems, vary shape, hatching, font, etc. in addition to color.
• Example: To represent different types of objects in diagrams, show one as dark green circles, another as yellow squares, etc.

• Explanation: Capitalizing on existing associations makes it easier for users to recognize color codes.
• Example: Use red for hot or high volume; blue for cold or low volume