Simulating Color Blindness for a More Accessible Interface

Choosing a good color scheme that follows best practices in design theory is a very important factor when creating a digital interface. It’s also important to design in ways that allow as many people as possible to access a product by taking into account the differing ways in which people perceive color.

What is color blindness?

Color blindness, also known as color vision deficiency, is a limited ability to see certain colors, all colors, or a differing perception of color from the way it is perceived by most people. The condition is significantly more common in men, with “as many as 8 percent of men and 0.5 percent of women with Northern European ancestry have the common form of red-green color blindness” (Facts About Color Blindness, 2015). 

There are three main types of color blindness, according to the National Eye Institute, with various specific types of conditions associated with each:

    • Red-green color blindness is the most common type, where those with the condition either have no ability to see red and green or their ability to see red and green is significantly less than that of the general population. 
    • Blue-yellow color blindness isn’t totally uncommon, but not as common as red-green color blindness. 
    • Complete color blindness is the rarest and most severe, where those affected perceive very little to no color in their vision. 

Find out more by checking out NEI’s fact sheet on color blindness.

Designing for color vision deficiency

Designing for color blindness is difficult because there is no standard, color vision deficiency-friendly template in which to base interfaces off of. This becomes especially the case with the ever-increasing variety of monitors, displays, and devices that an interface can be viewed on. So how do designers design for people with color blindness? Luckily, designers do not need to establish themselves as authorities on color blindness in order to make interfaces more accessible (Facts About Color Blindness, 2015).

One way to make sure that an interface is more accessible for users with color blindness is to make sure it can be viewed in monochrome (black and white) – even if the user can’t see some colors or any color at all, they’re likely still able to differentiate between hues of black, grey, and white (Sula, 2018). It’s also important to keep in mind that colors, in general, should be used sparingly. According to usability.gov, using contrasting colors is best practice, as well as enhancing links or other interactive elements by underlining them or otherwise creating a signifier that doesn’t require color in order to recognize it (Liu, 2010). This helps users with color blindness be able to navigate an interface without having to rely on colors to guide them. 

To simulate what different color schemes look like for people with different types of color blindness – or if you want to find an accessible color scheme! – check out Paletton’s Color Scheme Designer. You can also test your own ability to differentiate between hues of color using X-Rite’s hue test. The X-Rite test can be informative, but you shouldn’t use it as a way to self-diagnose color blindness. 

While it’s impossible to design an interface for every single type of user that may interact with it, taking the steps to make sure that people with color blindness can have the same experience with a product as everyone else is an important part of accessible design.

Works Cited:

  1. Facts About Color Blindness [Fact sheet]. (2015, February). Retrieved October 10, 2018, from National Eye Institute website: https://nei.nih.gov/health/color_blindness/facts_about
  2. Sula, C. (Presenter). (2018, September 12). Visual perception, color, and interaction. Lecture presented at Pratt Institute School of Information, New York, NY.
  3. Liu, J. (2010, February 1). Color Blindness & Web Design. Retrieved October 12, 2018, from usability.gov website: https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html
  4. Paletton’s Color Scheme Designer. (n.d.). Retrieved October 12, 2018, from Paletton’s Color Scheme Designer website: http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
  5. The X-Rite Color Challenge and Hue Test. (n.d.). Retrieved October 12, 2018, from The X-Rite Color Challenge and Hue Test website: https://www.xrite.com/hue-test?pageid=77&lang=en
  6. [Protanopia]. (n.d.). Retrieved from http://www.colourblindawareness.org/colour-blindness/causes-of-colour-blindness/
  7. [Tritanopia]. (n.d.). Retrieved from http://www.colourblindawareness.org/colour-blindness/
  8. [Monochromacy]. (n.d.). Retrieved from http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/

Design Critique: Transit (iPhone App)

Transit is a mobile app that provides directions for public transportation systems in over a hundred cities around the world. The app also allows users to subscribe to real-time updates for routes that they frequent. I’ll be critiquing the app from the standpoint of a user in New York City who only uses the subway.

The natural mapping

The home screen of the app shows the user’s GPS location on an interactive map with the closest routes listed underneath, sorted from nearest to furthest:

           

 

The action cycle is very clear throughout, bridging the Gulf of Execution and the Gulf of Evaluation by making the design simple yet comprehensive. 

On Transit’s home screen, the designers used a perceived affordance for users to figure out that route options are selectable, and selecting a route makes two scroll dots appear signifying that the user can swipe back and forth to view next arrival times for either of the route’s directions. 

 

This signifier is created through a convention: if a user sees a set of dots, they usually know that the option to swipe back and forth is available to them. By making this selection, another set of icons also appear that show the current locations of each train, any scheduled maintenance or delays, an option to favorite a route, and a link to the train’s schedule. This type of feedback that clearly shows the user what they can do next is present throughout the app. 

Favorite train routes

One of the best features of this app is the ability for users to add their most frequented routes to “My Transit Lines”.

By selecting the “star” icon (another design convention meant for highlighting or favoriting a certain object on an interface) on any of the routes, the app will automatically give real-time updates in the form of push notifications to let the user know of any delays or planned maintenance on these routes.

This collaboration between the app and the user helps the user perform the basic activity of getting to their destination on time by making them aware of any unexpected changes on their route. 

Use of universal design

The designers made a good choice in allowing users to adjust settings in the app so that people who need an accessible subway stop can find one in real time.

     

By adding this option, any user should able to find a route to their destination, regardless of ability.

Recommendation: immediately routing to a saved location

Frequent users of this app are likely trying to do one of two things: go home or go to work. The current mapping has the user first go to the search function, then select a location from “my locations”. Why not save a step by providing the most-used locations on the home screen (mockup shown below) that slides out and floats with the layer of other available train routes?

 

A task analysis might show that adding these icons could make the execution faster for the user, saving a step by not forcing them to go through the search function first. While these icons are selectable on the map itself if the user is already in that specific location, designers might consider allowing them to be selected at any point in the action cycle regardless of current user location.

Summary

Overall, Transit is straightforward, pleasant to use, and enables easy discoverability, giving feedforward and feedback to the user throughout the action cycle. Compared to the Metropolitan Transportation Authority’s own app, Transit is superior when it comes to usability and only requires a basic amount of knowledge of how the subway system works to operate the app, making it navigable for tourists and seasoned commuters alike. Adding “home” and “work” icons to the home screen to allow a user to quickly find directions to their most frequented destinations at any time would make this app even sleeker. A great example of activity-centered design, this app wasn’t made for a specific type of person but rather a specific type of activity: easily finding the fastest and most convenient route to a destination.