This image shows a proposed change to the Trimet Rail System, in which the Yellow line and Green line colors are swapped. This solution works because the Green-Line-Formerly-Known-As-Yellow shares no stops with the Red Line.

A Simple Color Change Would Improve TriMet Accessibility

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!

A map of Portland's TriMet train system, as it would appear to someone without colorblindness.

A map of Portland’s TriMet train system, as it would appear to someone without colorblindness.

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.

railsystem_color_vision_problem_area

This image shows the section of the TriMet rail lines that may be problematic for colorblind people to navigate, because the Red and Green lines run parallel to each other and share 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.

This image shows a Color Oracle simulation of how the problematic section of the TriMet Rail lines would appear to someone with deuteranopia. Under ideal lighting conditions, a person might be able to distinguish between the Red and Green lines by color, but conditions are rarely ideal.

This image shows a Color Oracle simulation of how the problematic section of the TriMet Rail lines would appear to someone with deuteranopia.

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.

A sign from the Convention Center MAX station showing the Blue, Green, and Red eastbound lines.

A sign from the Convention Center MAX station showing the Blue, Green, and Red eastbound lines.

A Color Oracle simulation of how the Convention Center MAX sign appears to people with deuteranopia. It is very difficult to distinguish between the Red and Green line symbols on the sign.

A Color Oracle simulation of how the Convention Center MAX sign appears to people with deuteranopia. It is very difficult to distinguish between the Red and Green line symbols on the sign. At night, in poor lighting conditions, it may be impossible.

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.

This image shows a proposed change to the TriMet Rail System, in which the Yellow line and Green line colors are swapped. This solution works because the Green-Line-Formerly-Known-As-Yellow shares no stops with the Red Line.

This image shows a proposed change to the TriMet Rail System, in which the Yellow line and Green line colors are swapped. This solution works because the Green-Line-Formerly-Known-As-Yellow shares no stops with the Red Line.

This image shows the Color Oracle simulation of how the TriMet rail map would appear to a person with deuteranopia after the Yellow line and Green line colors are swapped. Note that it is dramatically easier to distinguish between the Red Line and the Yellow-Line-Formerly-Known-As-Green in the area where they share stops.

This image shows the Color Oracle simulation of how the TriMet rail map would appear to a person with deuteranopia after the Yellow line and Green line colors are swapped. Note that it is dramatically easier to distinguish between the Red Line and the Yellow-Line-Formerly-Known-As-Green in the area where they share stops.

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.