No matter if you’re a content strategist, designer, developer, or user experience professional, you’ve probably heard that creating accessible designs restricts you from being creative.
It’s an excuse, says Geri Coady, to not include accessibility in your workflow.
Design for everyone, she says.
As designers, we have the ability to reduce the frustration any visitor has on a site.
At the Monotype webinar, Coady, designer, illustrator, and author of Pocket Guide to Colour Accessibility, discussed the impact of color blindness on our designs.
She highlighted what happens when we choose colors that aren’t the colors visitors see and offered helpful advice for creating beautiful accessible designs.
Coady explained that creating accessible designs makes for a handy business case.
If a visitor finds it frustrating to navigate your site due to color issues, they’ll find another site that better serves them.
Color Blindness
Color blindness is the decreased ability to see colors or distinguish colors from one another.
Interesting color comparison chart for what people with colorblindness will see. #ColorIsRelative pic.twitter.com/uIy0NJE0ND
— Chris Ota (@chrisota) July 1, 2015
There are three types of color blindness:
- Protanopia: people have a hard time distinguishing the difference between some red and green colors
- Deuteranopia: people confuse red and green, but also have difficulties distinguishing some gray, purple, and blue-green colors.
- Tritanopia: people confuse blue with green and yellow with violet colors.
Three Ways to Improve Accessibility
-
Reference items in your design by function, not by color.
Avoid labeling forms with instructions to fill out the fields in red.
Or telling visitors to select the blue button.
Use an asterisk (with an explanation), a text reference in the form label, or use ARIA to indicate required fields.
-
Increase color contrast.
An important key to design is effective use of contrast. Increase legibility with good color contrast.
If you can make your design work in gray scale, chances are it will work when you add color.
When you use colors that are similar in hue, a person with color blindness may not be able to tell them apart.
Using the online ColorBrewer tool, you can select color schemes that are color blind safe.
Check the color contrast in your designs with WebAIM Color Contrast Checker or Chrome DevTools.
-
Don’t rely on color coding alone.
Use a combination of color with texture or a pattern. It provides people with two pieces of information to understand your map, chart, or infographic.
For people who are color blind, using colors alone on a chart means they can’t distinguish the difference between your color guides.
Adding hatched or line patterns to a color guide, or using different widths, can make it easier for visitors to better understand your chart.
