The Language of Color

Color motivates, excites, draws attention and provides emphasis.  It is one part of the coordinated effort to effectively communicate in information design. Color has long been thought to be only for embellishment or decoration. But if used intelligently, color can help give visual order to complex information. It can attract, enlighten and engage, and thus, add value.
Color can be used to link...
   As well as split.

Color is probably the most often misused element in information design, especially in user interface design. Using color to augment communication is good, to a point.  More color rarely means more value.  Just because there are 1.6 million colors cheaply and readily available in a computer display doesn’t mean that you should use “every Crayon in the box.” The brain can only handle so many thoughts or concepts at a time. Renowned information designer Howard Tuft (1992) reiterates one of the main principles of using color: “Above all, do no harm.”

The sections that following are intended to equip you with enough information to not only avoid doing harm, but to aid in using color toward more effective and engaging user interface design.

Attraction

As information processing creatures, we try to attach meaning to what we see and perceive.  Therefore, color as part of a user interface design must be carefully researched and planned. Merely using color to “pretty things up” limits its ability to portray information in a more meaningful way. Rather, color is a technique, a tool, a language that must be used purposefully and carefully.

The human perceptual system is attracted to color. This is counted on heavily by those in the fields of communications and advertising.  Which would you rather look at, a display of information in black and white or one in color? In his article, The Power of Color, Wayne (1991) states, “Research studies into printed forms of communication indicate color is 32 percent more effective in attracting attention, and 25 percent more effective in causing reader action. Corporate print advertising is almost exclusively color, precisely because industry studies show full-color advertisements get up to 36 percent better response than their black-and-white counterparts.“ 

Tests also show that color can be used effectively to improve performance. However, even though bright colors attract customers and users, those sitting in front of a computer screen for hours do not need colors that distract them from their work.

TIP:  Develop your user interface or Web design first in black-and-white. Then add color later and only where it is needed and it adds value.  Printers do this because costs increase dramatically with each color that is added. Be frugal when adding colors to your Web design as if each had to be “cost-justified.”

Basics

Many of the fundamentals of color combinations and usage are based on observing nature, following convention or just good common sense. A popular method for choosing color combinations is based on Brewster, Prang or color wheel theory.

You may have seen the color wheel diagram before (Fig. 2). It contains the primary colors, red, green and blue (Fig. 3), as well as the secondary, orange, green and purple (Fig. 4), formed by combining the primary colors) and tertiary colors, formed by combining a primary with a secondary color (Fig. 5).  For a complete discussion on color wheel theory, see ”Principles of Color” by Faber Birren or “Color Harmony: A Guide to Creative Color Combinations” by Hideaki Chijiiwa.

Color, however, is more than just what does and doesn't look good. The sections that follow will discuss the functional use of color, how intentional and sound color choices can add value to every user interface or Web site design.

Principles

Here are several principles of good color usage. This is not a complete list, and these are by no means hard and fast rules. These are just things to think about when trying to make effective, value-added color choices.

Keep it simple. The temptation to use every color available can be strong. However, the indiscriminate mixing of colors can cause visual confusion and anxiety. Too much color is self-defeating. 

Consider the viewing environment. Dark colors on white are appropriate and effective in most brightly lit settings.  However, when minute graphic detail is required, such as in CAD type graphics, light colors virtually jump out of a black background and are more easily viewed in darker viewing situations.

Use color to emphasize the key point or focus.  This may be a wedge in a pie chart, a bar or a line on a graph, or a word or phrase in text. In all cases, yellow and red should be used sparingly. Use blue or green for less emphasis and contrast.

Use color to guide the user. Since a user's eye will be drawn to the brightest area first, color can help prioritize. Use it to attract the use to the starting point.

Use color to emphasize change.   When moving from one screen to a similar one, use color to bring out the differences. If something is changing dynamically on a screen, use color prudently to attract attention to it. You might not want to rely on color alone to show change. Change the shape, shading, position or orientation.

Use color to symbolize. Use established conventions as color symbols. In finance, red means loss and black means gain.  Traffic light colors are obvious symbols.  It is also possible to establish your own color symbols through repetition.

Use color for identity.   Color can be used to identify a recurring theme, subtasks under a major function or a collection of common items.

Use color for sequencing.   Try a color progression from dark to light. This helps imply that something is being developed or accomplished, moving from start to finish or empty to full, in the proper order.

System Environment

Web pages are viewed on a seemingly endless variety of browsers, operating systems and displays.  Each has its own way of handling color information it encounters.  You must still attempt to make the best color choices for the majority of your audience.

Several environmental components work together to create color on your computer. Each has limitations that can affect how accurately colors are recreated.

  • The computer hardware on the motherboard

  • The graphics or video card

  • The monitor

  • The web browser

