A Guide to Color, UX, and Conversion Rates

| December 2, 2014
Sign up to get weekly resources, and receive your FREE bonus eBook.
Thank you!

Get ready for some great content coming to your inbox from the team at UserTesting!

Color is one of the most powerful tools in the designer’s toolkit.

You can use color to impact users’ emotions, draw their attention, and put them in the right frame of mind to make a purchase. It’s also one of the main factors in customers’ perception of a brand.

With an infinite number of possible color combinations out there, it can be hard to decide what colors will make the biggest impact on your site or app. It would be impossible to test everything, but we’ve picked up a few tricks and trends about how color affects users’ attitudes and behavior.

In this article, we’ll cover basic color theory, psychology, accessibility issues, and impact on conversion rate. We’ll also share some of the findings from a recent 50-person study we ran to find out how men and women perceive color schemes differently and how color can attract attention and make a website memorable.

Color theory 101

If you’ve ever taken an art class, chances are you’re familiar with the color wheel. If not (or if it was more than a few years ago), here’s a quick refresher.

color-wheel

Primary colors (red/magenta, yellow, and blue/cyan) can be mixed to create secondary colors (orange, green, and purple). White can be added to a color to create tints, and black can be added to create shades. The lightness or darkness of a color is known as its value.

Colors that are opposite each other on the wheel are complementary. They contrast strongly, and they can be used to attract the viewer’s attention and build energy. Take a look at the Eat 24 food delivery app below. The complementary color scheme is energizing, making the user feel like their food will arrive in a hurry. Plus, red is associated with hunger and with speed.

Eat 24 app screenshot

Eat 24 uses a bold red against a green background to make users feel hungry and excited.

Colors that are next to each other in the wheel are analogous. They have lower contrast, and they can be used to create a sense of harmony and continuity in a design. Calm, a meditation app, uses the analogous colors blue and green to help users feel relaxed and peaceful.

Calm app screenshot

Calm’s cool, analogous colors are soothing and quieting.

When you’re using colors in text, be aware that placing two colors with low value contrast next to each other can make your copy very difficult to read (whether they are complementary or analogous colors). 

color contrast example

Low-contrast text is beautiful and harmonious, but higher-contrast text is much more usable.

This is especially true on mobile screens, where users are more likely to be outdoors or in bright places that cause screen glare.

Color psychology and associations

It’s a well-known fact that colors can provoke emotions. Here are some emotions traditionally associated with colors:

Red: Power, passion, appetite, love, danger

Orange: Confidence, cheerfulness, friendliness

Yellow: Youth, happiness, warmth, sun

Green: Growth, money, healing, environment, envy

Blue: Trust, peace, loyalty, masculinity, safety

Purple: Royalty, mystery, spirituality, creativity

Brown: Outdoors, food, conservatism, earth

Black: Formality, luxury, sophistication, death

White: Purity, simplicity, goodness, freshness

Keep in mind that color associations vary from culture to culture and from person to person. Men and women often have different color preferences, and colors that are en vogue this year might be much more effective with a younger or higher-income audience.

Brand and industry

As you can see in this chart, many popular companies have used color to evoke a particular emotion in their customers.

color emotion guide

These famous brands chose colors that elicit a desired emotion.

Customers also form color associations for certain industries, such as blue for tech, green for health, and red for fast food. While some companies choose to match customer expectations by using their industry’s common colors, others have found that going against the grain can be a very effective way to make an impression.

Here’s an example. Blue is a very common color for websites and apps in the travel industry. Take a look at the following websites’ home pages:

hipmunk

Hipmunk uses a cheerful sky blue.

delta

Delta’s home page is an authoritative dark blue.

amtrak

Amtrak uses a reliable medium blue.

bart

BART went with… you guessed it… blue!

Blue represents reliability, which is a good thing for travel companies. But there’s no hard and fast rule that all travel sites have to be blue.

Virgin America chose to go against the grain with the design on their site, as you can see below.

virgin america

There’s not a drop of blue to be seen on Virgin America’s website.

While it might not be what users would expect from an airline website, it certainly stands out. Choosing unexpected colors can be an effective way to add delight to an experience—and to make users remember your company.

Think about how traditional your target customer is. How would they react to a change from the norm? Would it be delightful or disorienting for them? What message would your company be sending by if your color scheme broke away from traditional expectations?

Women’s preferences vs. men’s preferences

In our recent 50-person study, we chose a sampling of 30 websites that fit into three different color scheme categories: Bright, Dark, and White/minimal, like the three examples below.

bright websites

10 of the websites in our test used very bright, bold colors.

dark websites

10 of the sites used primarily dark colors, with pops of color here and there.

White websites

The other 10 websites in our test were predominantly white, with sparing use of color.

We asked an equal number of women and men to rate how unpleasant or pleasant the websites made them feel, on a scale of 1 to 5 (1=very unpleasant; 5=very pleasant). Here’s how they rated the sites:

men-and-women-rankings

We learned that women preferred the bright sites most strongly, giving them an average rating of 4.35. While men also liked bright sites best (giving them an average score of 4.18), they ranked the dark sites as a close second (4.04, on average). By contrast, women gave dark websites the lowest rating with a score of 3.38. Both genders felt almost equally “meh” about the white/minimal websites, giving them an average rating of 3.6 (women) and 3.54 (men).

