The Use of Color in User Interfaces

This post was updated February 13, 2013. Please refer to the new article, Good Design is Accessibility.
I just came off a 2.5-month engagement where the work was pure User Experience Design, no coding whatsoever on my part. The client, a well-known financial publishing corporation, was developing a new version of an old piece of software, and had begun to realize that the user experience was less than optimal. I was asked to come in, evaluate the product, and suggest things they could do to improve the UI, usability, information architecture, and aesthetics of the application because their clients could benefit significantly from a better experience.
I won’t get into the product itself, or what all of the problems were. I’ll write about the challenges of the engagement itself in another post. But this article focuses on one aspect of the recommendations I made, which saw its way into the final Design Recommendations document I left with the client at the end: how the use or misuse of color affects user interfaces. It seemed to be one of the most basic problems with the application and a pervasive one at that.

Choose an appropriate palette

Let’s start with choosing a color palette. Use of a palette, once selected, should be in accordance with basic rules of graphic design and color theory. Color choices and groupings require brand-minded, usability, and aesthetic decisions to be made about
  • perception and attention thresholds
  • color harmony / color dissonance
  • value and contrast comparisons
  • use of a color for a text element vs. background element, and
  • proximity of colored elements in relation to each other.
To help you choose or change a palette, or add to a palette already in use, use one of the many desktop color palette design applications, or use an online application like http://colorschemedesigner.com/ or Adobe’s Kuler at http://kuler.adobe.com/.
It should be noted that there are no hard and fast rules that will guarantee a color combination that is liked by all, because color choices are very subjective. We can, however, reduce color dissonance, improve legibility, and elevate the aesthetic value of the application by following these few guidelines:

Use color to create distance cues

Our eyes work to give us distance cues primarily by being a certain distance apart from each other. The difference in perspective between what each eye sees, parallax, is interpreted in the brain to let us know that one object is farther than another. We lose that when it comes to the screen, because everything is literally on one plane. How doyou solve for that?
  • Layering helps to let us know something is in front of another.
  • Windows, tabs, and other elements which are layered atop each other must look as if they “come forward” or “go back” from the user’s viewing plane, but should also mimic “atmospheric perspective.”
  • Title bars and borders of active windows should be more saturated and of higher contrast than windows behind them.
  • Similarly, the label of the selected tab in a tab set should of higher contrast and saturation than the other tabs which are not selected.
  • Choice of font color for the label of a selected tab will depend on the color of the tab itself, but should be of higher contrast than the unselected tabs, to make it seem to come forward.
Generally, saturation and contrast can be related; increasing saturation of one color in a set of two colors with the same starting saturation will increase the contrast between the pair; be wary that this is not always the case, but it can be used as a rule of thumb. Contrast can also be changed by increasing the amount of black or white in a color.
  • Increasing the black levels in a color creates shades or darker values;
  • Increasing the white levels creates tints, or lighter values.

Atmospheric Perspective Explained

The suggestions above derive from the concept of atmospheric perspective, a natural phenomenon that makes the color of objects in the distance continually decrease in contrast and saturation the further away they are from the viewer. You’ve no doubt seen this in photos of mountainscapes where the farthest mountain seems to fade into themist.
Conversely, elements in each successively closer plane increase in contrast and saturation. The atmosphere acts as a veil to “dim” objects in the distance, allowing the objects that are closer to the observer to show truer color fidelity, stronger contrast, and more sharpness. Colors with higher saturation and higher contrast are interpreted by our eyes to be closer to us (or, the user).
In the following example, the active task window is a light blue, and the background, or inactive, task window is a low-contrast bluish-gray, making it clear which window is active and which is not. However, the active tab (Fund Information) within the active window is an even brighter blue than the window frame surrounding it.
Windows and tabs

Color in window and tab design

This is a common mistake in choosing colors. The blue of the tab is so much brighter than the blue of the window frame to which it belongs, that the tab set seems to “float out” from the frame itself (the phenomenon of atmospheric perspective at play), and doesn’t look like it is situated within the window space; it seems dissociated from the window to which it should belong. This illusion comes from our perception of mixed spatial cues on multiple planes, even though all the elements are on a single plane (the monitor).
The other tabs in the tab set, because of their comparatively lower contrast, seem to “fall back” behind the active tab, so the relationship does work within the tab set. Lastly, because of color unity of the active tab and the tab information frame, we associate the content within the frame as belonging to the active tab.

Reduce problems arising from complementary colors

