Applying Color Theory to Digital Displays :: UXmatters (2024)

Design

16 Comments

This article is Part III of my series “Color Theory for Digital Displays.” It describes how you can apply color theory to application program user interfaces and Web pages and provides many guidelines for the effective use of color.

Ensuring the Readability of Text Through Contrast

For backgrounds behind text, use solid, contrasting colors, and avoid the use of textures and patterns, which can make letterforms difficult to distinguish or even illegible. Choose combinations of text color and background color with care. Value contrast between body text and its background color should be a minimum of about eighty percent.

Contrast with a White Background

Black text on a white background provides maximal value contrast and, therefore, optimal readability for body text. The contrast between charcoal gray (#333333) text and a white background is about eighty percent—thus giving minimally good value contrast.

The following dark colors provide good to excellent contrast and legibility for text on a white background:

Contrast with a Black or Dark Background

On a black background, the high-chroma colors yellow (#FFFF00), green (#00FF00), cyan (#00FFFF), and magenta (#FF00FF) provide the best contrast. While white text on a black background provides very high value contrast, it is less readable and causes greater eye fatigue than black text on a white background. All light-colored text on dark backgrounds causes eye fatigue. Generally, reserve the use of light colors on dark backgrounds for small amounts of bold text—for example, headings, labels and links in navigation bars and menus, button labels, or pull-quotes—and make sure that the font size is large enough to ensure readability.

The following high-chroma colors provide very good contrast and legibility for text on a black background:

The Problem With Blue

Because only two percent of all retinal cones—the photoreceptors that provide color vision—are blue-sensitive cones and the eye brings blue into focus in front of rather than on the retina, visual acuity for the blue range of the spectrum is poor and it decreases with age. User performance in symbol identification is poorer with blue symbols than with symbols of any other color. Therefore, avoid using dark or highly saturated shades of blue for text or other elements consisting of fine lines on a black or other dark background. Also, avoid text or symbols consisting of fine lines in highly saturated blue hues on a white or other light background. Text in desaturated blue hues is adequately legible on light backgrounds. Blue is a good background color.

Contrast and Legibility

To provide the best legibility, ensure that text contrasts adequately with its background in both hue and value. When there is insufficient contrast between the hue or value of text and its background color, the text appears blurred or has a halo effect around it, making it difficult to read and resulting in eye strain. Text that is in a color that contrasts well with an achromatic background of black, gray, or white or black or white text on a high-contrast, color background generally provides better legibility than when both text and background are in different chromatic colors—unless the two colors contrast greatly in both hue and value.

The following color combinations provide good contrast and legibility:

Avoid using gray for text or symbols consisting of fine lines on a color background, because a successive-contrast effect causes them to take on the hue of their background color’s complement. All Web-safe grays are too dark to serve as effective background colors for black body text. However, the non-Web-safe light gray (#EFEFEF) makes a good background color for black text. White text contrasts adequately with a charcoal gray (#333333) background.

The following color combinations demonstrate various degrees of contrast and legibility, ranging from excellent to much too little contrast:

Tip—If the contrast is insufficient for legibility, you can select the text to read it.

Highlighting Text

Use high-contrast colors for small amounts of text that you want to emphasize strongly—that is, either a high-chroma color on a dark or light background, or a dark color on a light or high-chroma background. The best color combinations for highlighting information are as follows:

Text and the Simultaneous-Contrast Effect

The least legible combinations of colors for text and background are those that cause a strong simultaneous-contrast effect—particularly green text on a red background, red text on a green background, red text on a blue background, and other similar color combinations, as shown in the following examples. When a simultaneous-contrast effect occurs between the color of text and its background color, the text appears to vibrate, making it very difficult to read and causing fatigue and eye strain.

Combinations of colors that are far apart on the visible spectrum require users to constantly refocus their eyes, resulting in visual discomfort and, possibly, fatigue.

Enhancing the User Experience With Color

Apply the following design principles regarding the use of color to enhance the user experience of an application program or Web site:

• Use color consistently throughout.

Before designing an application or Web site, establish design guidelines, including conventions for the use of color. These conventions should dictate all purposes for which you use color, what colors apply to specific types of elements, and the meanings associated with specific colors. Use these color conventions consistently throughout an application or Web site. Once users interpret the meanings of colors, they will apply those meanings wherever they encounter the colors. If your use of color is inconsistent, users will be unable to build a mental model of color usage or to reliably interpret the meanings of specific colors.

• Use color both to support users’ tasks and for branding.

Ideally, to ensure maximal user performance in applications, it is best to use color only to support users’ tasks and decision-making. Because color is such a salient, powerful visual cue, its arbitrary use for aesthetic purposes can actually degrade user performance. However, on the Web, the use of color for branding purposes is important. On the Web, color branding provides a sense of place, which is very important to user orientation and helps prevent users from becoming lost in hyperspace. Try to restrict the use of color that is solely for branding to certain areas of Web pages—for example, a logo in the upper-left corner of a page, a header, or a footer. In the main content area of a Web page, in a Web form, or in an interactive Web application, the use of color should be task related. In such contexts, use color judiciously—only where it provides real value and enhances user performance. Excessive use of color reduces its effectiveness.

• Use color to increase user satisfaction.

Use color to enhance the aesthetic appeal of an application or Web site—even if the use of color does not improve user performance. Most people prefer color rather than achromatic Web pages, and on the Web, user satisfaction is just as important as user performance. However, ensure that the use of color is not visually distracting, impairing usability and reducing users’ ability to complete their tasks successfully.

Using Color for Identification, Grouping, and Emphasis

There are many ways in which you can use color to help identify objects, communicate structure, guide the attention of users, or indicate status. Use color to do the following:

• Identify groups of related Web pages.

You can use different color schemes to identify groups of related Web pages, communicating a Web site’s high-level information architecture and making it easy for users to quickly identify the part of a Web site to which a page belongs, as shown in Figure 1. In this example, each section of the Web site has a different color scheme, so when a user points to the Process tab, it changes to that section’s color.

• Distinguish specific Web pages.

You can use a different color scheme to distinguish specific Web pages. Doing so provides a sense of place and, thus, can help to minimize user confusion and errors. For example, a purchasing process funnel might have a different color scheme from the rest of an eCommerce site.

• Relate visual elements or controls.

You can show the relationship between visual elements or controls of a specific type by consistently rendering them in the same color. For example, in Figure 2, all elements of a single type such as tabs, buttons, list items, and icons have the same visual treatment, but their appearance is distinct from elements of other types. Color-coding is the most effective means of communicating a relationship between elements that are spatially distant from one another.

You can also use monochromatic colors—that is, various hues of the same color—closely related analogous colors, or other low-contrast colors to express similarity or close relationships between visual elements—for example, to represent different states of the same element as in Figure 2. In this example, the items in the list appear in different analogous colors, depending on whether they’re collapsed or expanded.

• Demarcate areas of a window or Web page.

You can use background color to demarcate different areas of a window or Web page, thereby communicating its logical structure, differentiating its different types of content, and improving its scanability and readability, as Figure 2 shows. You can also use color to set off the navigation bar on a Web page as on this Web site.

• Group controls or information in a window or on a Web page.

You can use background color to set off groups of related controls or related items of information that are adjacent to one another. The advantage of using color for this purpose—rather than white space, borders, or some other visual cue—is that color does not consume any additional screen real estate.

For example, the main frame of a Web application page shown in Figure 3 demonstrates the use of a pale Wedgewood blue (#99CCFF) background to set off a page title bar. A very light, non-Web-safe shade of gray (#EFEFEF) distinguishes control bars at both the top and bottom of the page. Providing structure to the table, pale Wedgewood blue sets off the table header, silver (#CCCCCC) highlights the column by which the table is currently sorted—the Time column—white dividing lines demarcate hours, and rows of alternating shades of lighter grays (#EFEFEF and #E7E3E7) make it easier to track the rows in the table visually. The dominant color, pale Wedgewood blue, highlights both the page title and the headers in the table. The color with the highest chroma level is the green of the status indicators for in-progress meetings, calling the attention of users to this important information.

• Highlight important task-related information.

You can use a high-contrast accent color to emphasize and draw users’ attention to important task-related information in a window or on a Web page—for example, when prompting users regarding essential interactions. When users’ tasks depend on their ability to quickly and reliably distinguish important information, color is the most effective visual cue for highlighting such information. However, excessive use of this technique reduces its effectiveness.

On a form page, use red (#FF0000)—or another intense, warm hue containing a lot of red—to highlight the labels of any fields whose values are in error.

In the example shown in Figure 4, the dominant color, teal (#348CB4), calls attention to the page title bar, which defines the current task. Asterisks indicating required information are in the highlight color burgundy (#983132), as are error message text and the highlighted label for a value that is in error.

You can use color to distinguish a field’s label from its data. When a user is filling out a form, highlighted field labels help guide the user through the form. However, when displaying uneditable data, highlighting the data in fields rather than their labels helps focus users’ attention on the data.

Color can also help communicate the logical structure of task-related information. For example, you can use color to highlight sequences of steps in instructions or descriptions of processes.

• Help users to find information on content-rich Web pages.

Color provides the most effective means of highlighting text, symbols, or other elements on a Web page in order to support user tasks that involve browsing or scanning for information, as shown in Figure 5.

The greater the density of information on a page and the greater the distance between highlighted visual elements, the more this type of color-coding improves user performance. Because color is such an effective visual cue, its use can also reduce eye scanning movements and, thus, visual fatigue. For example, you can help users to find information more quickly and easily by using color to highlight all section headings or by placing all headings on a background of the same color, as on this site. Additionally, cross-reference arrows, bullets, and table-heading backgrounds also appear in the highlight color. Differences in size or shape also characterize most of these elements, but color is the most salient visual cue. Using redundant visual cues—such as color and size or shape—enhances user performance.

• Represent hierarchical information.

Color is useful in representing hierarchy in either a navigation bar or in content—through section headings. In the navigation bar shown in Figure 6, the use of light cobalt blue (#0066CC) tree-view controls lets users display groups of links, and light chartreuse (#99FF00) group labels provide a hierarchical structure. The links are in white (#FFFFFF). This navigation bar is for a Web application, which provides no browseable content. Therefore, it was not necessary to use the standard colors for different link states.

• Indicate link states.

Use link colors consistently throughout a Web application, Web site, subsite, or group of related Web pages. To avoid confusing users about whether they have previously viewed specific pages on a content Web site, indicate visited links. The default link-state colors are as follows:

• Within content, links should be in the default blue (#0000FF) or some other blue hue. Reserve this link color only for links.
• Links over which a user is hovering—that is, to which a user is currently pointing—should be in the default red (#FF0000) or some other red hue.
• Active links that a user is currently clicking should also be in the default red (#FF0000) or some other red hue.
• Visited links should be in the Internet Explorer default color, bright violet (#9900FF); the Netscape Navigator default color, purple (#990099); or some other violet hue. Hues with lower chroma levels are ideal for visited links.

• Visually distinguish the linked elements, or hot spots, in an image map.

The following guidelines may apply to either true image maps or simulated image maps—which are multipart images that comprise rectangular image slices residing in the cells of a table:

• Use a distinctive color for each linked element in an image map.
• Use color to group related elements in an image map.
• When a user points to a linked image in a simulated image map, display a border in the Web site’s standard link color to highlight it.
• When a user points to a linked image in a simulated image map, change its color, creating a rollover effect.

• Color code data and provide legends.

It is easier for users to interpret color-coded data than data that uses other coding techniques such as shape or size. When expressing data using color-coding, try to limit the number of different colors to a maximum of seven. Many users cannot reliably distinguish more than four or five different colors—especially when the colors are not in close proximity to one another—or remember what they mean. Therefore, keep color sets as small as the data permits—preferably comprising four or fewer colors.

To ensure that users can distinguish colors and remember color-coding, all colors should be sufficiently different from one another and range across the visible spectrum. Highly saturated colors are the easiest to distinguish. The most common color confusions are orange (#FF9900) with red (#FF0000) and yellow (#FFFF00) with orange. Colors that are close together on the visible spectrum become more difficult to distinguish as the distance between color-coded elements increases or the size of such elements decreases. Small elements tend to appear desaturated and surrounding colors may cause an apparent shift in their hue.

Use saturated, high-chroma colors to emphasize data; desaturated, low-chroma colors to de-emphasize data. When using color to express a continuum, use shorter wavelength, low-chroma colors such as violet (#9933FF) or blue (#0000FF) to represent the low end of the continuum; longer wavelength, high-chroma colors such as red (#FF0000) or orange (#FF9900), the high end.

If color-coding is arbitrary—that is, neither uses common color associations nor reflects the color of familiar, real-world objects—and particularly if it uses more than six or eight colors, provide a clear legend in a prominent location to assist users in interpreting color-coded data, as shown in Figure 7. Throughout the data, use only one color to represent a particular thing, use various values or chromas of the same color to represent similar things, and assign each color only a single meaning.

• Visually distinguish the icons on a toolbar.

You can use color to visually distinguish and help users identify the icons on a toolbar. Color is a more effective means of distinguishing icons than either shape or size, and can reduce the mental exertion that icon identification requires. For example, the colors of icons on this Web-application toolbar help users to distinguish them from one another.

Using Color Associations in Expressing State Information

You can use people’s color associations to communicate state information effectively. Your use of color should be consistent with both job-related and cultural color associations. Using common color associations helps users to interpret color-coding correctly. For example, most Americans associate the states shown in Table 1 with certain colors.

However, color associations may differ in various cultures, so provide clarifying text, redundant coding, or a legend to ensure that an international audience can correctly interpret color-coded state information. When developing an application or Web site for a particular culture, you should learn about its color associations before using color to indicate state information.

Applying arbitrary meanings to color-coding that conflict with common color associations causes confusion. Use high-contrast, high-chroma colors to express state information.

Indicating Availability Using Color or Value

You can use differences in color or value to indicate the availability or unavailability of links or controls.

For Links on Navigation Bars

The same links or buttons should appear on the navigation bar or menus on either all pages on a Web site or all pages in a major subsection of a large site—and should be in a consistent location. However, it should not be possible for a user to click a link or button that would reload the current Web page or scroll to the beginning of a section that a user is already viewing. You can indicate that such an item on a navigation bar or menu is unavailable by removing any underlining from its label or by changing its color to a pale, low-chroma hue; a light shade of gray, as shown in Figure 9; or a different color that contrasts strongly with the color of an available link or button.

If a navigation bar comprises rollover buttons, neither the color nor the appearance of the link or button for the current page or section should change when a user points to it. Alternatively, you can remove any button appearance and change the link or button’s background color to that of the page’s content or another color indicating selection, giving its label the appearance of an indicator of the current page or section rather than a link.

For Controls

In applications, controls that are not currently available appear dimmed—that is, are rendered in shades of gray, tints, or neutralized colors. Also, all windows except the active window appear dimmed. The following examples show the dimmed appearance of various types of controls and an inactive window:

• Window controls appear dimmed when they are unavailable, as shown in Figure 10.

• Commands in menus appear dimmed when they are unavailable. Figure 11 shows a menu in which a number of commands appear dimmed.

• Icons on toolbars appear dimmed when they are unavailable. Several icons appear dimmed in the examples shown in Figure 12.

• Custom controls appear dimmed when they are unavailable, as shown in Figure 13.

• Buttons on Web pages, on panels, and in dialog boxes appear dimmed when they are unavailable. Figure 14 shows buttons that appear dimmed.

• Controls on Web pages, in dialog boxes, and on panels appear dimmed when they are unavailable. Figure 15 shows drop-down menus, a text box, and a checkbox that appear dimmed.

• Inactive windows—that is, windows that are not currently accepting user input—appear dimmed, as shown in Figure 16.

In Figure 16, the title bar and menu bar of an inactive window appear dimmed, while the blue title bar and black menu titles of the window in Figure 17 indicate that it is an active window. The Forward button in the active window also appears dimmed, because it is not currently available.

Read more:

• Color Theory for Digital Displays: A Quick Reference: Part I
• Color Theory for Digital Displays: A Quick Reference: Part II
• Ensuring Accessibility for People With Color-Deficient Vision

Bibliography

Galitz, Wibert O. User-Interface Screen Design. Boston: QED Publishing Group, 1993.

Mayhew, Deborah J. Principles and Guidelines in Software User Interface Design. Englewood Cliffs, NJ: Prentice Hall, 1992.

ThinkQuest. Psychological Effects of Color Perception. Retrieved July 12, 2003 from http://library.thinkquest.org/50065/psych/effects.html. No longer available.