Men who gave dark websites a high rating were more likely to describe those sites using very positive words like “happy,” “fun,” and “amazing.” By contrast, women who rated the dark sites highly tended to use more reserved descriptions, like “expensive,” “professional,” and “elegant.”

(Editor’s note: Yes, this study was a fairly small sample size, and the differences were not large enough to conclude that all women like bright websites and hate dark ones. Keep gender differences in mind, but be sure to run your own tests to see how men and women respond to your site!)

Color and accessibility

How does your site or app appear to your users who have visual impairments?

Approximately 8% of men and 0.5% of women are affected by some form of color blindness. While there are multiple forms of the condition, red/green color blindness is the most common. Folks with red/green color blindness have trouble distinguishing reds, greens, and yellows of similar values, especially when the greens have more yellow than blue in them, like the olive background in the picture below.

color blind example

The same button as seen with full color vision (left) and a type of red/green color blindness (right)

If you’re using colors with low value contrast, be aware that users who have color blindness might not be able to make out the words or the images at all. This is especially a problem around the winter holidays, when lots of websites are decked in festive red and green. Remember, if 8% of your male visitors can’t see the words on the button telling them to Buy Now, then you’re probably missing out on quite a few conversions.

If you’re in a situation where you have to use a color combination that could be difficult for people with color vision impairments, you can still improve accessibility by increasing the value contrast between the colors. For example, take a look at the picture below. It’s a lot easier to see a very dark red against a very light green (even if you aren’t color blind).

color blind example (good)

This button is easy to see with full color vision (left) OR with color blindness (right).

Testing tools

There are some great tools available to help you test your site’s accessibility. You can download Color Oracle’s color blindness simulator for Windows, Mac, and Linux, or you can upload your static images into Coblis to experience them with nine different types of color vision. You can even user test your site with someone who has color blindness to find out whether anything was difficult for them to see.

Other accessibility concerns

While we’re thinking about accessibility, don’t forget about the people who will be using screen reader software to view your website. Have you ever gotten an error message when you’re filling out a form that says something like, “The fields marked in red are required”? This can be an extremely frustrating experience for people who can’t see the red characters. It’s better to avoid referencing the colors on the site or app, and give more specific error messages like, “An email address is required.”

The impact of color on conversion rates

Okay, let’s dig into the exciting stuff. What colors are really going to improve your conversion rates and boost your bottom line? How can you use color theory and psychology to get people to click on a button?

For every conversion rate optimization expert out there who claims that a bold, eye-catching red is the best color for a button, there’s another who says that green is the best because green means “go.”

There are plenty of A/B test results that show how a change in the color of a CTA button made a drastic impact on signups. HubSpot shared this famous test from their early days when they were known as Performable:

Red/green button A/B test

Performable’s A and B versions of the button color test

Even though they originally predicted the green button would perform better, the red button resulted in 21% more clicks.

But they also warned their readers that this test result alone shouldn’t make everyone run out and change their buttons to red. It’s possible that their audience simply prefers red, even though other audiences might prefer green. Or, more likely, the red button got more attention because it was one of the only red objects on the page.

The bad news is that there isn’t a magical color that consistently performs best for all websites. The good news is that there are some rules of thumb that can help you use color to your advantage.

Contrast is key

It seems obvious, but we’ll go ahead and say it anyway: If you want users to click something, make it stand out! If your site or app uses a lot of orange, users probably won’t notice an orange button right away, no matter how well orange buttons performed in another company’s A/B test.

Remember, contrast isn’t just about complementary colors on the color wheel; it’s about value, too. A light button won’t stand out against a light background as a dark button would. On top of that, the copy needs to stand out against the button, too.

In our study, we asked users to show us the first thing they would click on each website. Not surprisingly, users were much more likely to click a CTA button that strongly contrasted with the background.

Bright is memorable

As the final question in our 50-person study, we asked users which of the sites they visited was the most memorable. 50% chose one of the bright sites as the most memorable.

Many of the users who chose one of the dark or white websites did so because of something unrelated to the design. For example, one user thought Dropbox was the most memorable because she already had an account with them.

Most of all, listen to your users

We’ve covered several color-related issues that can affect the user experience on your site or app: traditional color associations, the differences between men and women’s perceptions of color schemes, and accessibility concerns. These factors are a great place to start when you’re creating a new design. But ultimately, the right design decision is the one that your users think is right.

Ultimately, the right design decision is the one that your users think is right.

[Tweet this.]

That’s why it’s so important to get feedback from your target market early in the design process. Find out if your color choices are affecting your users in the way you expect them to.

Sample test questions

    Here are a handful of test questions you can ask users when you’re testing out your color choices:

    • Before visiting [this site/app], please tell us what you would expect from a company that does [what your company does]. What do you expect to be able to do? How do you expect the site/app to look?

    • What is the first thing you would click/tap?

    • What are three words you would use to describe this site/app?

    • On a scale of 1 (very unpleasant) to 5 (very pleasant), how did this site/app make you feel?

    • How likely or unlikely would you be to trust this company?

    • How did this site/app compare to your expectations?

    • Can you think of any other companies that have very similar offerings? How would you compare this company to them?

    P.S. If you enjoyed this article, don’t forget to check out our article on user-friendly icons, too!