Colors and the UI

As the name suggests, GUIs (Graphical User Interfaces) present their features and functions visually. The human-computer interaction is heavily based on seeing things, looking for things and interacting with graphical UI elements. Color is a main characteristic of any visual scene, not only on computer screens, but in any situation where we see something. Because most of what we see and interact with in our everyday life is colored (as opposed to shades of white-gray-black), we are very familiar with colors – maybe so much that we don’t think about them a lot. On the other hand, it does bother us when we need to read a dark-gray label on a black button. So colors have the potential to boost or wreck the user experience. This article will introduce the concept of user experience and highlight some aspects of colors and color perception together with recommendations for UI design.

User Experience

User Experience (UX) is a concept pertaining to the overall – or holistic – encounter between users and interactive technical systems. More concretely, it’s the degree of usability and appeal that a website or application provides to its users. Great usability implies that an interactive product allows its users to efficiently accomplish their goals. Well-known guidelines are provided by ISO 9241-110 [1] and Nielsen’s Heuristics [2].

Appeal refers to the emotional tie between users and a system they are interacting with. Do users love it? Hate it? Do they think it’s attractive or modern or engaging? Do they feel pride when they interact with it? Although appeal cannot be defined as concisely as usability, it is of equal importance for the success of a product because appealing systems are more enjoyable and desirable which increases their value.

Colors and the UI

Color is the sensation that is invoked when light of wavelengths between 360nm and 720nm hits our eyes and then is processed by our visual system [3]. Our eyes feature three types of color receptors, each maximally receptive to long, medium, and short wavelengths of light. These are known as L-, M- and S-cones. As it can be seen in Figure 1, a light with a wavelength of 530nm triggers the M-cones most, the L-cones slightly less and the S-cones just a little. The perceived color impression would then be a green.

Fig. 1: Color perception is achieved through three cone types (after [4]).

On computer screens colors are defined through the RGB color model (R stands for red, G for green and B for blue). These three colors are called primary colors and correspond to the wavelengths the L-, M- and S-cone are most receptive for. Primary colors cannot be generated by mixing other colors. Instead, by mixing primary colors, all other colors can be generated. Each pixel on a screen shows a color generated by the interplay of one red, one blue and one green light source that are so close to each other that they cannot be distinguished.

Color Contrast

Typically, a colored object or area on a UI is not displayed in isolation, but is adjacent to or superimposed on another colored object or area. This creates contrast effects. Without sufficient contrast, we could not discriminate different parts on our screen. There is a good reason why office applications like MS Word, Powerpoint, Excel, Outlook, etc. are based on a white background with black as a default font color – this provides the maximum contrast and therefore optimum legibility.

Apart from this, color contrast can be deliberately used to draw the visual attention of users to relevant UI elements that feature important information or require inputs.

Color contrast also lends itself well to boost the visual appeal of a UI. Empirical studies show that warm colors (e.g. red, yellow, orange) are preferred on backgrounds of cool colors (e.g. blue, green, purple) and vice versa.

Contrast effects can also be detrimental for the user experience. Two prominent examples are discussed in the following. In general, any region in the visual field tends to induce its complementary color in neighboring areas. For example, a gray square will tend to look greenish when surrounded by red, and reddish when it is surrounded by green. This effect is known as simultaneous color contrast [4]. On UIs it can sometimes be seen that the same control, e.g. a push button, looks strikingly different on backgrounds of different colors.

Another problematic contrast effect is chromatic aberration [5]. Lenses, including the lenses in our eyes, bend lights of different wavelengths by unequal amounts. The effect is that different colored stimuli are not projected at the same spot at the retina – an effect most noticeable for combinations of violet and red as well as blue and red (see Figure 2), because the wavelengths of violet and blue are at one end of the visual spectrum while the wavelength of red is at other end (see Figure 1).

Fig. 2: Chromatic Aberration.

Consequently, the text in Figure 2 looks blurred against the background. Because of this, contrasts of red and violet/blue should be avoided on a UI. Despite this, red-blue color contrasts are pretty common, possibly because the person designing the UI tries to avoid the combination of red and green due to color deficiency reasons (see color deficiency below). Figure 3 shows combinations of background and foreground colors that provide a good contrast.

Fig. 3: Color combinations providing good contrasts.

Color Deficiencies

