Overview of how color can impact your Brand
One of the ways that a website can help your organization is by establishing an online presence for your brand. The color that you use with your logo and website cements the first impression of your brand determining whether visitors stay on the site and interact with you either by buying your products, services, or donating. According to Buffer, about 90% of our assessment of a site is made on this feature alone. Some examples of companies having a strong chromatic impression include Facebook and eBay. Facebook uses blue throughout the site and gives an impression of being trustworthy and calming. eBay uses green signifying the wealth that is producing by saving on its products.
What Impressions do different Colors Give
Below are some of the impressions and emotions produced when people visit your website. Blog posts in the future will describe and discuss each color in more detail. A correct choice and targeting your audience can increase your brand recognition by about 80%.
Black: confidence, power, sophistication, luxury
Blue: trust and a feeling of safety, produces a calming effect, dependability, reliability, balance, evokes a feeling of trust
Gray: credibility, quality, comfort
Green: well-being, nature/natural (lighter green), vitality, wealth (dark green)
Orange: energy, playfulness, extroversion, friendship, affordability/low prices — often associated with youthfulness
Purple: royalty, elegance, luxury, mystery, creativity
Red: Importance, passion, aggression, attention, warmth, masculinity, determination — this color is strong and grabs attention and gives your site confident vibe.
Yellow: happiness and fun, gives your site a fun vibe — Note: Yellow cannot reach the contrast ratio needed for WCAG 2.1 AA and still look yellow with a white background.
Considerations for Gender
Another factor is that men and women have different likes and dislikes. When choosing your brand colors you want to determine if most of your customers are men or women. Men tend to like blue, green, and purple, while women tend to like blue, purple, green in that order. Going from the above, if you are targeting both genders, blue would be a good choice. For men, exclusively, green might be a good choice. For women, exclusively, purple might be a good choice. Both men and woman are particularly fond of brown or orange and women especially do not like gray.
How Many Colors for you Use on a Website
It is generally considered best to use 2-3 colors on a website and follow the 60-30-10 rule. This means 60% of the most common, 30% of the second most common, and 10% of the third most common. Primaries are used for places where you want to direct the eye such as Call-to-Action (CTA) buttons, headlines, and important information. Secondary colors will accent the primaries and are found generally in subheadings and supporting content. Neutral colors such as white, black, or a shade of gray fill in the background (this is called the white space).
Considerations for Disabilities
When designing your website you want to keep contrast in mind for people with disabilities. Contrast is especially relevant for those who are color-blind but also impacts those who have dyslexia or those who have low vision. The Web Content Accessibility Guidelines (WCAG) state that contrast has to be at least 4.5:1 for large text (>18pt) or 7:1 for small text (<18pt). Most color-blind users will have difficulty determining differences between red and green, however, there is a lesser-known group that also has trouble seeing the difference between yellow and blue or red and yellow. Additional information on the types of color blindness can be found on the website of the National Eye Institute). The upper end of contrast, i.e. 21:1 (white on black or black on white) can produce eye fatigue in those who do a lot of reading. Often it is best to use a dark shade of gray instead of straight black when writing text on a white background. It gives a softer feel.
