Selecting appropriate colors is one of the most challenging parts of information design. Color is a great, engaging way to encode information–but poorly chosen colors can make a design difficult or even impossible to use. This is especially true for the approximately 8% of men and 1% of women in your audience who are colorblind. We don’t want our designs to alienate people, so how do we choose colors with an eye for accessibility?
A first step is to be aware that red/green colorblindness (deuteranopia) is the most common form of colorblindness; people with red/green colorblindness have difficulty distinguishing between red and green. While the cultural symbol of stop lights makes red and green a tempting candidate for encoding information, it is a poor choice and should not be used.
There are also tools available to help you evaluate how well your designs hold up for people with colorblindness. My favorite is Color Oracle, a cross-platform tool that simulates common forms of colorblindness. Test your already-released designs to see if they need improved accessibility, and then use it regularly throughout the process of design and development so that you don’t find yourself with a disappointing surprise right before your planned release. Simple color changes can make a big difference for nearly 10% of your audience!
Portland’s MAX system provides a good example of a simple color change that would improve accessibility of the MAX system for people with colorblindness. For the most part, they’ve done a good job selecting colors–most of the map does not require distinguishing between red and green in order to navigate the transit system. However, there is one problem area: a part of NE Portland where the Red and Green MAX lines run parallel to each other, sharing all the same stops.
This is a Color Oracle simulation of how the problematic section of the TriMet rail map would appear to someone with deuteranopia, the most common form of colorblindness.
Under ideal lighting conditions, a person with deuteranopia might be able to distinguish between the Red and Green lines on the rail map by color, but conditions are rarely ideal. Further, the rail map is not the only place this problem appears. Consider the sign at the Convention Center MAX station.
Now that we’ve established that the current rail line coloring creates accessibility problems, we can make design changes to improve the system. In this case, there’s a straightforward solution: swap the colors of the Yellow and Green lines.
Practically speaking, swapping the colors of the Yellow and Green lines would not be free–signs and maps would need to be updated, a publicity campaign would need to be launched. However, in pursuit of a public transit system that is easy for all users to navigate, it is money worth spending. Problems like this can be avoided in the future by carefully considering how color choices impact all users throughout the design process.