Communicating color efficiently – red & green

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.

Green Red
Accept Reject
Agree Disagree
Complete Incomplete
Yes No
On Off
Up Down
Add Remove
Good Bad
High Low
Succeed Fail
Opened Closed
Online Offline
Save Cancel
Available Unavailable
Credit Debt
Positive Negative
Like Dislike

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.

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.

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.

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.

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.

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.

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

  1. Great insight into UI best practices. Interesting how subtle changes in color and messaging can make a world of difference.

  2. Working in the financial industry, you learn this lesson quite quickly. Green is gain and Red is loss. I got so tired of seeing green everywhere and only seeing red for bad news. I love red. It’s exciting and passionate. Wonderful post!

  3. I love all the great examples. Thanks so much!

  4. Excellent article on the use of color!

  5. The content is great, the way you serve it is greater. I really really enjoyed to read this article.

  6. great examples.
    forgot REQUIRED fields and Submit Comment button for comments :P

  7. Anthony Barba Sep 26, 2009 at 11:55 am

    The references photos really help this post.

    I can only imagine how great KISS is going. I’d love to see screen shots.

  8. I think KISS is going in the right direction.The observations are very keen and detailed.
    Though Red and Green stand for generally perceived notions I would like to say that the color should not play that great a part in the overall impression.
    Don’t we use the Red color for the “No Entry” sign? This results in safety and protection of many.Red here is a good player.

  9. Great article.
    Early in my web career, sometime around 1998, I worked for a company building a robust online application. The Project Manager had mocked up some pages from a nine step process. In order to make it very obvious to the user (and jump out from the page) he decided to make the “Continue” button RED. I felt it should naturally be GREEN and fought heavily on this topic, but I was the new guy and lost the battle to a self proclaimed designer.

    I love how your post validates the reasoning behind the colors.

  10. I love these examples! I love the “Buy” buttons being green, I had never thought to do it that way.

  11. Soumyaranjan Dash Nov 19, 2009 at 1:03 pm

    Excellent insights into the use of colors! Very much informative and learned one thing today that before reading something we’ve to see it first! Obviously, except those who’re not blessed with eyesight!

  12. Nathan J. Brauer Nov 19, 2009 at 9:34 pm

    Interesting post. What about the color yellow? It seems as though yellow should also be considered in this.

  13. Uh hate to be a buzz kill, but what about usability and accessibility for the Color Blind? These can both end up being grey. Just something to think about. Cute that the submit for this comment is a “green” button.

  14. Whoops, sorry. Initially just did a scan and missed the content addressing color blind. Glad to see that mentioned.

  15. Great insight into UI-Design and good chosen examples. Thank you for this article.

  16. Fascinating – I wonder if anyone has ever done split testing of a page with differing “Buy” or “Subscribe” buttons to compare the difference in conversation rate on green and red.

    What I do know is that this weekend I’m going to create a green acceptance button!

  17. I didn’t realize how communicating colours efficiently is so important – excellent examples you’ve provided here!

    As computer / digital technology develops, it will be interesting to see how the continued use of these colours and their standard meanings is maintained.

  18. Further to my previous comment, this has definitely made a difference. My website is an ebook on how to get a pay raise and go through the salary negotiation process and I’ve been testing conversion with various color styles.

    A green submit button is definitely more effective, and I am using red in a few bold statements through the site to gain attention.

    There has definitely been a raise in paying customers and my conversion rate.

    Thanks Kissmetrics!

  19. Really good post. Scrolling through the examples really buttressed your point, how immediate my connections and associations were to these colors, though I hadn’t previously expressly realized it.

Comments are closed.

← Previous ArticleNext Article →