◆ Context

Officially released in 2021, Roll Mobility is a mobile-based app that allows users anywhere in the world to write, find and share reviews on how accessible places around their community are to people who have mobility issues.

Users may take pictures and write detailed information on any place of their choosing, such as stores, restaurants, public spaces and parking areas. The location then appears on the app’s main screen as a color-coded marker on a map.

◆ Green: Accessible to wheelchairs and other mobility-impaired people in general.
◆ Yellow: Mostly accessible, but not entirely. People may have issues at this location.
◆ Red: Not accessible to wheelchairs and other mobility-impaired people in general.
◆ Gray: No information available.

The markers are split in half, with the top half referring to the location’s overall accessibility and the lower half referring specifically to the bathrooms’ accessibility.

Roll Mobility's goal is to help users who are themselves disabled or have disabled loved ones discover which places they can access easily and safely with no issues.

◆ The Challenge

The map markers in Roll Mobility use a combination of red, green, yellow and gray to communicate the levels of accessibility of a location, with no extra visual support from any symbols or text. This goes against the Web Content Accessibility Guidelines on use of color: color shouldn’t be the only means of communicating information with no additional symbols, shapes or text, as that creates a barrier for users with color vision deficiency who cannot perceive these colors, especially red and green.

Roll Mobility users with color vision deficiency may have issues telling apart one color from the other while looking at the map and will need to click on each individual marker to learn which locations are accessible and which aren’t.

Protanopia

Deuteranopia

Tritanopia

Achromatic

‍
These screenshots were tested on two software that emulate several types of color vision deficiency: Color Oracle and Coblis.

To further validate this type of use of color being an issue for users, WCAG offers an user story by an online shopper with color vision deficiency who has very similar issues with colors alone being used to convey information:

Lexie was born with deuteranopia and protanopia (often called “color blindness”) and has difficulty distinguishing among items that are red, green, orange, and brown, all of which appear to her as kind of murky brown.

[...]

‍Barrier: “When I play an online game, enemies are marked with a red circle and friends marked with a green circle and I can’t tell the difference.

Works well: “Enemies are also marked with a symbol or use a red triangle so I can easily identify them.”

◆ The Solution

To ensure all users can use Roll Mobility regardless of color vision, it’s necessary to create a "colorblind mode" for the app that adjusts the appearance of the map markers.

◆ Ideation

As I moved onto sketching out ideas for a colorblind mode, I used the WCAG’s suggestions of pairing up colors with patterns, shapes or text to make sure all types of users can easily perceive information given to them by the app.

The first step was to define a color palette that would work regardless of the type of color vision deficiency. Next, I sketched out several shapes that could easily be identified and told apart from one another at a glance, even when used in a marker with different combinations for the top and bottom halves.

Protanopia

Deuteranopia

Tritanopia

Achromatic

◆ Refining

The sketches made during the ideation phase were refined into vector icons, then placed onto the Roll Mobility map.

Dark mode

Light mode

◆ User Feedback & Key Takeaways

To get user feedback and validate whether the attempt at creating a colorblind mode was successful, the resulting wireframes were presented as a preference test in an online community populated by users with color vision deficiency, who are open to giving designers feedback on accessibility-focused projects.


Responses used an open-ended format, as that is the default form of discussion in this community. Respondents were encouraged to voice their thoughts on both the proposed wireframes as well as the original Roll Mobility screen. A total of 12 people with various presentations of color vision deficiency replied.

The image presented to respondents

Key Takeaways:

• The original map markers from the app were very difficult to tell apart.
• Among the changes made, the results were highly subjective: the colors, shapes and patterns were very helpful to some respondents, while others expressed their preference for different combinations of shapes and patterns, as well as different colors.
• Some respondents wanted to be able to control how exactly the map markers should appear on their screen to best fit their individual needs.
  
• The split marker format itself was hard to deal with for some respondents, who had difficulty remembering what each half meant.
  

◆ Conclusion

Having a disability is a highly subjective experience. Two people with the same disability may have completely different ways of living and dealing with it. When it comes to a disability that may present in a series of different ways as color vision deficiency does, the number of possible lived experiences skyrockets.

To achieve true accessibility with a colorblind mode, it's crucial to acknowledge that subjectivity and let users customize their experience as they see fit. Thus, the best solution for a Roll Mobility colorblind mode would be to have a series of toggles that allow the users to choose whether the markers change shape or not, which colors should be used, and whether color patterns should be used or not. That way, users can tailor their experience with the app to match their specific experience with their disability.

It may also be worth testing out if the split marker format presents a problem with Roll Mobility's wider userbase.