The Psychology of Color and Online Conversion

One of the biggest influencers of online conversion, believe it or not, is the color scheme of a webpage. Through the right combination of colors, a company can increase leads, boost orders and see more visitors become clients. How does it work? How can you use color to your advantage in your website?

Here is Straight North’s overview on the basic principles of color psychology, along with some key tips for testing colors to maximize effectiveness!

Basic Principles of Color Psychology

1. Colors Affect Readability

The first principle of Web color is a pretty utilitarian one because, before you can consider the emotional ramifications of colors in Web design, you have to consider the practical ones, namely: Will your readers be able to see your messaging? “Readability relies a lot on typography but color contrast is also key to keeping text readable,“ says Tom Kenny of Inspect Element. “Make sure there is enough contrast between the text and the background colour or image.” Color, as much as size and font choice, directly affects the readability of your online text. Use appropriate contrast to make it possible for readers to understand the message you are seeking to convey.

Takeaway tip #1: Make sure your site's background color contrasts with the color of its text.

2. Colors Communicate Emotions

“When choosing colors for your designs, be deliberate; don’t use colors without purpose,” says Shannon Noack at Six Revisions. “Instead, use colors that are appropriate for your target audience, the message that the client wants you to convey, and the overall feelingyou want the user to experience on your site.” One key to using colors effectively is understanding what emotions they convey. While the specific connotations may vary based on audience, here are some traditional color meanings, along with examples of websites using those colors to communicate their messages:

Red: (Example: Intensity in Ten Cities) Can symbolize excitement, passion, importance or anger, aggression, emergency.
Orange: (Examples: World Vision, Whataburger) Sometimes brings to mind thoughts of happiness, joy, sunshine; other connotations include ignorance and deceit.
Yellow: (Examples: Chick-fil-A, Lipton) Often thought of as the color of joy, happiness, intelligence, brightness; sometimes connotes caution, criticism, jealousy.
Green: (Examples: Freecycle, Mint, Whole Foods Market) Thought of as healing, harmonious, safe, while also sometimes connected with money, greed, innocence or growth.
Blue: (Examples: Facebook) Can communicate a sense of peacefulness, calm, trust or loyalty; or alternatively, a sense of sadness, depression, coldness.
Purple: (Examples: Northwestern University, Yahoo) Long considered a color of royalty, purple can evoke a sense of luxury, wealth, spirituality, femininity, magic or mystique. Darker purples tend to symbolize sadness.
White: (Examples: Apartment Therapy, Anthropologie, Banana Republic, ) Can communicate purity, simplicity, cleanliness and safety as well as coldness and distance.
Black: (Examples: Wall Street Journal, Duracell) Often used to suggest formality or elegance, black actually has many versatile applications. It's the color most commonly associated with death and can sometimes suggest vastness or depth. Some individuals connect it with power or modernism.

Takeaway tip #2: Consider the emotional connotations of colors and how they may impact users.

3. Colors Interact with Each Other

There's a reason websites like ColourLovers and Color Blender exist. Different Colors interact with each other differently, whether that means complementing, contrasting or working together to communicate a certain message. One of the keys for determining what colors work best together in a given design is knowing your audience. "If you’ve carefully researched your target market ... you may already have an idea of what colors will work for them," says Pamela Wilson at CopyBlogger. "You don’t need to walk around your local shopping mall with a swatch book, but keep your eyes open to color combinations that sell to your particular market. Take inspiration from what’s already working."

Takeaway tip #3: Look around at other websites in your field to see what colors are working well.

4. Color Choice Should Be Consistent

"In general one can say that the risk of using too many colors is greater than the risk of using too few," says ColorsOnTheWeb.com. "Too many colors will make the page feel too busy and it usually makes it harder for the viewer to find the information he or she wants. It is also more tiring to the eyes." For this reason, many designers recommend using two to three colors consistently throughout your design. The main color should be used predominantly, with a secondary color complementing it and a third, highlighting color drawing attention to key elements and adding interest.

Takeaway tip #4: Select a handful of colors (i.e., 2 or 3) and use them consistently throughout your design, with one predominantly.

Takeaway tip #5: Highlight key information and draw attention to important elements through the use of color.

5. Web Colors Do Not Equal Print Colors.

"While it's only obvious to ensure you're working within acceptable limitations of color contrast in the general sense of design, we [as Web designers] have even more to contend with," says Jonathan Christopher of Monday by Noon. "That's because Web designers build materials to be viewed on computer monitors, which come in various types and sizes, meaning "many of the monitors on which your design will be displayed are of much less quality than yours." Because colors can look so different on different screens, it's a good idea to select colors that are typically brighter than what you'd use in print.

Takeaway tip #6: Use colors that work on various screens.

How to Test Color on Your Website

Even a Web design that takes into account all the above color design principles may still need to be tweaked to be its most effective---so how can you test your design to see where colors are or aren't working?

Here are a couple tips for measuring the effectiveness of the color on your site:

Test One Thing at a Time. Because multiple variables can make it difficult to evaluate the results, plan to test your colors one element at a time. Change one aspect of color on your site and see what happens---then you'll be able to pinpoint the cause of the changes easily.
Test Small but Important Elements. The truth is, changes to colors in certain key design elements, such as your contact info or call-to-action button, can potentially make a huge impact on results. As Aaron Bradley writes at Search Engine Land, "Testing always plays a pivotal role in conversion rate improvement, but it is particularly important in crafting a winning button." He adds, "Color has a demonstrable influence on whether or not a user will click on a call-to-action button, but determining precisely which button color will result in the highest number of clicks is, yet again, a matter of testing."
Get Help When You Need It. If you're a company that wants to do color testing on your site but lacks the resources to do it internally, Straight North can help---contact us. We can support simple A/B split testing as well as much more complex testing methodologies.