13 May 2014

Lessons in Color, Colorblindness and Use of Web Site Color

Decisions for the use of color in websites is often based on personal taste or preferences by the site owner.  They choose what they can see and read. Unfortunately, colors are not rendered the same on all computer devices, browsers and even eyesight.

Each of us has our own abilities to see with our eyes and many of us do not see colors the way they should be seen.  For awhile, webmasters were adding tools to increase font sizes to make their content adjustable for people to increase readability, but this did not solve the problems with color contrasts or color rendering.

We respond emotionally to color.  Artists experiment with color to attract our eyes to specific parts of a canvas. We often make choices based on color.  Did you know that men are more likely to be colorblind than women?  The most common color deficiency is red-green color blindness and nearly 8% of men are colorblind. Imagine shopping online for a hot red car,Red Tesla

but the crazy hot red Tesla just doesn’t look so good in olive green.

Green Tesla

Or, looking at fireworks on a website


and it looks like this.

Colorblind fireworks

A common mistake is using the color red for headlines and call to action buttons.  If your website targets men, many of them will not see the red.   Color tests have also indicated that red increases heart rates and creates excitement, which may not be useful on a healthcare website or sites with enormous product inventories that require time to browse.

NatureIt’s interesting to note that Mother Nature knows her stuff when it comes to colors. She chooses an analogous color palette.  colorwheel This means the colors tend to be closer together.  Similar colors vibrate at rates closer to each other and we respond to this.  Choosing analogous colors creates a sense of serenity and calmness, so these would be good choices for websites where you might wish for your visitors to stay, read and browse.

In contrast, contrasting colors vibrate differently and sometimes we may have to look away when colors bang against each other.

Do colorblind testing when choosing colors for your website to see how your images and buttons will look.

Take a walk outside and note what you see and how you feel when you gaze at a sunset, rainbow, stop sign, flashing neon signs, road signs and meadows.  It can be fun to find inspiration from artists or just life, once you close your laptop lid.

Photo credits:


Leave a Reply