How color impacts conversion rates and UX

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—and don't forget that color impacts conversions, too.

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
• Color psychology and emotional associations
• Color accessibility issues
• The impact of color on conversion rates
• Testing color choices - sample test questions

We’ll also share some of the findings from a study we conducted to learn how men and women perceive color schemes differently and how color can attract attention and make a website memorable.

Basic color theory

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.

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 Apple's Messages app icon. The complementary scheme immediately catches the eye and the red notification demands attention.

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.

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).

Low-contrast text is beautiful and harmonious, but the 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 emotional associations

Colors can provoke emotions for many people. Take a look at the color psychology chart below to see some of the emotions and themes traditionally associated with colors:

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. If you'd like to learn more about color meanings, check out Canva's interactive tool on color meanings and symbolism.

Brand and industry

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

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.

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

We conducted a 50-person study in which 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.

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

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

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:

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: 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 or app.)

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.

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 colors. For example, take a look at the picture below. It's a lot easier to see a dark red against a light green—even if you aren't color blind.

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

Color accessibility testing tools

There are some great tools available to help you test your site or app'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 or app 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—the colors that sell. 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:

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.

Testing color choices: 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?

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.

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.

Want to learn more?

If you’d like to learn how UserTesting can help you understand your customers through on-demand human insights, contact us here.