Communicating color efficiently - red & green

Posted on August 17 / 15 Comments

Red and green; society & nature have wired these two colors so deeply into our subconsciousness that no other two colors share such a connection of opposing meanings as these two.

One of the most obvious examples of this connection is a color code used worldwide in standard traffic lights. We all know what these colors mean and we know how to react to them. However, the connection and meaning is not always as clearly defined as a set of traffic lights.

In this post we will explore the evolution of red and green in today’s web and best practices of their use.

Outlined in this table are some possibilities that evoke meaning just by using the color in the correct situation.

Notice how each definition assigned to green has a clear opposite assigned to red.

We see green as a positive, progressive color, so words like go, yes, good, accept, up, all can be related to the color green. Likewise for red. Stop, no, bad, reject, down, can all be related to red and convey a negative or hazardous type meaning.

A partnership of components

Color alone won’t always help get your meaning across. This is the same with any color but due to red and green having so many similar definitions attached, it’s important to use other components alongside the color to create a distinction and further emphasize the correct meaning.

Symbols are a perfect partner. They are versatile, simple and should be clear and understandable. While color in most circumstances contains more prominence than a typical symbol, using them together simply offers another level of comprehension. This is evident with users who have a disability in viewing colors correctly. Red and green color blindness is the most common form of color blindness at 99% of all color vision deficiencies and roughly 10 million men in America suffer from some degree of identifying red from green or perceiving it differently then the majority of others. This isn’t as widespread in women but it shows you how important it is to efficiently get your meaning across while catering to the maximum amount of user groups.

Let’s look at the two opposing definitions, Add and Remove. This opposite has got to be one of the most widely accepted building-block interactions on the web today. It’s a staple of any good web application, allowing a user to make decisions and choices that influence their tasks as a whole.

Add Examples

Peashoot

Campaign Monitor

Basecamp

280 Slides

Sifter

Wufoo

Remove Examples

Vimeo

Vimeo

Apple iPhone World Clock application

You will quickly notice in these examples, add can mean a lot of different definitions. Start, create, post, and new are all shown above, and that’s just a few. As long as these definitions contain a typical partnership of color and symbol, the naming of the definition can be anything on the green side as long as it still makes sense to the user.
This of course is the same for red and remove. End, delete, disconnect, cancel, they can all be perceived using the same partnerships.

The evolution of red and green

Color techniques are starting to get quite smart now users are getting better at assimilating the meanings behind them.

Text Links

By coloring text links accordingly at the early stages, designers and developers could offer more meaning to what would just be a standard link. This helped visually show importance over surrounding links and elements.

Flickr

Twitter

Basecamp

To-Do Lists 2

Alerts

Another fundamental asset to show visual importance is the use of responding to a user’s action. By providing a colored response the user can quickly get feedback on their action and determine how to proceed. These are commonly block elements at the top of the page with a sentence explaining the outcome of the action. However more recently with the Ajax movement we are starting to see these alerts move inline and around the corresponding element to provide a faster response.

Facebook Alert

Popscreen Alert

Skype Alert

Form elements

With the rise of mobile browsing, catering for as many situations is difficult, especially with user input. Accommodating small screens and inadequate control and precision has meant the usual HTML form elements aren’t always feasible.
Another aspect lacking a typical form element is the use of color, especially red and green. As form elements are based on user choice, various definitions with an opposite could result in a colored answer. By integrating an immediate colored response directly into a form element, a user would receive instant feedback and provide the form options a greater meaning.

Facebook chat slider

KISSmetrics checkbox element

Mixed Messages

Although these two colors are so distinct and their meanings well established, we do see cases that don’t always follow the basic principles. Some confusion can be had when an opposing word is used in a non-specific definition. A good example of this is the popular set of actions; download and upload. You will instantly notice the green and red word opposites, you may even have visualized how these elements would have looked in their respected colors. It is also general practice to use arrow symbols to further communicate the meaning, and of course these symbols can be attached to red or green. The problem here is, neither of these actions have an assertion over the other. Although they do different things, they possess equal meaning and that meaning isn’t assigned to a color. If red or green had to be assigned to these definitions, green would be the choice as it conveys to the user an action is required, a movement forward, just like our green signals on traffic lights.

Firefox

Skype

In some environments we can disregard any meaning attached to these colors where we understand the outcome. This may not always be the case for all users, especially new users to that environment but we learn and adapt even when our brain is telling us something else.

Mac OS X dock badges

Best practices

While the most important aspect is getting the meaning across efficiently there are some basic principles that will further help your color use. A valuable practice which helps maintain a quality site-wide style guide is to keep your red and green colors in sync with each other. By only adjusting the hue and maintaining the saturation and brightness your red and green tones will be in harmony with not just each other but your entire style guide.

Another important area to note is there is an additional color in the red/green relationship and that’s a neutral, middle-ground color called grey. In some cases, although a meaning may have a clear opposite, we may not want them to be equal in appearance when displaying both. Where one meaning outweighs the other, grey can replace the secondary color resulting in added significance to the primary color. Dressing down the appearance of the secondary color and reducing the overall appearance is also a useful strategy when placing emphasis on the primary action. This is typically a simple text link where the primary action is a colored button.

Conclusion

Although meanings and color are typically hardwired and set, there is plenty of growth in innovation and improvements with communicating the message efficiently. Especially now we have gone into a compact era with handhelds. We have less room when designing and page elements are tighter so it’s even more important communicating a precise message amongst a sea of others. Forms are changing to reflect instant feedback thanks to Ajax and overall, users aren’t prepared to wait due to web application beta signup trends.

It’s a great time to experiment in the current industry, particularly when it’s based on offering a richer, more efficient experience to the end user.

References

• Color Blindness: More Prevalent Among Males
• Color Meanings - Symbolism of Color and Colors That Go Together
• Why are traffic lights red, yellow, and green?
• Green: In culture - Wikipedia

Welcome to the KISSmetrics blog. We write about how to use metrics to improve online businesses. Don't forget to sign up for email updates , subscribe via RSS and follow us on Twitter.