As color information is handed off from one component to the next, it may not be rendered in the exact shade as the original. One of the main ingredients lost in the translation of color is gamma. All colors on the computer screen are a combination of red, green and blue (RGB) and are expressed as such. Therefore, in simple terms gamma can be thought of as the “recipe” of brightness of red, of green and of blue to create the exact color and shade desired.  Gamma is the mathematical formula that describes the relationship between the voltage input and the brightness of the image on the monitor.

Images often require gamma correction to achieve the best display of all its colors.  Gamma measurements vary from one system to the next.  Dark colors appear much lighter on a Mac than they do on a PC or a UNIX terminal. Likewise, colors set for the PC will look a little washed out when they are displayed on a Mac.  In addition, subtle color shades may be dithered and grainy when displayed on a system with less color capability.  Some less expensive systems or workstations may only be capable of black-and-white.

This problem becomes even more profound with more and more people using less expensive Web platforms such as WebTV and AOLTV.  The television watcher is typically sitting a considerable distance away from the screen, while the computer user is sitting a short distance away from the monitor.  The human eye needs different input for close viewing.

Therefore, be sure to inspect your color scheme on all the possible systems that will display your interface designs.  On a color system, you can usually set the color scheme to black-and-white for test purposes. You may even be able to tinker with the contrast controls on one system to simulate the different shades of color on another.

User Preference

If one says “Red” (the name of a color) and there are 50 people listening, it can be expected that there will be 50 reds in their minds.  And one can be sure that all these reds will be very different colors.

Josef Albers (1975)

Many browsers and operating systems allow users to override your designed color choices.   In the Netscape browser, for example, users can specify to Always Use My Colors in their Preference settings. In windowing environments, users can often change background, window and font colors.

Of course, user interface designers can override or “hard-code” some color settings, while others will still be dictated by the operating system and browser settings.  Since this text is more concerned with design than with implementation, it is left to the reader to seek out the tricks and limitations of HTML and the like in books and web sites dedicated to user interface programming.

If you truly want a specific line of text to have particular foreground and background colors, you can make them a graphic instead of actual text. Take care when using this technique as each “text-graphic” will take considerably longer to load than its text counterpart.

Global Audience

The venue of interface design is an international one, especially with the advent of the Internet.  Any software product or web site today has a potentially large audience of users from different countries, languages and cultures around the world.  This area is called internationalization, localization or national language support (NLS).  It can be a key factor in the worldwide success of a user interface, of which color is an integral part.

Cultures have different color conventions and reactions. Find out what these differences are if you are targeting a particular culture.  You may inadvertently be sending a different meaning that you think.  Red may mean warning, passion, or do this first.

Find out what color conventions are used in other countries. Some colors carry significantly different meanings. If your audience is international, spend some time finding out about the meaning of color. You could avoid offending someone.

For example, red means danger or love in the U.S, death in Egypt, and life in India. White means purity in the U.S. but death in China and Japan.  Therefore, chose your colors with your global audience in mind.   For more insight in this area, see “How Fluent is Your Interface? Designing for International Uses” by Stephen Boor and Patricia Russo, or “The Symbol Sourcebook” by Henry Dreyfus.

Visual Disabilities

When making color choices, one must take into consideration those individuals with visual deficiencies, such as poor eyesight or color blindness. Although this doesn’t really mean that some people are blind to colors, it is estimated to be as high as one in twelve web surfers experience some degree of color blindness.

In addition, computer users range in age from the very young to the very old, representing a wide range of visual disabilities. Consider if any will be among your targeted users.

By gender, approximately 8 percent of men and 0.4 percent of women have some form of color blindness.

Color perception varies from one colorblind person to another. Nearly all colorblind people have difficulty distinguishing between red and green.  Many have problems with shades of colors.  Some colors (primarily those with a red or green tint) will appear lighter than normal to colorblind people. Black and white, and shades of blue and yellow, are usually perceived accurately.

How do you design for visually disabled people such as the colorblind? Here are some tips.

  • Start with high contrast colors like black and white.

  • Consider using blues and yellows rather than reds and greens in your design.

  • Use shades of red or green in conjunction with safer colors (for instance, dark red text on a white background).

  • Use bright colors to minimize problems for those that have color weakness.

  • Provided adequate alternate cues besides color.

  • Always use the ALT attribute in image tags.

For a quick check of a proposed color scheme, seek out a friend or coworker with visual disabilities.  For color blindness, you can also run screenshots and graphics through the Vischeck Color Blindness Simulator on the Web at http://vischeck.com/showme.shtml.  For more formal usability testing, you can include visual disabilities characteristics when seeking out your user sample.

Illusions

Much of the success of color use depends on proportion and relationship. A large area of dark background makes a small yellow object almost jump off the page (Fig. 6). This is implied or virtual motion, which is often a better choice than actual motion.

              

             Fig. 6                                                       Fig. 7

