With so many apps in competition with each other, designers and developers aim to create a distinct identity, and one of the most prominent features of an app's identity is its color scheme. With all of the colors we have available, it's easy to get carried away with the aesthetic and overlook accessibility.
About 8% of men (1 in 12) and .5% of women (1 in 200) of people are colorblind, and 99% of those with colorblindness have reduced red-green sensitivity.
The image below includes five examples of pairs that cause confusion. To someone who isn't colorblind, these colors are very different, but to someone who is colorblind, these pairs are indistinguishable.
A person with red-green colorblindness may see something similar to this:
You can understand immediately how this can cause issues with readability. If you are using color to call attention to something, perhaps a chart that uses color to differentiate areas, you have to account for how the colors will be viewed by someone with a red-green deficiency. Is the contrast different enough? Is there another way you can represent the data - can you use different patterns?
Another example is when you attempt to log in to a website but you attempted with the wrong password. Typically, you'll receive a red error. How can you make this more apparent using more than just color? The addition of a caption or an icon can get the point across more clearly.
If you're still in the planning phase, there is an easy way to check what users see if they have reduced red-green sensitivity in Adobe products like Illustrator and Photoshop. In the View tab of the main navigation dropdown, you'll see a Proof Setup option where you can select a Color blindness type. This will simulate how a user will interpret your current color palette. Currently, it does not show a view for tritanomaly (reduced sensitivity to blue light), but that type of colorblindness is extremely rare.
If you're in the coding phase, you can check the colorblind compatibility in the Chrome dev tools. Expand the menu to see More tools, and find the Rendering option.
From there, find the Emulate vision deficiencies section, and you can toggle the dropdown to view the current app in the browser using types of colorblindness.
Colors create a story by conveying certain emotions, but as designers and developers, we have to go beyond just the use of color to ensure that we captivate our entire audience. Iconography can also be a helpful tool to work in tandem with color when appropriate, because the visual representation does not rely on color alone. Accounting for colorblindness is just one of the ways we can make our apps more accessible. It doesn't take a lot of additional time, and we owe it to our community to make accessibility a priority.
Sources:
https://iristech.co/statistics/
https://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/
Top comments (0)