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.
You can diminish the simultaneous-contrast effect by separating areas of complementary colors with black, gray, or white outlines.
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.
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.
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.
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.
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.”
Founder, Publisher, and Editor in Chief of UXmatters
Silicon Valley, California, USA
With more than 20 years working in User Experience at companies such as Google, Cisco, WebEx, Apple, and many startups, Pabini now provides UX strategy and design consulting services through her Silicon Valley company, Strategic UX. Her past UX leadership roles include Head of UX for Sales & Marketing IT at Intel, Senior Director of UX and Design at Apttus, Principal UX Architect at BMC Software, VP of User Experience at scanR, and Manager of User Experience at WebEx. Pabini has led UX strategy, design, and user research for Web, mobile, and desktop applications for consumers, small businesses, and enterprises, in diverse product domains. Working collaboratively with business executives, multidisciplinary product teams, and UX teams, she has envisioned and realized holistic UX design solutions for innovative, award-winning products that delighted users, achieved success in the marketplace, and delivered business value. As a UX leader, she has facilitated conceptual modeling and ideation sessions; written user stories; prioritized product and usability requirements; established corporate design frameworks, standards, and guidelines; and integrated lean UX activities into agile development processes. Pabini is a strategic thinker, and the diversity of her experience enables her to synthesize innovative solutions for challenging strategy and design problems. She is passionate about creating great user experiences that meet users’ needs and get business results. A thought leader in the UX community, Pabini was a Founding Director of the Interaction Design Association (IxDA). Read More