When people talk about color blindness they usually refer to the inability of perceiving certain colors. It is more appropriate to call these conditions color deficiencies, because in the majority of cases people are not completely unable to perceive a certain color, but their perception is faulty [3]. Color deficiencies occur when a cone type is either missing or working abnormally. Table 1 shows the incidence rates for color deficiencies based on the affected L-, M-, and S-cones. 80 out of 1000 men and only 4 out of 1000 women have some sort of color deficiency. Because the curves for the L- and M-cones are close to each other (see Figure 1), the effect of L- and M-cone based color deficiency is similar. When there are problems with L- or M-cones the color appearance is mostly based on blue and yellow hues, the complimentary color pair red-green cannot be perceived correctly.

Table 1: Color deficiencies and incidence rates (after [3]).

Color deficiencies based on S-cones have the effect that color perception is based on red and green hues, the perception of the complimentary color pair blue and yellow is disturbed. It is a very rare condition though, only affecting 4 out of 100,000 men and 2 out of 100,000 women. The same is true for total color blindness which is caused by the absence of any cone types in the eyes: 3 out of 100,000 men and 2 out of 100,000 women cannot see any color hues, thus their vision is achromatic and solely based on shades of black, gray and white.

Based on the data in Table 1 the typical person suffering from color deficiency is a man having problems perceiving red and green. The chance that a person has color perception problems other than for red-green is very low. Actually, the chance that a person may suffer epileptic seizures triggered by blinking UI elements on the screen is 400 times higher [6].

The question is to what extent color deficiency poses a problem for the usability of a product. The answer is that it depends on the nature of the application. In all those cases where colors are used for aesthetic reasons like on most company homepages, the impact of color perception problems is lower than for systems that use color to indicate status of any kind, e.g. control systems and dashboards. In general, it is recommend not to rely on color alone for coding important information. For example, indicating a system status via virtual red and green lights, is a problem for people with red-green color deficiencies. They would have a hard time differentiating between the red and green lights. So it is recommendable to provide a meaningful text label (“OK” vs. “Alarm”) or a symbol (checkmark vs. exclamation mark) in addition to the color coding.

Colors and Visual Appeal

Colors are well suited to increase the visual appeal of a software product. We associate certain meanings with specific colors (Table 2). These color stereotypes can be leveraged when designing a UI. For example, it may make sense to base a clinical software application on white as this color is associated with cleanliness. Another example is the homepage of the United Nations [7] which is held in blue, thus conveying peacefulness.

Table 2: Western color stereotypes (after [8]).

It should be noted that the color associations in Table 2 pertain to western culture. Because color stereotypes are culture-dependent, they can be quite different in other areas of the world. Red, for example, means “Death” in Egypt, “Life” and “Creativity” in India and “Happiness” in China [9].

Appealing UIs feature sets of colors that are coordinated and harmonious. Creating color schemes is a skill that is anything but trivial because there are many factors to consider, including that the company’s brand value has to be communicated and color associations may be needed to be provoked (see color stereotypes above). Care has to be taken that ergonomic issues are considered as well (see contrast effects above).

There are a couple of different ways to create simple color schemes without the help of a graphical designer [10]. For example, you can pick any three colors which are side by side on a 12 part color wheel (analogous colors, see Fig. 4). Or you can select colors that lie directly opposite to each other on the color wheel (complementary colors). Remember though that the combination of red and green is critical for people with red-green color deficiencies (see color deficiency above).

Fig. 4: Color scheme based on analogous colors (after [10]).

About the Author

Dr. Tobias Komischke has been working in the area of user experience for over 10 years. He is a reviewer of technical journals and conferences and published more than 30 articles. At Infragistics he is responsible for the user experience on the inside (development) and outside (training & consulting).

Links& Literature

[1] ISO 9241-110 (2006). Ergonomics of human-system interaction – Part 110: Dialog principles. Berlin: Beuth.

[2] Nielsen, J. ().Nielsen, J. (1994). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods. New York City: John Wiley & Sons.

[3] Wyszecki, G, Stiles, W.S. (1982). Color science. 2nd edition. New York City: John Wiley & Sons.

[4] Gleitman, H. (1991). Psychology. 3rd Edition. New York City: W.W. Norton & Company.

[5] Kaiser, P. K., Boynton, R. M. (1996). Human Color Vision. Washington, D.C.: Optical Society of America.

[6] Fisher R.S., Harding G., Erba G., Barkley G.L., Wilkins A. (2005) Photic- and pattern-induced seizures: a review for the Epilepsy Foundation of America Working Group Epilepsia, 46 (9), 1426-1441.

[7] http://www.un.org/

[8] Waters, C. (1996). Web Concept & Design. Indianapolis: New Riders Publishing.

[9] Russo, P., & Boor, S. (1993). How fluent is your interface? Designing for international users. INTERCHI '93. 342-347.

[10] Williams, R. (2008). The Non-Designer”s Design Book. 3rd Edition. New York City: Peachpit Press.