Color palettes can be constructed from some well-known and time-tested “formulae.” The usual formula is to choose one base color and then to use other colors to create schemes, or families. Schemes can be monochromatic, complementary, triads, tetrads, analogue, or a mix of multiple schemes. Problems usually surface when complimentary colors, which sit opposite each other on the color wheel, clash and make it hard to perceive the data associated with them. Here are some starting points:
  • try not to use complementary colors of similar value in large areas
  • try not to put colored text over backgrounds of a complimentary color
  • try not to use text in such small sizes or weights such that the background color seeps or “bleeds into,” and overpowers the foreground text (this applies to all color schemes, not just complimentary colors).
See the example below that shows a limited-palette color wheel of blue/green and orange/red color complements on the left, and the green/red and blue/orange complementary paired squares next to it.
Complementary colors and a simple color matrix

Complementary colors and a simple color matrix

Notice that the colored text in each of the top two squares is hard to read because the words are applied on complementary colored backgrounds and create visual vibrations. Conversely, backgrounds created from tints of the main colors (in the 4th quadrant of each square) allow text to be quite legible, because they are less saturated and don’t produce the vibrating effect (these colors are not of similar value).
Complementary colors may be used throughout an application as part of the overall color scheme, but the placement of the specific colors will determine the harmony or dissonance of the combination.

Monitor the color contrast of UI elements

There are recommendations of contrast ratios for accessibility standards for low-vision users, which can help everyone regardless of their visual acuity. As in the complementary color discussion above, the size of text plays into these acceptable contrast ratios as well.
WebAIM, an initiative of Utah State University, is a site that lobbies for accessibility standards on the web, and provides an online color contrast checker to help designers meet this recommendation. It is found at http://webaim.org/resources/contrastchecker/.
Web Content Accessibility Guidelines (WCAG) from W3C has two levels of conformance, AA and AAA. Normally, the minimum color contrast ratio for text (and images of text) to be legible on a colored background is 7:1. However, large sized text (16px or above) has a lower requirement of 4.5:1. The colors #912025 (red in the example above), and #999999 (a dark gray) do not pass either the AA or AAA levels for Normal sized text, and only passes the AA level of conformance for Large sized text. Your objectives should be to choose pleasing colors by eye, and then check that the choices will pass the AA and AAA sizes of the small text. If the small text passes the requirement, the large text will too.
You can create a similar color matrix to show how colored text in the foreground interacts with a colored background. Some color combinations do not yield a high enough contrast. Some make text completely illegible, while other combinations work quite well because the contrast between them allows the text to separate from its background. Furthermore, text in a normal weight break down and become less legible when paired with especially powerful background colors because of color bleed. Creating and distributing a matrix will help everyone choose colors of appropriate contrast when the theme does not automatically apply to an element in the UI.

Use color to amplify meaning

Do not use color alone to convey meaning. This greatly impacts accessibility. Put the color in relation with a text label, or some other indicator. As an obvious example, using only the color green in a box to indicate a “System OK” is not only ambivalent without explicit text labels to cue the user, but makes it harder to comprehend the meaning for those with low-vision or who suffer from one of many types of color blindness, since they won’t be able to differentiate color changes in the box itself or in relation to other elements around it. Instead, use text or iconic representations for meaning, and use color for enhancement.
Create redundancy of meaning throughout the UI whenever possible (not redundancy of the UI itself). Links on the Web have redundancy built into them (color and underlines) for accessibility enhancements. While accessibility for application design is less valued because of the concentration on aesthetic design and a captive audience, try to apply the same rules whenever possible so that the fewest number of people are faced with usability or accessibility issues.
Remember that green and red are two of the most problematic colors for color-blind users, and that color blindness has many forms, including deuteranomaly, which affects 5% of men and 0.4% of women. Overall, about 10% of human beings have color blindness of one kind or another.
Think about it this way: if the screen were presented as a black-and-white printout, would the viewer still glean the same information as easily as if you did not build in redundancy? In other words, if the color is an aesthetic highlight, and not used to convey a particular state or meaning, you’re probably safe.
This entry was posted in Graphic Design, Interaction Design, User Experience. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

2 Comments

  1. G F Mueden
    Posted January 9, 2011 at 3:57 am | Permalink

    You have brought up my pet peeve My old eyes can’t read the low contrast light blue and white pair commonly used for tabs, linls, etc. Is it possible to throw some black in the blue mix to increase the contrast? This ia an accessibility problem that seems not to have been addressed. The substitution of a new high contrast pair would please me no end.

  2. Posted January 10, 2011 at 3:15 pm | Permalink

    GF Mueden,
    Could you explain a little more? Just to clarify, are you saying that the example used in the article isn’t contrasty enough, and you are having a hard time seeing it, or are you actually raising a different point?

One Trackback

  1. [...] This post was mentioned on Twitter by Donald Vieth, Fred's Head Feeds. Fred's Head Feeds said: Google: The Use of Color in User Interfaces: As an obvious example, using only the color green in a box to indic… http://bit.ly/hhD9U2 [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*