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 last week’s 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
— Probably follows you (@chrisota) July 1, 2015
There are three types of color blindness:
- Protanopia: where people have a hard time distinguishing the difference between some red and green colors
- Deuteranopia: where people confuse red and green, but also have difficulties distinguishing some gray, purple, and blue-green colors.
- Tritanopia: where 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, 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 color contrast in your designs with WAVE or Colour Contrast Checker.
- Don’t rely on color coding alone. Use a combination of color with texture or a pattern; it provides people two pieces of information to understand your map, chart, or infographic guides.
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.
Coady published a follow up post to the webinar, answering questions that she didn’t have time to answer during the Q & A.
If you missed the webinar, Monotype plans to post it online soon; you can sign up on their site to get the recording.
