Designing for Accessibility: Adee Colorblind Simulator
Designing for people suffering from colorblindness can be easily forgotten because most designers aren’t colorblind! In this article you will learn how to use Adee free accessibility plugin when designing with Sketch and Figma, in order to make sure your design is accessible for all.
Statics and Types of Colorblindness
According to Color Blind Awareness 4.5% of the population are color-blind. However, for male audiences this can increases to 8%. There are many types of color blindness but it comes down to not seeing color clearly, getting colors mixed up, or not being able to differentiate between certain colors. Some types of colorblindness are such as Deuteranomaly that is a reduced sensitivity to green light and is the most common form of color blindness, Tritanomaly which is a reduced sensitivity to blue light and is extremely rare, or protanomaly, that is a reduced sensitivity to red light.
The image below shows one of the most common issues of using red and green colors together. Those with strong CVD (strong meaning a more severe condition of CVD) see both red and green as brown. People with weak CVD can see strong red and green colors as red and green. However, this can still be problematic when the colors are weak or blended (resource).
Colorblind Simulation:
Designers often do not suffer from a color vision deficiency, so it is very hard for them to imagine how it looks like to be colorblind. Color blind simulation tools can close this gap at design stage and before coding. There are a number of great tools that designers can use and among them Adee is a free plugin for Sketch, Figma and Adobe XD that you can use.
How it works?
1- Selecting frame/ artboard:
There are a number of ways to access layers/ frames/ artboards in the colorblind simulator. You can select your intended layer, then open Adee plugin, then wallah! it will show as a default selected layer. When the plugin is open, you can also navigate among layers live. You do not need to close or reload the plugin to update layers as it gets updated automatically.
2- Selecting colorblind modes:
There are several types of inherited colour blindness. In Adee Plugin you have access to 8 different modes of colorblindness.
The eight different colorblind modes are including:
- Protanomaly which is a reduced sensitivity to red light.
- Protanopia or red-blind people are unable to perceive any ‘red’ light.
- Deuteranomaly that is the most common form of color blindness is actually a reduced sensitivity to green light.
- Deuteranopia or green-blind people cannot realize‘green’ light.
- Tritanomaly that is which is a very rare type of color blindness is a reduced sensitivity to blue light.
- Tritanopia or blue blind cannot realize ‘blue’ light.
- Achromatopsia as described by colorblind awareness organization, this type of colorblindness is very rare and only can be found in 1 person in 33,000 and its symptoms make life very tough. Usually someone with achromatopsia might require to wear dark glasses inside in normal light conditions.
3- Zoom and comparing modes:
When you are in the single view, you can use zoom to have a closer look to the details of your design and how colorblindness can impact your design and audiences.
After applying a mode, you can also select the double view to compare with normal view of your artboard/frame.
4- Generating frames/artboards:
With this feature, you will be able to select an artboard (or frame) and generate new artboards that reflect the different types of Colorblindness that you selected. In addition, the artboard’s elements are actually editable and you can go ahead and check the contrast ratio to make sure it’s still meeting AA or AAA criteria. You can then use free contrast checker, adjust your colors and apply changes to correct that primary color palette if it’s still not passing.
With generating as well as commenting and report functionalities , you and your team can preview, adjust, and export design and handoff to developers, or product managers when meeting with stakeholders.
Wrap up:
As well as simulation tools, it’s always a good idea to talk and get feedback from your real users and target audience you are designing for.
You can also try putting yourself in the same position as your users by using voice over, keyboard navigation or viewing content at different zoom levels.
These are all simple tools and methods of testing to get an idea of what someone experience when using an assistive technology. Also most devices these days have accessibility settings such as magnifier, voice over and contrast modifier which assist designers to understand users experience.
Design credits: https://www.figma.com/community/file/922923694852179640
