Seven Illustrated Principles of Highly Informative Color
by Bob Stein, December 2000

<!--Colorize your hard-won mental models so your users gain them with ease.-->

   Want to communicate a lot in a small space? Or a small attention span? What snags the intuition faster than a speeding monosyllable?  Color!

"And what tremendous possibilities for the variation of meaning are offered by the combinations of colors."
—Paul Klee, 1945

The human mind works wonders searching, discriminating and comprehending when given the right visual cues. Here are some ways I've found to take advantage of color to ease the tedium of complexity.

1. Consistency. If your work is infused by an all-important theme, there will be numerous chances to reveal it. You'll have a lot less explaining to do if you exploit each one the same way. 

2. Moderation in color diversity. The power of color to inform fades fast without restraint. Two themes are a lot to try to colorize. Bring what's most important front and center with judicious use of color. Decorative color must play at best a subdued role.

On the right is a 3-color theme. Wherever I used this theme, it monopolizes the color—almost all other information is in black, gray and white. This work actually has two major informative color themes and one minor one, but their diversity never overlaps: wherever one varies the others never do. And where any mixture occurs at all (not shown here) one theme clearly dominates.

These principles of consistency and moderation are at tension with one another. To clarify, I don't suggest moderation within a theme at all: I'd consistently colorize everything you could. Rather: moderation between color themes. The only colors that should vary within any section are those from a single theme.

Seven Illustrated Principles of Highly Informative Color

Choosing the Colors

Web design is deeply infused by what standards sanction and what browsers support. In writing the HTML Card, I wanted to color-code browser and standards support for thousands of features. Here's how I chose the colors and applied them.

3. Resonate with precedent. Seek, recognize, and imitate precedent. Tap into the enormous body of common knowledge and common sense. You'll want your color choices remembered and relied upon effortlessly, subconsciously.

4. Understate tastefully. Tone it down if you can. Use bold color sparingly if at all. (It will jar the viewer; be sure you mean to.) With a little common sense, colors that inform can also decorate and charm for free.

Here are the precedents for the colors I chose to represent the two leading browsers and the standards body W3C®.

Netscape® Navigator® logo
Microsoft® Internet Explorer® logo
World Wide Web Consortium home page

Obviously the first problem to resolve, more practical than aesthetic, is that Microsoft and Netscape logos use similar blues. I widened the difference significantly, going greenish for Netscape, and subdued purplish for IE. Then I toned down the bright pale yellow shade from the W3C home page and warmed it slightly for aesthetics. 

Here again the two principles are in tension, precedent against visual gentleness. I loosened up on the former because I believe even tenuous precedent reinforces subconscious recognition. People are much more likely to remember a color association if they've seen something like it before.

Seven Illustrated Principles of Highly Informative Color

Color-Deficient Vision Check

5. Color-Deficient Usability. With decorative color, the main issue with color deficiency is readability. But informative colors need to be distinguishable by everyone. Each color must appear unique.

There are many forms of color blindness. By far the most common are known as red-green color blindness, where certain reds, yellows, browns and greens can be indistinguishable. Since complete color blindness (black and white) is extremely rare, a more practical term is color-deficient vision.

Color Theme:
Simulation of Deuteranopia:

The lower squares simulate deuteranopia, which is relatively common. Watered-down variations of this condition, called deuteranomalous, are the most common group of color vision deficiencies. Checking your color theme with a deuteranopic simulation is the single best way to ensure color-deficient usability. 

The other red-green deficiencies are very similar to deuteranopia.

Color Theme:
Simulation of Protanopia:

The main distinction of protanopia is that vivid reds can appear very dark. Red-green color deficiency affects 1 in 12 men and 1 in 250 women. Tritanopia, or blue-yellow color deficiency affects 1 in 30,000 people.

Color Theme:
Simulation of Tritanopia:

Simulations are courtesy of Visicheck. They offer very useful conversions online for images and web pages.

Seven Illustrated Principles of Highly Informative Color

Symbolism

6. Intuitive Symbolism. The wise combination of color with shape, arrangement and other visual forms (backgrounds, borders, icons) can significantly enrich the food for intuitive thought. The idea is to use symbols and colors to portray the mental models you take for granted.

If you don't have vivid mental models, get them! Don't even try to invent usability before immersing in the subject. Then the challenge is to distrust your own illusions of simplicity, to help your users grasp easily what you learned the hard way. All subjects (a company, a technology, a person) have complex structure, and hard thinking on their nature is prelude to revealing it for users.

