Musings: Color, evoking emotion

July 2008

Yesterday I was visiting with friends. At one point her four year old son and 86 year old mother-in-law were sitting huddled together at the dining table with water paints and whispering in a conspiratorial manner as they painted. Later, when the little boy was back in the room with us and running his toy vehicles across the floor while supplying appropriate sounds for them, I quietly moved to the dining table.

His painting touched something in me and I realized I was seeing the world through his eyes. I was placing myself in the persona of a four year old boy. Personas are one of my favorite tools in website design and development process. Creating personas allows everyone sitting at the table - communications, marketing, technical developers, designers, content providers, researchers, etc. - to find and communicate on common ground. The people visiting your site in the form of personas become real. Examples of personas would be the 36 year old stay at home soccer mom, the 30-something newly wed couple buying their first home, the parent of a child with a disability, and so on.

Knowing this little boy, I looked at his painting through his eyes. I saw what I believed to be his home in a light red color, which reminded me of the natural stone of his home with the green grass and the stone walkway and purple colors off to the side where there is a garden. But the focal point of the painting was a big black image. As I allowed my imagination to wander in his four year old world I saw a tractor dramatically painted using only black. The big powerful tractor that makes loud noises, one of the many vehicles that he loves, sitting under a thick tree like those in his yard.

He wouldn't tell me what he had painted, but I have a sense that if I had not been correct, or at lease close, he would have protested what I was saying to his mother and grandmother.

I asked if I could have the painting and it is at this moment hanging on the wall of my office as I write. But back to color, what does this all mean?

Use of color on the web, as with use of color in any physical space or other role, is a powerful force. A designer will tell you of the importance of color in design. The use of color on the web is in part about technology, how your browser or monitor or graphics card interprets the color of your website. And it is easier today to apply true color to our websites as most of us have computer systems that allow us to view in millions of colors, especially if viewing with an HD screen.

To this I would add color is a powerful force of emotion. At four years old my young friend already knows about color and contrast in design. His tractor is strong and powerful and black in color and his home is safe, comfortable and his source of love in pale pastel colors.

Evoking Emotion with Color

Does your website evoke emotion through the use of color? Visit Color, examples of evoking emotion through color selection for website design for examples.


Color is also a critical component to accessibility. Depending on the study, 8 to 12 percent of males and one-half of 1 percent of females have some form of color blindness or deficiency, with full color deficiency being extremely rare.

Back in the beginning, we were creating websites for view on computers that, for the most part, had 8 bit color. In plain language that means the browser could interpret and display only 216 colors. The healthy eye with a full range of color can see literally millions of colors. Lynda Weinman created the original browser-safe color palette which became our benchmark for use of color on the web.

Today we are safe using the full range of hex colors, which makes for beautiful sites. But using a color just because you can, is not always the best plan. Accessibility dictates the use of contrasting colors. A person with blue-yellow color blindness, tritanopia, will not be able to distinguish pale blue text on a medium blue background. So be sure you use contrast in your designs. There are several tools on the Internet that can help you test your site for contrast.

For more information on accessibility visit Musings on Accessibility.

-Nancy Massey

Copyright © 2005-2015
Nancy Massey, Inc.
1500 Locust Street, Ste 3020, Philadelphia, PA 19102