Choosing the Right Colors for Your Web Site

Website Usability Second Edition - Published date: September 15, 2008 Choosing the Right Colors for Your Web Site Do colors influence web site visitors? Adriana Iordan, Web Marketing Manager, Avangate Updated by Roxana Patrichi, Web Marketing Specialist, Avangate Website Usability, Published date: September 15, 2008 When creating a site, choosing the optimum colors is one of the most difficult tasks that arise in spite of the apparent easiness. Choosing the perfect chromatic palette is important in order to effectively communicate the message, in order to strengthen the idea of a unique entity and to create brand awareness. How to choose colors? Researchers agree that colors greatly influence the human state of mind. The color scheme that you use on your web site can entice the visitor to engage in the goal of your site (i.e. make a purchase or request your services) or leave it after the first few seconds. Even if they are not aware of it, your visitors will be greatly influenced in their decision to keep browsing your site or to leave it because of the poor selection of colors and other visual displayed elements. I have recently come across two articles on smashingmagazine.com that proposed specific color palettes for specific purposes. So far the main fields of activity tackled were traveling companies from both domains. Irrespective of the field of activity, we present you a few tipshere are a few tips that you should consider for any website: 1. Use a natural palette of colors They are more pleasing than any of their artificial counterparts. Combine them in order to get the emotional response that you want to get from your visitors. Unnatural colors, such as bright green, blue or red usually cause eye fatigue and chase visitors (i.e. prospects) away. Also you and insurance with concrete examples of © 2008 Avangate page 1 www.avangate.com Website Usability Second Edition - Published date: September 15, 2008 should be aware that primary colors like red, yellow or orange can work well for culinary promotion purposes. 2. Create a strong contrast between a page's background and its text The best combination for readability is black text on white background, but there are also other excellent combinations. Besides white, other effective web site background, colors are dark blue, gray and black. The situation is not the same for product promotions. When the product is the center of attention, desaturated colors are recommended. You can see in the photo below exactly the difference. *While in the first picture the product box might skip out of the attention, in the second photo all the eyes are attracted mainly by the product box. 3. Select an average of 3 different colors and use them consistently throughout the web site Chromatic harmony is one of the most important criteria in order to create a pleasant experience for the visitors. It is strongly recommended that a moderate number of colors should be employed; four or five is ok; more than that not only will they create inconsistency, by they will also cause an eye sore for the visitor making him skip important parts of the site. 4. Be sure to take into account people with visual disabilities Make sure that the message of your site reaches such people as well. I have recently read a very useful article in this particular respect written by Aries Ardity (a vision science PhD), called Effective color contrast . The most important to-do's and not to-do's were taken from that article and reproduced below. You can see below according to that article the most effective background colors in association with writings of certain colors. © 2008 Avangate page 2 www.avangate.com Website Usability Second Edition - Published date: September 15, 2008 Keep in mind that responses to colors vary according to factors such as gender, age or cultural background. You need some serious market research in order to make your site appealing for the exact category you're targeting. Nevertheless, if you are interested in an official piece of recommendation, you should check out Web Content Accessibility Guidelines 1.0 . Old vs. Young People People of different ages have different reactions to colors. People past a certain age will find web sites with more sober and restrained (and therefore relaxing to the eye) colors more attractive. Youngsters, on the other hand, will appreciate more vivid and brighter colors. Make the distinction between mature and young audience by using the appropriate colors for each category. This might be regarded as an ordinary factor, judging by the fact that with time people require visual correction. I found a comprehensive graphic on Age-Related Changes in Vision taken from a presentation by Robert W. Bailey, a PhD in computer psychology according to which the age comprised between 30 and 50 is the most probable for the apparition of visual impairments. Men vs. Women People also have preferences according to their gender. Thus, men tend to prefer blue and orange to red and yellow, while women prefer red to blue and yellow to orange. Also, remember that it has been proven that women are able to perceive considerably more colors than men; in other words, while men may find peach, teal or peacock as mere notions, women associate these things with colors. © 2008 Avangate page 3 www.avangate.com Website Usability Second Edition - Published date: September 15, 2008 Also, free yourself from prejudices: if you are addressing to women, do not automatically employ pink. While some women may enjoy pink, others may not. I have recently encountered a very interesting study which revealed that blue is the favorite color of 57% of men and of 35% of women, so pay attention Nations and Colors If your website addresses an audience larger than your country of origin or it is meant to attract prospects from a specific country, invest some time in researching the specific meanings of colors. For example, while white is a symbol of purity in Western cultures, it stands for bad luck and unhappiness in China, Japan, and India. While very appreciated in Japan, pink is frowned upon in India and East-European countries, where it is regarded as a ‘non-manly’ color. Purple is associated in certain Arabic cultures with prostitution (the same as red in the European and North-American cultures), and globally, it is generally associated with mysticism and beliefs that are not in keeping with the precepts of Islamism, Judaism and Christianity. Green, if used for the web site of a financial institution from the USA, will support the implication that the institution deals with the 'almighty green dollar', but it may bear no such significance in a country where bills (paper money) are multiple-colored. This can lead to a complete change of meanings, significances will be changed and negative implications will be at the very least diminished, if not eliminated altogether (e.g. red becomes more powerful when combined with white). It is up to you to obtain creative colors that will be internationally accepted, but you have to do your homework quite well. Common Colors and Their Most Common Meanings • • • • • Red: energy, passion, excitement, power; also implies aggression, danger. Blue: coolness, spirituality, freedom, patience, loyalty, peace, trustworthiness; can also imply sadness, depression. Yellow: light, optimism, happiness, brightness, joy. Green: life, naturalness, restfulness, health, wealth, prosperity; in certain contexts, can imply decay, toxicity. Orange: friendliness, warmth, approachability, energy, playfulness, courage. page 4 www.avangate.com © 2008 Avangate Website Usability Second Edition - Published date: September 15, 2008 • • • • • • Violet: wisdom, sophistication, celebration. White: purity, cleanliness, youth, freshness, peace. Black: power, elegance, secrecy, mystery. Gray: security, maturity, reliability. Pink: romance a feminine color. Brown: comfort, strength, stability, credibility. From a psychological point of view, I suggest reading Color Psychology in Online Marketing , an article by Al Martinovic. Tools to help you choose the best color combination In order to offer you some concrete examples, we will enumerate below a series of concrete tools to help you select the best combination: Adobe Kuler is a useful site providing preset colors. The main advantage is the fact that visitors can choose the set of colors that best suit them basing on different criteria like rating, positive comments or even the names of those combinations. ColourLovers is a resource which aims at influencing chromatic trends. This is a great place to check out the world of color irrespective of the purpose, be it for ad campaigns, product design or architectural design. You can compare palettes, submit news and comments or read articles and interviews. Red Alt - I Like Your Colors is another important resource if you enjoy a particular website and you would like to employ the same set of colors or at least detect exactly which are the hues employed with their corresponding programming code. You just insert the URL of that site and the colors are extracted. ColorJack is a very interesting site, very similar to Kuler, providing different color combinations basing on certain algorithms. The main tools offered are Color Galaxy, Color Sphere and Color Studio; if you are not familiar with web design programs, they may seem a bit difficult to use, but you will get easily accustomed. © 2008 Avangate page 5 www.avangate.com Website Usability Second Edition - Published date: September 15, 2008 DeGraeve Color Paletter Generator is similar to the Red Alt tool. What is more interesting about this one is the fact that you can select a photo that you think it best suits your type of business and this instrument will extract the color palette it consists of. To conclude Irrespective of the purpose of your website, whether it is for selling or not, the chromatic choice is of utmost importance. Playing with colors might turn out to be really fun, but one should be aware that every chromatic set suggests something else, an emotion, a social meaning; so, choose with care. *** Sign up now for the Avangate Digest Newsletter and receive our Internet marketing tips, shareware industry tools, techniques and resources as soon as they're released. E-mail this to a friend *** Copyright © 2008 www.avangate.com all rights reserved. This article was written by Adriana Iordan, Web Marketing Manager at Avangate and updated by Roxana Patrichi, Web Marketing Specialist at Avangate. The authors have in depth knowledge of internet marketing services and website analysis applied to the software industry and e-commerce development. This article may be reproduced in a website, e-zine, CD-ROM, book, magazine, etc. so long as the above information is included in full, including the link back to this website. Please e-mail at articles@avangate.com, before using the article. *** About Avangate Avangate provides solutions for electronic software distribution and reseller management, assisting software companies worldwide in successfully selling their products online and at the same time efficiently managing a distribution network. The company’s offer includes an eCommerce platform incorporating an easy to use and secure online payment system plus software marketing services and additional marketing and sales tools such as an affiliate network, automated cross selling options, software promotion management, real time reporting, 24/7 shopper support, and the ARMS reseller management program specifically designed for software sales. More information can be found on the corporate website, at www.avangate.com Avangate Van Heuven Goedhartlaan 937, 1181 LD Amstelveen, The Netherlands Tel: +31 208908080 Fax: +31 202031309 Web: www.avangate.com Email: info@avangate.com .member of GECAD Group, delivering innovative IT solutions Worldwide since 1992 © 2008 Avangate page 6 www.avangate.com