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.
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 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.
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).
This is especially true on mobile screens, where users are more likely to be outdoors or in bright places that cause screen glare.
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.
As you can see in this chart, many popular companies have used color 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.
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:
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.
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?
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.
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: 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!)
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.
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).
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.
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.”
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:
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.
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.
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.
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.
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?
Join 120,000 subscribers and get articles like this every week.
Get ready for some great content coming to your inbox from the team at UserTesting!