Using Red and Green in UI Design

Color has a significant impact on our perceptions and emotions. Used correctly, color can evoke a specific reaction in your users. For this article, I want to focus on two particular colors - red and gree. There's a reason why I want to do it:

Both red and green are extremely important for UI design because they are actionable

Let's explore common ways of using red and green as an accent color in user interfaces.

Red

  • Importance. It's a highly visible color that is able to focus attention quickly and get people to make quick decisions. 
  • Red is a very hot color. It's an intense color that is packed with emotion ranging from passion to anger.
  • Warning or danger. Flashing red lights often mean danger or emergency.

Error state

Red is often associated with either a warning or something which is crucial to see. That's why red is the first color that comes to mind when we think about error states. Paired with a cross icon, red delivers the message that something went wrong in a glance.

Image: Mailchimp

Image: Ben Dunn

Emotional response

Red is often associated with love and passion. Designers use reddish colors (such as Berry Red) in emotional responses such as Like.

Twitter's like

Remove item from the cart

In e-commerce, red is often used in cart summary for 'Remove from cart' action.

Remove item from a cart is colored in red

Potentially danger actions

Red has been commonly associated with potential danger actions. Used correctly, it can prevent the user from doing something dangerous which cannot be reverted.

When designers use red for delete buttons, the color naturally gives users pause due to its connotations.

Both deletion of a file or closing an account are good examples of using red in design. When users see such dialogs the red color encourage them to think twice before making the final decision.

Green

  • Green has many of the same calming attributes that blue has. It's one of the most restful and relaxing colors for the human eye.
  • A symbol of growth. Green can represent new beginnings and growth.
  • The green color is often used to indicate safety or success.

Success state

Typically, green is associated with a positive outcome -an action which is complete, a file which has been saved or an online order which was placed. That's why the message that users see when the operation is completed successfully is colored in green.

Checkmark icon paired with green color reassures the user that the user operation was successfully completed

Image: Ed Poole

Credits: Colin Garven

Image: Phil LaPier

Encouragement

While red means 'stop' green means 'go.' That's why green can be used to encourage users to participate in some activity. For example, Stripe prompts users to sign up with a green button.

When Red And Green Can Be Paired

For binary operations such as 'Accept' or 'Decline' an incoming call, red & green can be used to make it easier to find the relevant action. The red button warns users that they're going to cut off a call, whilst green gives them the message that they're going ahead with that call. This means the user can spend less time processing what should be a simple choice.
It's important to mention that pairing red and gree works well only for cases where both options are equally important for users. If you expect users to act in a specific way, you can put more visual weight on a particular option. In the example below, we use contrasting green for 'Yes Please!' option.

Image: Telerik

Which Color Converts Better?

The 'red vs green' debate has been a long-running battle on the web. There are plenty of case studies to be found online. One of the most famous is the study by Joshua Porter for Hubspot (The Button Color A/B Test: Red Beats Green). In this study, red button outperformed the green button by 21 %.
But it's important to understand that we can't generalize the results of this and any other similar studies. What works for one particular page, not necessarily work for another. 

At the same time, we should take two things into account when selecting a color for CTAs:

  • CTA on your landing page should be eye-catching, and this happens only when the button has a significant contrast from surrounding objects and background. 
  • Both the colors you choose and the context in which you show them are crucial to consider.

What will happen when we change the color of the CTA for Stripe's landing page from green to red? The button is definitely is more eye-catching now, at the same time red doesn't work for this design because it contradicts with aesthetics of this page.

It's evident that red CTA clashes with other design elements

Accessibility

According to Colour Blind Awareness, 4.5% of the population are color-blind. Designing for color-blind people can be easily forgotten because most designers aren't color-blind.

There are many types of color blindness, but the large percentage of color blind people are people who suffer from deuteranomaly and protanomaly. They generally have difficulty distinguishing between reds, greens, browns, and oranges.

People that suffer from color blindness see red and green very differently, and it's hard to distinguish one from another.

That's why one of the most important rules in UI design states:

Don't rely on color alone to convey the meaning

Why? Because the interfaces that use color alone (red and green) pose the risk of confusing color blind users. Always provide additional information such as an icon or text message for error and success states to create better user experience for color blind people.

Helpful resources for color schemes

I want to share a collection of resources that will simplify the task of choosing the right colors for your UI. Enjoy!
Colors - UX Pro