A Study in Magenta: Color Accessibility in MAPC’s Trailmap
Metropolitan Area Planning Council’s Trailmap is the most comprehensive and up-to-date collection of biking and walking trails in Massachusetts, and after a brief hiatus it is back in its third iteration. Users can now search by address to find trails near them, and a switch from raster tiles to vector tiles contributed to overall improved performance. Prompted by the rising cost of a CARTO subscription, we also migrated our data to the open-source Mapbox and took full advantage of their extensive JavaScript library.
With this change came the opportunity to respond to user feedback from previous iterations and improve the app organization. In particular, multiple users and focus groups reported that Trailmap’s previous menu of trail groups and colors was overwhelming and confusing.
Re-organizing hundreds of miles of trails and paths into meaningful groups is a challenge. How can we accessibly differentiate the groups from one another? A roadblock like this does not have a cut- and- dry solution; rather, the answer lies somewhere in the middle of a high-wire balancing act of concerns:
- We want enough groups so users can differentiate trail types, but not so many that it is difficult to keep track of what the groups signify. A legend should provide clarification with a glance; it is not meant to serve as a study guide.
- We want to provide a variety of basemaps so users can customize their experience to fit their needs, but also not add so much color and texture complexity that trails don’t “pop” on some maps.
- We want to follow the spirit of traditional trail map colors, but also to ensure that the colors we use are accessible to people with different types of colorblindness.
Data grouping: organizing the trails
The original Trailmap labeling convention included a whopping 10 different trail types to keep track of, each with its own color. Add in dashed lines for proposed trails, and any given trail could belong to one of twenty groups.
Trailmap’s second incarnation took a different approach, merging some trails into subgroups and leaving others as standalone groups without any child types. While this reduced the overall number of groups to keep track of, users still struggled to find the trails they were interested in.
For the 2019 re-release, the team focused on further narrowing down the trail types into more clearly distinguishable groups. Though the arrangement of each section on the filter panel changed throughout the design sprints, the team eventually decided to define trails as one of six trail types and one of two trail statuses. As a result, there are twelve different “buckets” a trail can fall into. Rather than rely on just one element of design to separate each group, the team decided to designate the six trail types by color and the two trail statuses by shape (solid lines for existing trails and dashed lines for proposed trails).
Special attention should be paid to the prominence of the Proposed Paths & Lanes selection in each iteration. The ability to view such trails is what truly sets Trailmap apart from other trail applications. By making this previously-invisible data open and accessible to the public, users can advocate for the trails they want to see in their communities.
Basemaps: choosing a canvas
Because we knew that trail color awaited as an impending challenge, we decided to remain conservative with our basemap options. For the default map, we used a simple grayscale street map, Mapbox Studio’s Mapbox Lite. No frills or extra details: just municipalities, neighborhoods, and roads. Nearly any trail color palette would clearly display on top.
While we would have loved to include a traditional satellite map as a second option, the initially-proposed muted colors of our trails were no match for the level of high-resolution detail in most satellite basemaps. We could either have a satellite basemap and neon trails or a less-detailed map and softer trail colors. Luckily, we found Cali Terrain by Amy Lee Walton, which checked all of our boxes. Inspired by the colors and textures visible from an airplane, Cali Terrain delivered the terrain detail we sought with the low-opacity colors we needed.
Trail color selection: an exercise in color theory
With the data structure and basemaps set, I took the reins in trail color palette. Throughout the process I used a Chrome extension called Let’s Get Colorblind, which uses an algorithm to map on-screen colors to what a user with colorblindness might see. Let’s Get Colorblind provided immediate feedback on whether a particular color palette clashed when viewed through three different lenses of colorblindness: deuteranomaly (weakness in cones receiving green light), protanomaly (weakness in cones receiving red light), and tritanomaly (weakness in cones receiving blue light).
I began with three colors often seen on trail maps: forest green, cobalt blue, and bright red:
Close, but not quite. In one of the most classic cases of color clashing, the leftmost green and rightmost red map to approximately the same shade of greenish-brown under the protanomaly filter. Either the red or the green had to go, but I had some restrictions:
- If I replaced the green with another non-red color like yellow, it would be so light that it would disappear into the basemap.
- If I replaced the green with a darker yellow or an orange, it would look very similar to red for users with deuteranomaly or protanomaly.
- If I replaced the red with another shade/tint of green or blue, I would run into trouble later when using black and white mix-ins to expand three colors into six.
Enter: magenta.
A non-spectral color, magenta lies in the middle of what color theorists call the line of purples. Unlike spectral colors, purples cannot be created with a single ray of light. Rather, they are combinations of the spectral endpoints of the line of purples (fully-saturated red and violet). More practically, magenta has a couple of convenient properties:
- Being visually similar to purple, magenta has enough red for users with deuteranomaly or protanomaly and enough blue for users with tritanomaly.
- In the RGB color system, magenta is the complementary color to green, providing excellent contrast to users with full color vision.
Technically magenta could replace either green or red. However, as it is visually more similar to red than to green, transitioning to a green/blue/magenta palette made for a subtler change and better contrast across all vision abilities:
To expand this into six colors that still maintain contrast, I used a couple more tricks in the color toolbox: shade and tint. Each color was darkened and lightened to create six unique colors:
The resulting color palette, from left to right, became: #214A2D (dark forest green), #4BAA40 (kelly green), #2166AC (toned cobalt blue), #92C5DE (light cornflower), #903366 (raspberry), and #A87196 (dark mauve).
Reflections
Because our base maps were already filled with light greens and blues, even the “light” tints were only slightly lighter than the originals. In order to create enough contrast between the shades of blue viewed by users with tritanomaly, I had to push the dark green close to black. If the royal blue were darkened instead, it would have clashed with the dark magenta —a collision either way. Additionally, some colors are still closer to one another than they would be in a perfect world.
Fewer colors of higher saturations (like those in the midpoint green/blue/magenta palette) would remedy these concerns, but they would look foreign on a trail map. Playing with the saturation on magenta helped those colors blend in more with traditional map colors and seem more “in theme.” Luckily, users can rely on another principle of design for added contrast: movement. The ability to toggle lines on and off can assist the user in differentiating one trail from another.
There is no such thing as a perfect color palette, and Trailmap’s is no exception. However, the process taught me that balancing tradition with accessibility does not have to be a zero-sum game. You just need to be willing to experiment, make some mistakes, and (pardon the turn of phrase) take the road less traveled.
