Designing for colorblind access
Part 1: UI components
Image descriptions are in the alt text.
Why design for colorblind access?
About *4% of people worldwide are colorblind (source). It’s important to keep in mind that while these statistics feel like extremely rare, in reality that’s 13 million people in the U.S. alone who need colorblind access. And in general, dismissing people as edge cases is ableist no matter how small the statistic. Everyone deserves equal access as a human right.
Design is inaccessible to colorblind people when it relies on color to convey information.
Colorblindness is not one single experience, it manifests in numerous ways with green/red type being the most common condition. Learn more in this quick introduction.
Sometimes mixing up colors is relatively harmless, like coordinating your outfit for the day. Other times it can lead to serious consequences. In a mixer, is the bracelet blue for photo consent or red for no photographs? On a subway map, are you traveling west on the Brown line or Blue line? When driving, is the traffic light red or green?
Colors are a design choice, so when we encounter access barriers the fault lies on the design and not the person. By choosing accessibility we are choosing to build access into our everyday interactions instead of putting that responsibility on the individual.
*Most colorblind statistics are segregated by binary sex, which ignores trans and intersex experiences. Therefore, I’m using a combined average.
Accessibility drives creativity
Sometimes, accessibility might feel like a chore or checklist that stifles creativity.
While it’s true that there are many factors to consider, I think accessibility actually drives the creative process because it pushes us to think of unique solutions within constraints.
The constraint: do not rely on color alone to convey information
The opportunity: use text, iconography, contrast, and layout in creative ways
*WCAG 2.1, the official guide for digital accessibility, has 1 rule about colorblind access, but not a lot of supporting information about how to be successful in this area. I believe that we deserve more nuanced guidelines to make not only accessible but elegant solutions.
I’ve assembled a series of suggestions for how to make your components accessible without prescribing a final solution. What path your design ultimately takes will depend on your brand, user feedback, and your intuition as a designer.
*WCAG = Web Content Accessibility Guidelines
Examples of accessible components
Note: I used this Figma plugin and Coblis to generate the colorblind simulations.
Navigation
Accessible navigation is essential because people need to know where they are in the application.
This navigation scheme uses blue against a list of pink items.
However, the pink-blue difference becomes very subtle or even nonexistent in some forms of colorblindness, making it impossible to know where you are.
Here are some techniques to improve the accessibility:
1. Use higher contrast on selection
2. Add a shape, such as a circle or line, on selection
3. Change the background color on selection
Status indicators
Status indicators show information that changes frequently. These must be accessible because the changing indicators show what’s available to interact with, resulting in confusion if they’re unclear.
These are examples of online/offline indicators for people.
If color is the only thing changing, it’s inaccessible. These indicators look the same to many colorblind people, making them virtually useless.
Instead of relying on color, you can try the following:
1. Use the absence of the shape
2. Use distinct iconography
3. Use text to explicitly state status
Most social media mobile apps, like facebook, use the absence of shape. I think this method is the most visually scannable, though it doesn’t allow for more than 2 or 3 states.
Communication apps like skype use icons because it allows for a diversity of indicators — such as available, in a meeting, inactive, etc. The downside is these are sometimes difficult to see depending on the size.
Most apps also combine text with one of the methods listed above!
Toggle buttons
Toggle buttons are somewhat unique because they combine status indicators with buttons. They usually activate a specific mode, such as locked/unlocked, lights on/off, mute/not muted.
Here’s an example of a toggle button for turning on the lights.
If only the color changes, it’s unclear if the user’s action had any effect. The lack of feedback is a usability concern, because people want confidence that the interface is responding to them.
Some people argue that with toggle buttons, contrast is sufficient to communicate information. While it’s true that contrast helps, toggle buttons are still confusing because it’s not clear which state means on vs. off. The yellow symbolism also loses value when it becomes salmon, pink, or orange in some types of colorblindness.
These are some accessible alternatives that don’t rely on color:
1. Use distinct iconography to show selection
2. Use a switch button instead of a toggle button
Both of these can also use text labels for additional clarity, depending on screen availability.
Final thoughts
In general, color is not a universal experience. The colorblind simulations showed several ways that people experience color differently.
Even amongst non-colorblind people, cultural values and emotional connotations of colors vary widely. East Asian cultures wear white to funerals while Euro-centric cultures wear white to weddings. A painter might call out 10 different hues of light blue — robin egg, periwinkle, baby blue — while someone else might just call these all blue.
While we can’t control how people experience color, we can control how they perceive the overall interface by making information clear, accessible, and available to everyone.
Coming up in this series
This is the end of part 1, UI components. If you have any questions or feedback, you can comment or tweet at @access_guide_. 😊
Part 2 will feature data and information! This includes charts, diagrams, and maps.
(There might be a part 3 for hardware and LED’s! Emphasis on the might.)
If you like my work, you can support me on ko-fi.
