Testing Color Combinations

Discover methods to test if your color combinations are doing their intended job
Testing Color Combinations Lesson

Visual design, content, and interaction design are all part of the holistic user experience. Testing colors within the visual design allows you to determine:

  • If your users respond positively to the palette
  • If your brand colors convey your brand values
  • If the color choices help users achieve their tasks
  • If the design results in conversions

Different types of testing are suitable for each goal, but the most common methods are testing color perceptions, ensuring sufficient contrast, optimizing conversions, and more general usability testing.

Even if you don't have the time or resources to conduct independent color testing, you can implement it within usability testing. When you do have the resources to test color independently, there are a variety of models you can implement, from user interviews to A/B tests.

Why it's important to test color

You pick a beautiful color palette for your design, and your team loves it. Should you still test it for color perception? The answer is yes. Just because your team likes it doesn’t mean your users will. People see colors differently, and what looks good to you might not appeal to your audience.[1]

Colors also have different meanings in different cultures, so testing is crucial. Even if you choose colors based on psychology, users might not get the message you intend.

Finally, small color changes can make a big difference. For example, tweaking the shade of a CTA button can significantly impact conversions. Testing helps you make these informed decisions based on real data.

Choosing palettes to test

To start testing color palettes, you must first create them. How do you know if your palette is ready for testing?

  • It's based on color theory. You followed color theory to create a harmonious color combination.
  • It fits your brand. The color palette represents your brand values according to color psychology.
  • It's accessible. The palette includes colors with a range of contrast sufficient to comply with the Web Content Accessibility Guidelines.
  • It doesn't have any controversial connotations. You took into consideration local color meanings if your product targets a specific country or region.

If these 4 conditions are satisfied, you're ready to move on to the testing stage.

Color testing methods

There are several ways to test color palettes. The most common methods include testing color perceptions before finalizing the color choice, usability testing of the final design, and A/B testing after the launch.

Testing color helps answer these questions:

  • Which color palette do users prefer?
  • Which color palette best represents brand values to the target audience?
  • Do the colors in the interface help users complete their tasks?
  • Which color combinations lead to better conversions?

Since color perception is highly individual, all color testing should involve real users — your product's target audience. Methods that rely on personas instead, such as cognitive walkthroughs, heuristic evaluations, or expert reviews, aren't very useful for this purpose.

Testing for color perception

Testing color perception involves showing users the colors or design and evaluating their reactions. The approach you take depends on your testing goals.

For first impressions, it's best to show the colors briefly. Tests like the 5-second test[2] and the first-click test[3] are useful for capturing initial reactions. To find out what users prefer, present them with multiple color combinations or designs for comparison.

Testing colors in isolation helps you select the right ones. However, user reactions may change when these colors are part of a full design, so test them within the actual UI. Key elements to focus on include CTAs, text, and background. For remote testing, tools like Typeform that allow image display can be effective.

When testing UI elements, assess one element at a time to pinpoint what influences user perceptions. Ensure the differences are clear enough for a non-designer to notice.

Testing for sufficient contrast Bad Practice
Testing for sufficient contrast Best Practice

Color vision deficiency affects about 1 in 12 men (8%) and 1 in 200 women globally.[4] If users struggle to see your content, they’re unlikely to engage with your product. Ensuring accessible color contrast not only aids those with vision deficiencies but also improves legibility for all users. Before starting UI testing, make sure your colors comply with web accessibility guidelines.

WCAG 2.2 level AA requires a contrast ratio of at least 4.5:1 for normal-sized text. Similar requirements apply to large text, icons, input borders, and other elements.

There are several accessibility testing tools to help you check color contrast:

  • The Stark plugin has a free version and works in Figma, Sketch, Adobe XD, and Google Chrome to measure accessibility color contrast. 
  • Tools like Colorable can help you choose a suitable text/background contrast. 
  • Google Lighthouse in Chrome helps measure the contrast between elements on a web page.
Testing for usability

Visual elements like colors are part of a holistic experience, which also includes content and interaction.[5] While first impressions matter, they don’t provide the full picture. That’s why it’s crucial to assess how colors impact user behavior and task success during product interaction.

Colors can significantly affect the usability of buttons, links, and other components. For instance, gray buttons may appear disabled, even if they are not.

If usability testing indicates that some colors are not effective, revisit and adjust your palette. Continue testing until both you and your users are satisfied with the results.

Pro Tip! If you only have the time and resources to do one test before launching the product, make it a usability test with added techniques to assess visual design.

Once you've developed your product based on user behavior and feedback, you can use A/B testing to further improve conversions. A/B testing compares two designs to see which one performs better. It's most effective when your website already has traffic; otherwise, the testing may take too long.

When testing color, focus on one element at a time. For example, the color of a button can significantly impact the effectiveness of a CTA, making it a key element to test individually for conversions. In 2011, the marketing automation platform Performable tested its "Get Started Now!" button by comparing a red version against its usual green one. The red button resulted in a 21% increase in conversions.[6]

Does this mean red is the best CTA color? It worked for their website, but it doesn't guarantee the same result for yours. A/B testing helps determine which color your audience responds to best.

Testing frequency Bad Practice
Testing frequency Best Practice

Test colors whenever there’s a big change. This could be when you’re adding a new design, changing existing colors, or if a competitor makes a major change, like switching from light to dark mode. Colors affect how users interact with your site, so it’s important to keep testing as trends change and the design industry evolves. This way, you can make sure your design stays effective and appealing to your audience.

Complete the lesson quiz and track your learning progress.
Start
<?xml version="1.0" encoding="utf-8"?>