Almost all HTML references I've seen (to the extent they included it at all) try to show browser and standard support with check marks or icons, each symbol answering one question: support, yes or no. But I felt this was tedious. Most designers think of feature support in more atomic terms such as universal, Netscape-only, or all-but-Netscape. Not to mention the distraction and wasted space of three symbols next to every feature. I was hoping to answer three yes/no questions at a time, the eight combinations requiring eight unique symbolic forms of some kind. First, I could use no color at all to indicate universal support. And features not supported by any party I could simply leave out of the reference entirely. Six possibilities remain.

Note the background colors are a lightened version (30-40%) of the border colors. This was a practical compromise so text would be readable on the backgrounds and the borders would be sufficiently prominent.

Seven Illustrated Principles of Highly Informative Color

Symbolism Examples, Sound-Bites

Examples of color symbolism:

The symbolism I thought to portray here is, roughly, background=insider, border=outsider. You're a Netscape-insider when you use Netscape-only features. And Netscape is the outsider when it doesn't support a feature that others do. Tedious and corny to explain, but I believe that even unexplained it works to reinforce the right mental models.

So with this scheme, features with limited support can stand out; it takes very little space to show exactly who does and does not support them; and eventually a user can rapidly interpret the details.

Until "eventually" happens, it's important to have verbal explanations handy, as in a legend.  I believe that every single page where an informative color theme is used should explain itself a glance away.

Note that each symbol has both an embedded sound-bite and a verbose description nearby. On first use, the user's left-brain demands the verbose description. Eventually the sound-bite will be enough. Eventually the colors and shapes will be enough. The wording of each sound bite reinforces the patterns (background=only, border=not). Such gratuitous redundancy should have strong basis: this work relies heavily on the color theme.

Two goals of intuitive symbolism:

• A ready explanation in the first place
• Quicker comprehension with each use

Here are some examples of icons colorized in line with the theme:

Value is the default in Netscape only

Feature is buggy in Internet Explorer only

Feature is deprecated by W3C (shown next to approved alternative)

Seven Illustrated Principles of Highly Informative Color

Accommodating Strangeness

7. Special Cases. All rules have their exceptions. Handling yours with compassion and vision can forestall a lot of user frustration. Seek common ground with the dominant forms and reveal it.

Example 1: This symbol indicates a clash between Internet Explorer and Netscape. It appears next to any feature that acts differently in the two browsers. (Bugginess is a different symbol.) It's an icon of two swords, one in IE color, the other Netscape color. An unusual use of the colors to indicate an unusual situation. This one symbol lumps many special cases together, each one of which then I explain in elaborate detail online.

Notice the strong visual availability of verbal help — sound bites bold and surrounded by the forms they're explaining. Verbose descriptions are right next door (though cut off here).

Dangers of visual diversity: 

• Patterns become hard to distinguish (the solid green and dotted green/purple lines above are borderline, no pun intended)
• Annoying users by loading up their mental list of things to learn

One thing I think relieves that annoyance is, paradoxically, repetition. Isolated symbolisms don't promise much benefit to learning.

Example 3: I introduced a new symbol and color to indicate character non-support by the Apple® Macintosh®, a twist needed only in the character section of the reference (not in the tags or styles sections). Because that symbol is used repetitively though, I think users unconsciously forgive the mental intrusion of a new color and symbol.

A special case of symbol and color merits good reason. All three of these examples are visual oddities but were needed in multiple places.

: : :

Most important for color and symbolic themes are consistency and recognizability (principles 1,5). It's not so important that a symbol stand alone without verbal explanation, as it is that it be recognizable once explained, and then reinforced at every turn. Making sure those needs are filled you could try for resonance with precedent, aesthetics, and symbolism (principles 3,4,6). Just make sure you don't ruin it with too much color diversity or too many visual exceptions (principles 2,7).

Here's wishing you're able to part the clouds of your user's confusion with a rainbow of informative color.

Bob Stein, stein@visibone.com writes, publishes and sells Color and HTML reference laminated cards, charts and mouse pads. He is Chief Technology Spelunker, and most everything else, of VisiBone. He designed the color-wheel swatch libraries in Adobe Photoshop, Illustrator, ImageReady and Bare Bones BBEdit.