Color is an important part of the way we experience the world and an essential tool when designing a website. It can convey different emotions and can have a profound psychological influence on an individual. There are color associations and preferences that we make as users every day, but does color actually impact conversion rates? Can your website's color scheme lead users to spend more time on your site versus your competitor? (Spoiler alert: the answer is YES!)
Color accounts for 90% of the reason you purchased a certain product or laid eyes on a specific ad in a magazine. From the color of a link to the contrast of a button, color directly impacts a user’s actions. Well-balanced usage of color can give your website a competitive edge and also increases brand recognition. To start using color as a tool in designing your website, here are three points to consider:
Color Associations
All users have unique color associations and preferences that are based on culture, personal history, and mood. Although there is no hard and fast rule when choosing a color scheme, consider color in different contexts. How is the color you've chosen being viewed by the user? Can your design be interpreted positively or negatively in different parts of the world?
Color can also be interpreted when viewing a design as a whole, not solely as a color on its own. Traditional and primary colors often differ in tone, and different hues and evoke different emotions. Consider how you feel when viewing an object that is bright, neon green versus looking at a photo filled with deep, forest green. Below is a general guide on what experts believe colors communicate:
Red – The history of red is mixed. It has been used to symbolize celebration or destruction. Nowadays, red is used to communicate intense emotions such as anger, love, danger, and excitement.
Yellow – Yellow most represents caution since it’s one of the most visible colors from a distance. It also associates with emotions of optimism, happiness, clarity, and creativity.
Blue – Blue gained its reputation for being a lavish and valuable color when first discovered as an expensive mineral and used to dye textiles. Blue is associated with loyalty, intelligence, ambition, peace, and awareness.
Orange – Orange is a zesty color and represents fresh, youthful energy. This color has the warmth of red and the optimism of yellow. Orange can be used effectively in varying themes ranging from safety to motivation.
Green – A mixture of yellow and blue, green adopts the qualities of growth, stability, positivity, prestige, and quality. This color is often associated with nature and prosperity.
Purple – Purple obtains the emotion from red hues and the calming properties of blue. It is often associated with fantasy, mystery, luxury, and nostalgia.
Black – Black is the darkest color because of its total absorption of light. Black has developed along with the modern fashion scene to become a symbol of elegance and simplicity.
White – The mixture of light white and off-white shades symbolize purity, balance, practicality, and cleanliness. White is often used to communicate comfort and sophistication.
Color Accessibility
When designing a website, consider users with visual impairments or color vision disabilities. On average, 8% of men and 0.5% of women have a form of color blindness. That is an estimate of 217 million people living with a moderate to severe vision impairment. Selecting the right color palette can lead to enhancing readability by 40% and increase comprehension by 73% of users. Whereas, using color contrast incorrectly can negatively affect a sites conversion rate and deliver a bad experience for impaired users.
"On average, 8% of men and 0.5% of women have a form of color blindness."
WebAIM’s Contrast Checker can help you determine if your colors are within the regulated contrast ratio. Compare foreground and background colors in a hexadecimal or RGB format. To meet the ethical and legal standards of web color contrast refer to W3C’s minimum AA rating of the background-to-text contrast ratio being at least 4.5:1. Be sure to test buttons, cards, and site navigation for contrast combinations.
However, do not solely rely on color. Avoid adding error messages that reference color when a user is filling out a form. For individuals with color deficiencies, if they cannot see the referenced color, it can be frustrating, effectively bringing down your user experience. Be specific about error messages, such as, “the email you entered is not valid” instead of “the field marked in red is required.”
Know Your Audience
Audience color preferences differ based upon your brand’s goal. Ask yourself, what colors are going to improve my website conversion rate? The answer to that question depends on the research that you perform about your audience as it relates to your website. Although there is no one-size-fits-all when it comes to a color that performs best for all websites, there are key guidelines that can help when choosing your colors.
If you want a call-to-action (CTA) to stand out, use contrast. Try to use a color that standouts from the rest of the page to call attention to an action. This button color A/B test by HubSpot demonstrates how changing a CTA’s button color can make influence signups. The result? The red button resulted in 21% more clicks than the green button.
However, you must also consider the background color of the landing page when creating your button. Users are more likely to interact with a CTA that is bright and strongly contrasts with its background. A study shows that 50% of users selected a bright site as being the most memorable. Along with color, brightness or vibrancy, focus on visual hierarchy. How the website is arranged and how the colors guide the user represents the visual hierarchy path of the website's goal.
Conclusion
In summary, keep user preferences and accessibility top-of-mind when choosing colors for web design. Use color to reinforce your brand and draw attention to points of interaction with your site. Once you have decided on a palette for your website, do research to confirm that common color associations are in line with your brand. Next, leverage color accessibility tools to decide how to apply the colors to text, icons, and buttons throughout your site. Finally, identify the most important call-to-action on your site and assign it a bright, high-contrast color. You'll see conversion rates soar when you use color to strategically attract a user's attention.
Check out the following resources we recommend to help you understand color symbolism, build unique color palettes and test colors for accessibility:
Interested in working with fivestar*?
If you decide that it is valuable and profitable for your business to have custom software, fivestar* can develop solutions that centralize workflows, optimize processes, and enable decision-making through real-time data and business intelligence.
About the Author: Antoinette Antonacci
Antoinette Antonacci is a Graphic / UI Designer at fivestar* and brings experience in creating visual concepts and appealing interfaces. She works closely with the marketing team to create solutions to creative challenges using various applications and human-centered design. Antoinette holds a BA in Media Arts with a concentration in Graphic Design and Interaction Design from Robert Morris University.