A color's strength can also cause an illusion of size (Fig. 7). Red overpowers black in both these squares. That is why the inner red square looks larger than the inner black square.

When two contrasting colors abut, they appear to intensify along the edge where they meet (Fig. 8). This phenomenon is called "simultaneous contrast" and was studied by Leonardo da Vinci. This has a subtly disturbing effect and can be avoided by running a thin line of white or black between the two colors (Fig. 9).

                    

                      Fig. 8                                                    Fig. 9

Illusions can occur intentionally or unintentionally. Therefore, visually inspect all color combination on real systems under real circumstances.

Backgrounds

Simple backgrounds provide stability, strength and confidence, whereas, complex backgrounds convey impulse, risk and frenzy. The right background can be alluring and elegant.  Your intent may be visual impact, but quite often, uncommon color combinations obscure your message.

Fig. 10

Fig. 11

Often a background graphic is used as a technique for company branding. However, using a repeated tiled pattern for a background can be tricky.  The wrong graphic can result in pages that are unreadable (Fig. 10) unless you use a purposefully washed out rendering (Fig. 11).  Keep in mind that on the Web a very large graphic file used as a tile will cause the page to load slowly.

Text and Color

Combining text and color can be very powerful and very confusing. To illustrate the point, look at the lines of colored text below (Fig. 12).  Try to say the color of the letters of each word without reading the word.

Fig. 12

Your right brain tries to say the color while your left brain wants to say the word. Such is the nontrivial plight of using color with text.

Color with text can be used quite effectively in tables and reports. Tables usually carry information of varying importance. Again, we can help to guide and focus users by using color to make the intended point stand out. Take advantage of the receding and advancing characteristics of color.  Bright yellow advances most obviously, while dull blues and greens recede. Position, size and relationship can affect how much virtual movement occurs.

To illustrate this color effect, consider the airline flight table below (Fig. 13). In this instance, the focus is on the number of choices an airline passenger is free to make. Yellow is used to bring out the vital areas, the traveler’s choices for city and day of departure. Using the same color links the two separated columns. 

The green destination column advances, but not as dramatically. The destinations are important, but not as important as the yellow areas. The blue columns (Flight, Time and Stop) are the least important. The heading bar is dark so that it almost drops out of sight after you read it initially.

Fig. 13

With black on white tables and reports, adding one more color along with lines and boxes may create just the amount of variety and drama you need to accomplish your purpose. Even a subtle color like blue can be used to expose or hide, reveal or camouflage, or even remain neutral. Even with only these few variations, the possibilities are infinite.

Charts and Graphs

Charts and graphs can make statistics more readily comprehensible. Newspapers and magazines frequently contain some type of graph that quickly and effectively communicates information to a wide variety of readers from just about every age, occupation, religion, ethnic origin and education level.

Sometimes the graphical presentation of statistics lets you draw your own conclusions. More often the intent is to make a point, show a trend, display a result. Consider the two graphs below.

                                

Fig 14

This graph (Fig. 14) doesn't seem to give importance to any of the lines. Adding a background color does little more than make it decorative.

Fig. 15

The second graph  (Fig. 15) reduces the other two lines to background status as pale gray “mountains” against which the rise of the red line can be seen.  This is an exaggeration of representation without compromising statistical accuracy.

Summary

As you can see, one does not need a Ph.D. in the physics of light or the psychological affects of color to use it effectively. But basic color usage does warrant more deliberation than emotion.

Be practical. Use common sense and accumulated experience. Look at ways in which you see color used to communicate effectively to you. Look at programs and Web sites that you like. Look at posters and maps and signs and ads that attract you, that guide you, that inform you. Learn from these, as well as those that you almost miss, those that confuse you, those that drive you away.

Study whatever you can get your hands on. The more you know, the better you will be at making better color choices, or maybe more importantly, at avoiding bad color choices. You'll know when you make bad choices, because people can't always agree on what they like, but they always agree on what they DON'T like.

 

References

  1. Courtright-Elmer, Amy. The Theory of Color, In The Design Authority (March 2001, Rochester, NY), Element K Press.

  2. Mandel, Theo. The Elements of User Interface Design (New York, John Wiley and Sons, Inc, 1997).

  3. Morris, Mary E.S., Hinrichs, Randy J., Web Page Design (California, SunSoft Press, 1996).

  4. Morton, J.L., Color Matters website, www.colormatters.com/entercolormatters.html

  5. Niederst, Jennifer, Freedman, Edie, Designing for the Web: Getting Started in a New Medium (California, O’Rielly and Associates, Inc. 1996).

  6. White, Jan V., Color for the Electronic Age (New York, Watson-Guptill Publications, 1990).