4 Things to Consider When Designing for Visual Impairments
People usually don’t understand what accessibility really means. Everyone should be concerned about web accessibility; it is not simply important for individuals who have disabilities. Let’s focus on equality and accessibility first, the accessibility is now brought into consideration in the development process. There are many types of accessibility issues out there but we will focus on the design for visual impairments in this article.
What is the Accessibility in Product Design?
Accessibility is just a part of usability which its main focus is to ensure that everyone can use the products and services regardless to their abilities. Here are some key issues concerning the accessibility in product design:
- Visual Impairments (blindness or low vision)
- Auditory Impairments (deafness or low hearing)
- Mobility Impairments (joint disorders or limited movements)
- Seizures (motion/flash phobias or those with photosensitive epilepsy)
- Learning Disabilities (especially Dyslexia)
Understanding all of the issues above will help us develop the great products not only for people with disabilities, but also for everyone.
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
— Tim Berners-Lee, inventor of the World Wide Web
What to concern when we design for Visual Impairments?
1. Color Blindness
There are many types of color blindness and they perceive the information differently. As a product designer, we have to make sure that they can distinguish the differences between the colors by applying the lightness, hue, or saturation. It is useful especially when you are designing for a data interpretation, such as a dashboard.
1.1 Normal Vision
1.2 Red-Green Color Blindness (Deuteranomaly, Protanomaly, Protanopia, and Deuteranopic)
1.3 Blue-Yellow Color Blindness (Tritanomaly and Tritanopia)
1.4 Monochromacy (complete color blindness)
2. Sufficient Color Contrast
We should check in the product whether we provide enough color contrast or not so that everything is easy to read and understand. Here are some tools you can use to check the color contrast in your design:
2.1 Web Content Accessibility Guidelines (WCAG) 2.0 provides color contrast success criteria that a website should consider and meet its minimum standards and also WebAIM is one of the tool that could help you check whether the design components have enough contrast or not.
There are 2 levels that, as designers, we should always consider:
- Level AA: Most users can access, it requires the perfect ratio of at least 4.5:1 (normal text) and 3:1 (large text). If your components or websites meet this level, it means that it also passed the Level A, which is only for the minimum acceptances. You can see in the picture below that the contrast ratio is passed since they have enough contrast between foreground and background.
- Level AAA: Using more contrast to distinguish the design components by using the ratio of 7:1 (normal text) and 4.5:1 (large text).
2.2 Figma plugin, it allows you to check the contrast in your design components, you can also install a plugin in Figma called “Contrast” to check the contrast in your component design.
3. Accessibility Font
3.1 Font family
Select the font families that are easy to read and their characters/shapes are differentiable. Some font families are hard or take longer time to recognize by their shape, such as hand-written font.
3.2 Font size
Always provide a proper font size for screen-readers, at least 14px for baseline for reading, smaller than that should be rarely used because users will need a longer time to read and understand.
4. Context Guidance
As we’ve talked so far about the difficulties of colors differentiation for visual impairments, we can’t assume that they can promptly interpret the meaning of red (generally for error), green (for success), yellow or orange (for warning or in progress) as people with the normal vision can.
The prominent example is when we design a text field component and there is something wrong with the inputs and the field is only notify by changing to another colors (such as from black to red border) but doesn’t provide other relevant information that could help guiding users of what they should do next.
The site that provides only color cues, which don’t ease those with the color impairments:
Those with normal vision — can interpret the meanings by colors
Those with visual impairments — can’t interpret by colors
It is better to provide additional icons or helper text as cues for better interpretations, as shown in the example below:
The Takeaways
“When UX doesn’t consider ALL users, shouldn’t it be known as “SOME User Experience” or… SUX?”
— Billy Gregory, Senior Accessibility Engineer
The so-called successful design is not only to design for your targeted users but also for all as accessibility should be at the heart of the design. Start from regularly test your product with different users, including those with impairments so that your team has various understandings and apply them to eliminate the design biases that may happen during the product development process.
