Color Blindness and User Interface Design

As a user-centered designer and developer I am always looking for ways to improve interfaces to be useful to all people, including color-blind people. Particletree has a great guide, Be Kind to the Color Blind [editor’s note, October 2012: link now offline], that nails the essential pitfalls and best practices in designing for color-blindness.

My rule of thumb is to use color only as a secondary indicator. This means that an important detail in my user interface should not rely on color alone to indicate meaning.

This type of design decision came up recently in my work on DF Studio. As part of a redesign for version 5 of the software, the design called for colored icons to show status for a photographer’s online portfolio. A green icon for an active portfolio and yellow icon for a disabled one (a disabled portfolio is not accessible to public viewers).

portfolio-status-version1

The problem with the icons being only differentiated by color is that a color-blind person that can’t distinguish yellow versus green would not be able to easily know the portfolio’s status.

The solution was simple: add a lock overlay to the disabled yellow icon. You can now easily tell that one is “locked” and one is not.

portfolio-status-version2

It is always good to run your design through a color-blind testing tool like Colorblind Color Filter or Vision Simulator. The DigitalFusion development team is fortunate in that the CTO of the company (who is also our product development manager) has a color vision deficiency; since he is constantly looking at the interface we have a way to find color-blindness issues in early stages of development.

If you work on websites or any kind of visual user interface, I would highly recommend reading the Particletree article, including the Additional Reading links. Knowing about the problem is half the battle, and you’ll be able to keep color-blindness in mind when developing and designing your interfaces.

Author: Lance Willett

My name is Lance, I am a blogger and web craftsman making high-quality, engaging, and user-centered experiences for people that use WordPress. México-born. Excellence Wrangler at Automattic.

4 thoughts on “Color Blindness and User Interface Design”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s