Usability Tip: Don’t Rely on Color to Convey Your Message

Usability Tip: Don’t Rely on Color to Convey Your Message

In general—but particularly in the design world—color is a powerful tool. It conveys moods and emotions, adds presence to designs, and builds brand identities. All too often, however, users who suffer from any color deficiencies struggle to navigate their way through our color-drenched world. For their sake, I often advise designers to have accessibility in mind and test web pages in gray scale format to ensure usability remains in tact when colors aren’t viewed in the intended way.

Users who suffer from any color deficiencies will have difficulties to distinguish the differences between certain colors. The most common type of color deficiency is red-green color-blindness, where red and green are seen as the same color.

Below is an illustration of the most common forms of color-blindness taken from Color Matters.

Looking at this chart, one must consider the visibility (or lack of it) of red error messages to users with this type of color-blindness when completing online forms.

Let’s take a look at the home page reservation form Avis gives us. I simply clicked "Continue" without filling anything out, and the error message I received to “Please enter a Pick-up Location” was presented in plain red text.

Now, let’s look at the same layout through the eyes of a red-blind user using Colblindor, a color-blindness simulator.

The high contrast of the red error message has been lost and instead, replaced with green color text that nearly blends in with the black content on the page and is very easy to overlook.

Another example comes from the Budget home page reservation form, where again I simply clicked "Continue as guest" to receive an error message. In this case, the red error message is presented with red copy over the field’s label and a red border around the actual field.

Lets view this through the eyes of a green-blind user using our color-blindness simulator.

Red colors are lost and replaced with light green colors. The green copy does not carry enough contrast to attract any attention and the field’s border no longer appears highlighted at all.

Conclusion

Don’t rely on color alone to deliver your messages online. Instead, combine color with other design fundamentals such as typography, shapes, grids, and spaces and allocate more weight to important elements.

The Home Depot account registration form is utilizing shapes in addition to color to indicate where problems arise. An exclamation point presented in a square shaped box precedes the error message copy in addition to an “x” near the relevant field to indicate an error has taken place.

Colblindor’s simulator will again display how all red and green hues are removed, but instead, users may relay on shapes as an indication to actions done right or wrong.

Test out your pages with Colblindor or simply change your settings to gray scale to ensure usability does not break when colors go away. Send us before and after shots if you found you had to fix some elements for accessibility on Twitter, Facebook, or Google+ using the hashtag #colorbind (that's colorb-i-n-d; no "l"). We’ll add our favorite submissions to this article. (Image of "red" traffic light courtesy Shutterstock)

ABOUT THE AUTHOR(S)

Tammy Guy is the founder of a visual design and usability consulting firm focused on strategic brand planning, creative direction and diffusion of user experience problems by applying design theory and usability best practices in a rapidly changing Web environment. Her firm provided consulting services to clients from various industries such as fashion retail, commodity retail, pharmaceutical, insurance, financial services, social networking and others. Services include product evaluation, strategy and planning, creative development and direction and usability consulting.

In addition, Tammy has been a frequent guest speaker with the Nielsen Norman Group for the past few years where she teaches visual design and usability classes.

Add new comment

Login via:

Your name *

E-mail *

The content of this field is kept private and will not be shown publicly.

Comment *

Because of problems with spam comments, HTML in comments is not permitted. URLs are allowed, but they will not be rendered as click-able links.

I woud be interested in seeing any studies or information on how a person with color blindedness has adapted to these scenarios. We come at this from a point of view in not seeing enough contrast, etc. but I would like to know if an adaptaion occurs that allows color blind persons to see gradations or to notice distinctions more than a non color blind person.

Nice one ...As we are developing websites for a customers to read ,so what will be the use if customer is finding difficulties in viewing your website ?It's always better to get professional web designer's advice while developing a site so as to avoid these small mistakes .Get more tips on web designing at http://www.loungelizard.com/web-design-company/

Your reliance on color-blindness simulators is misleading. Protanopes (those with red-green deficiency) don't see red as green. They see red and green a single color. Call it 'gred' if you want. For me, with regular color vision, it is hard to even imagine what that color looks like.

All I know is that 'gred' still contrasts with a white background. So whether a message is shown in red or green against a white background doesn't matter much to anyone. However, problems do arise when people have to distinguish between red and green for information. But that's not the case in your examples.

Converting a design into grays is a good way to make sure that all contrasts remain visible for everyone. But please take care not to draw the wrong conclusions when using a color-blindness simulator.

Hi Igor, thank you for your comment. The chart used in the article displays the fact you mentioned - red and green appear as the same single color. The point of the article was that when colors are lost, specifically meaningful colors such as red which is universal for error messages, the content will not appear the same and therefore, items that are important to notice should be utilizing other fundamentals (in the case I mentioned, symbols). Green does not have the same contrast against white as red color does. This will also heavily depend on the monitor settings as lighter green shades (specifically for thin strokes on text elements) will be difficult to read on a white background and darker greens will blend in with the black content elements. Point is, we have a few colors on the web that carry universal meanings (red for error messages, blue for links, etc.). When these colors are lost we need to use other elements to deliver our messages. Thanks again for your feedback.