Color Theory for Digital Displays: A Quick Reference: Part II
Published: January 23, 2006
This article is Part II of a quick reference on color theory for digital displays. It is the second in a series of articles about the use of color in application program user interfaces and on Web sites.
Our perception of hues, values, and chroma levels depends upon their interaction with adjacent hues, values, and chromas, which can result in color-contrast, value-contrast, and chroma-contrast effects, respectively.
While you can achieve good design by using any color-contrast, value-contrast, or chroma-contrast effect, unintentional effects caused by the interaction of contrasting colors can be visually distracting and can even diminish the readability of the text in a user interface or on a Web page.
The interaction of hues results in the following color-contrast effects, which affect our perception of hue, depth, and transparency:
- simultaneous contrast—When complementary colors are immediately adjacent to one another, they visually influence each other and their chroma levels appear dramatically intensified. See Figure 22 for an example
- successive contrast—When surrounded by an intense hue, a weaker hue takes on the hue of the surrounding hue’s complement, as shown in Figures 23–25.
- interaction with the background color—The colors of visual elements interact with their background colors. The degree to which they do so depends on the size of the elements, as you can see in Figure 26.
- interaction with surrounding colors—The colors of visual elements interact with their surrounding colors. Again, the degree to which they do so depends on the relative sizes of the elements, as you can see in Figure 27.
- a Bezold effect—When distributed evenly, strong colors mix optically, as Figures 28 and 29 show.
- area and the visual impact of color—A large area of a dark or very bright color can visually overpower a light-colored area of about the same size, as Figure 30 shows.
- an illusion of depth—Warm, intense, or light hues appear to advance, while cool, neutralized, or dark hues appear to recede. Therefore, cool hues, with low levels of chroma and value can suggest spatial depth, as Figures 31 and 32 demonstrate.
- a transparency effect—Overlapping areas can appear to be transparent if their colors are mixtures of equal parts of the colors that overlap, as shown in Figure 33.
Figure 22—A simultaneous contrast effect
You can diminish the simultaneous-contrast effect by separating areas of complementary colors with black, gray, or white outlines.
Figure 23—A successive contrast effect
Figure 24—Another successive contrast effect
Figure 25—Another example of the successive contrast effect
Figure 26—Interaction with the hue of the background color
Figure 27—Interaction with surrounding colors
Figure 28—A Bezold effect
Figure 29—Another Bezold effect
Figure 30—Area and the visual impact of color
Figure 31—Hue creates an illusion of depth
Figure 32—Another illusion of depth
Figure 33—A transparency effect
The interaction of values results in the following value-contrast effects, which affect our perception of value, depth, and size:
- interaction with the values of background colors—The values of background colors affect our perception of a color’s value. A color looks lighter on a dark background; darker on a light background, as Figures 34–36 show.
- illusion of depth—High-value, light colors, such as white, appear to advance, while low-value, dark colors, such as black, appear to recede. Therefore, low levels of value can suggest spatial depth. Figure 37 illustrates this illusion.
- perception of size—The size of an area of color appears to change, depending on its value contrast with its background color, as Figures 38 and 39 show.
Figure 34—The effect of interaction with the value of the background color
Figure 35—An example of interaction with the value of the background color
Figure 36—Another example of interaction with the value of the background color
Figure 37—Value and the illusion of depth
Figure 38—Value and the perception of size
Figure 39—Another example of value and the perception of size
The interaction of the chroma levels of adjacent colors results in the following chroma-contrast effects, which affect our perception of hue and chroma:
- interaction with the chroma levels of background colors—One hue appears to be two different hues on different high-chroma background colors, as Figure 40 shows.
- interaction with the values and chromas of background colors—The values and chromas of background colors affect our perception of a color’s value and chroma. A color looks brighter on a neutral background; duller on a brilliant background.
Figure 40—Interaction with the chroma levels of the background colors
Figure 41—Interaction with the values and chroma levels of the background colors
In any visual composition, the dominant areas of color are those with attributes that may include a combination of the greatest contrast in hue, value, or chroma with surrounding areas of color; the largest area; and the most prominent placement, as follows:
- areas with the greatest contrast in hue—Areas of strongly contrasting hues are visually dominant, regardless of their size and placement, as Figure 42 shows.
- areas with the greatest contrast in value—Areas with strongly contrasting values appear dominant, regardless of their size and placement. Where the background is a shade, a tint draws one’s attention; where a tint, a shade is the accent color. Figure 43 shows how contrast in value creates color dominance.
- areas with the greatest contrast in chroma—Areas with strongly contrasting chroma levels demand visual attention, regardless of their size and placement, as Figure 44 shows.
- the largest area—The color that occupies the largest area is visually dominant, as Figure 45 shows.
- the most prominently placed area—The area of color with the most prominent placement appears dominant. Placing an area of color at or near the center of a composition draws attention to it; as does placing one in a composition’s upper-left corner, because in the Western world, people tend to look there first. Figure 46 shows how prominent placement creates color dominance.
All of the attributes that contribute to the dominance of an area of color interact with one another.
Figure 42—Color dominance from contrast in hue
Figure 43—Color dominance from contrast in value
Figure 44—Color dominance from contrast in chroma level
Figure 45—Color dominance of the largest area
Figure 46—Color dominance from prominent placement
To achieve balance in a visual composition, you can adjust the levels of contrast between the hues, values, and chromas of its various areas of color. You can also adjust the size and placement of areas of color to achieve balance among them. When trying to create balance in a color scheme, consider the following:
- contrast between figure and ground—High-contrast visual elements stand out against their background colors, while low-contrast visual elements fade into their backgrounds. You can use high contrast to call attention to important elements; low contrast to make less important elements less noticeable. Figure 47 shows adequate and inadequate contrast between figure and ground.
- hue contrast—Complementary colors provide good contrast between figure and ground, while monochromatic and analogous colors do not. In a visual composition that includes both warm and cool hues, warm hues appear to advance and are, therefore, best for figures, while cool hues appear to recede, so are best for backgrounds. Figure 48 shows adequate and inadequate hue contrast.
- value contrast—This is the most important dimension of color contrast between figures and their backgrounds. Light hues on a black or very dark background or dark hues on a white or very light background provide excellent contrast between figure and ground, while colors with mid-range values do not. In a visual composition that includes both light and dark values, light colors appear to advance, while dark colors appear to recede. However, dark colors—either chromatic or achromatic—are generally best for text and figures, while light colors are best for backgrounds. Figure 49 shows adequate and inadequate value contrast.
- chroma contrast—High-contrast chroma levels provide excellent contrast between figure and ground, while mid-range chroma levels do not. In a visual composition that includes both high-chroma and low-chroma colors, brilliant or deep colors appear to advance and are, therefore, best for figures, while neutral or achromatic colors appear to recede, so are best for backgrounds. Figure 50 shows adequate and inadequate contrast in chroma levels.
- value and small shapes—Depending on the values of small shapes, you may need to adjust their size slightly to ensure that they are both sufficiently visible and easily recognizable. Shapes in lighter colors should be slightly larger than the same shapes in darker colors. Figure 51 illustrates how adjusting the size of a small shape can compensate for low value contrast.
- value and large areas—A large area of a dark color appears very dominant, while a large area of a light color appears less dominant. Areas of lighter colors tend to appear subordinate to areas of darker colors. Figures 52 and 53 illustrate how value affects the dominance of large areas.
- contrast effects and proportion—The proportions of adjacent areas of contrasting colors play a role in determining how the colors interact with one another and, therefore, determine the impact of contrast effects. Figure 54 shows how proportion affects contrast effects.
Figure 47—Contrast between figure and ground
Figure 48—Hue contrast
Figure 49—Value contrast
Figure 50—Chroma contrast
Figure 51—Value and small shapes
Figure 52—Value and large areas
Figure 53—Another example of value and large areas
Figure 54—Proportion and contrast effects
For information about additive color synthesis and its colors, color temperature, color properties, color harmony, and color contrast, see “Color Theory for Digital Displays: A Quick Reference: Part I.”
- Color Theory for Digital Displays: A Quick Reference: Part I
- Applying Color Theory to Digital Displays
- Ensuring Accessibility for People With Color-Deficient Vision
Albers, Josef. Interaction of Color. Revised ed. New Haven, CT: Yale University Press, 1975.
Brewer, Cynthia A. “Color Use Guidelines for Data Representation.” Department of Geography, Pennsylvania State University. Retrieved July 3, 2003.
Encyclopædia Britannica CD 99—Multimedia Edition. Chicago: Encyclopædia Britannica, July 7, 1998.
Galitz, Wilbert O. User-Interface Screen Design. Boston: QED Publishing Group, 1993.
Garo, Laurie A. B. “Color Theory.” Virtual Geography Department. Updated June 21, 1999; retrieved July 3, 2003.
GretagMacbeth. “Munsell: The Universal Language of Color.” Retrieved July 10, 2003.
Grumbacher. Color Compass. New York: M. Grumbacher, 1972.
Itten, Johannes. The Art of Color: The Subjective Experience and Objective Rationale of Color. Revised ed. New York: John Wiley & Sons, Inc., 1974.
Kentie, Peter. Web Graphics Tools and Techniques. Berkeley, CA: Peachpit Press, 1997.
Webster, Timothy. Web Designer’s Guide to Graphics: PNG, GIF, & JPEG. Indianapolis: Hayden Books, 1997.