Redesigning Salesforce Maps to Improve Accessibility
How we created new map markers and a color palette that are color blind-friendly
The Salesforce maps team did a major design update in 2021 of some key features to improve accessibility. My product manager, Derek Piccola, suggested we use the opportunity to work on the map markers. Derek is color blind, so he knows how easy it is for a map full of color-coded markers to lose meaning.
Imagine a service representative assigned to repair a broken machine for a customer, and that customer’s location is highlighted on a map. If that rep is color blind, they might not be able to distinguish which marker is highlighted. They would then have to go hunting through menus and tables to actually find the information. In the following example, the map on the left shows a pink marker among a series of blue markers. The map on the right mimics how someone who has color blindness might see the same map: all one color. You can imagine how frustrating that might be.
We knew there were two things we could do to improve the accessibility for maps: Create a color blind-friendly color palette that anyone — especially someone with color blindness — can set up. And create markers that meet contrast requirements for better visibility.
What is color blindness?
Because of the name, there is a misconception that a person with “color blindness” can see only in black and white. What color blindness, or color vision deficiency (CVD), actually means is that a person has a reduced ability to distinguish between colors compared to someone with typical color vision.
In the example images above of a dog running between rows of tulips, we can get a sense of how different types of color blindness affect how natural colors are perceived. The most common forms of color blindness are deuteranopia and protanopia, which are red/green types. The classic example for red/green color blindness is not being able to see a red apple in a tree full of green leaves. They all blend together. The third type, tritanopia, is blue/yellow color blindness. The classic example is the blue water and yellow land on a map looking the same.
So how common is CVD? About 350 million people worldwide experience it, or 4% of the total population. It’s even more prevalent in men, where it occurs in about 1 in 12 men (8%). This means there’s potentially a large portion of our current users who have color blindness. If we don’t make changes, we risk deterring new users from adopting our maps program.
Starting with the Markers
We started with redesigning the markers knowing it would play a big role in how we addressed the color palette. Our old markers didn’t have clear borders, so people with low visual acuity may have had trouble distinguishing it from the map behind it.
The WCAG (Web Content Accessibility Guidelines) requires at least a 3.5:1 ratio between two elements. Because map markers might be a color that’s too close to the color of the map behind it, we decided that’s an area of opportunity. We broke convention from the industry standard for markers and added a double border, with a consistent white outline. With this design, the marker always has a minimum of 11:1 contrast ratio regardless of the background.
We also made it so the center dot changes from white to black based on the marker’s color to make sure there’s always a clear focal point. This feature was key to revising the color palette.
Developing the Color Palette
With the markers done, we started on the color blind-friendly palette. We wanted to use the amazing work Kellen Mannion and the Salesforce Design Systems team had done to create a new accessible color palette.
We removed all the colors that were too bright to be visible on the map background and too dark to easily distinguish. Then we selected the 24 most distinct colors from the remaining palette. We used this color blindness simulator to check our a11y (accessibility) palette. The following images show how the palette appears for different types of color blindness. There are way too many duplicated colors.
So we continued to experiment. We wanted to balance giving users the largest color set possible that also could be distinguished by all color blindness types. We eventually landed on a set of 12 colors from the a11y palette, tweaked them to maximize the differentiation, and added black and white.
Guerilla Testing
I had done as much as I could with color blindness simulators. It was essential to test the palette with real users. There’s a large community of color blind people who actively communicate via the r/colorblind group on Reddit.
I shared the color palette with the community and asked for feedback. The response was incredible. Around 70 people told me what worked and what didn’t. They gave suggestions for future changes. And they also told me how happy they were that I was doing this. “No one ever thinks of designing for CVD. At best, there might be a toggle option with a smaller set of colors available.”
The next two rounds of feedback and iteration were helpful, but the new palettes were still confusing for people. There were always a few colors that appeared as duplicates. Then one Reddit user said: “We tend to just ignore things that are only differentiated by color. For example, when playing Ticket to Ride, I ONLY use the tiny patterns on the cards and ignore the colors.”
That changed our approach entirely. For subsequent iterations, we added center dots from the markers into the color palette. The top row full of light colors would have a dark dot, and the bottom row of dark colors would have a white dot. The next round of testing was a huge success. Adding the dots reduced the number of indistinguishable colors from six to two. This illustrates just how precise the color differentiation had to be in this project.
We ran the simulation again and the following image shows what the palette looks like for each type of color blindness.
And with that, we had our final color palette. The last round of testing had about 90 people and a 100 percent success rate. To put this project in perspective, there are 16,777,216 different colors in the RGB color wheel and we had to find 14 of those that would work. It could have been like looking for a needle in a haystack. But thanks to the foundational work from the Design Systems team and the collaboration with color blind users, we were able to find the final 14 colors for our palette.
This could have happened only because of the inclusive design philosophy that we practice at Salesforce. To not design for but with the groups that we’re trying to include.
Salesforce Design is dedicated to elevating design and advocating for its power to create trusted relationships with users, customers, partners, and the community. We share knowledge and best practices that build social and business value. We call this next evolution of design Relationship Design. Join our Design Trailblazers community, become a certified UX designer, or work with us!
