Using Color on the Web

By Joan Hertel

The Institute for Color Research has found "… all human beings make a subconscious judgment about an ... item within 90 seconds of initial viewing and that between 62% and 90% of that assessment is based on color alone."  Most of us think about color on brochure covers or as illustrations in a booklet. More and more opportunities are opening to use different mediums in the field of technical communications. One medium that technical communications is becoming more and more involved in is the internet and web page design. Color influences how a potential customer views a web page (Peterson 2005). Color can be used to help organize and set the mood of a web page and has different associations in different cultures.

One way in which color can be used to organize the web page is to use different colors in the headings (Ivory & Hearst 2002). Using a different color for the heading helps to keep the page interesting and will help the user find an outline easier to follow.  Keep in mind that some individuals are color blind so do not rely on color alone to provide information. An example of this would be bar charts that only use color versus bar charts that use texture to mark the different bars (Karagol-Ayan 2001).

Color helps to create a mood or feeling. Different colors represent different moods. Generally, red denotes passion, yellow denotes cheerfulness, blue denotes peacefulness, and gray denotes gloom. Colors can be combined to create different moods. To create a warm mood, use warm colors such as yellow, orange, and red. To create a cooler mood, use green, dark blue, and violet (Glithero 1999). Use neutral colors such as beige with an accent color. Consider your product, your audience, and what message you want to project or create. Tie the colors on the page together to create a mood and to unify the topic. One way this can be accomplished is to use colors that are in a key photo or graphic to make the page more harmonious.  Another idea is to tone down colors to look more like colors found in nature so that a page does not appear harsh (Peterson 2005).  Remember, the mood created will affect the potential customer.

Using too many colors causes visual confusion because the eye doesn’t have a single focal point. The best idea is to use no more than three color palettes so that the presentation does not look cluttered (Peterson 2005). Use pale, light colors for your background color and brighter or darker colors for your foreground text. Let one color be the dominant color on the page and have the other colors act as accent colors. One more hint, concentrate your colors in a few key areas rather than spreading color all around the page (Parker 2005).

Color has different meanings in different cultures. A culturally offensive site color scheme can undermine your best intentions. The colors that you choose will probably represent or inform potential customers about a product. Color usage needs careful thought regarding the target audience (“Strategic Use of Color in Marketing Materials” 2005). Research your cultural colors to ascertain that a message is not weakened or made ineffective because of poor color choices.

Color can be fun to use on web pages, but it needs to be used with careful consideration.  Knowledge about colors can be helpful creating harmony, moods, and impressions. A technical communicator needs to know the effect color in both hard copy and online. Color is more than just fun, it is crucial to any presentation. 

Sources

Glithero, Sean. 1999. Setting the Mood with Color. Encyclopedia of Educational Technology. Retrieved March 21, 2005. http://coe.sdsu.edu/eet/Articles/colormood/index.htm

Ivory, Melody I. and Marti J. Hearst. 2002. Statistical Profiles Of Highly-Rated Web Sites. From proceedings of the SIGCHI conference on Human factors in computing systems: Changing our world, changing ourselves. New York, 20-25 April 2002, pp. 367-374. Retrieved March 9, 2005 from The ACM Digital Library, http://delivery.acm.org/10.1145/510000/503442/p367-ivory.pdf?key1=503442&key2=3202040111&coll=GUIDE&dl=ACM&CFID=39704679&CFTOKEN=35428963

Karagol-Ayan, Burcu. April, 2001. Color Vision Confusion. Retrieved April 5, 2005 from University of Maryland, Online Teaching and Learning,    Universal Usability in Practice at http://www.otal.umd.edu/UUPractice/color

Parker, Roger C. Working With a Limited Color Palette. Xerox Color Connection. Retrieved March 21, 2005.    http://www.colorconnection.xerox.com/wwwco578/html/en/live/limited_color.html

Peterson, Donald. Does Color Really Matter?, Great Web Color Sells. Newark1 Web Design Guide and Portfolio. Retrieved March 21, 2005.  http://www.newark1.com/color/000107.html

Strategic Use of Color in Marketing Materials. Keysteps Internet Marketing. Retrieved March 21, 2005. http://www.keysteps.com/Tips&Articles/color-marketing.htm