3 Ways to Improve Accessibility in Your Designs

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.

There are three types of color blindness:

  1. Protanopia: where people have a hard time distinguishing the difference between some red and green colors
  2. Deuteranopia: where people confuse red and green, but also have difficulties distinguishing some gray, purple, and blue-green colors.
  3. Tritanopia: where people confuse blue with green and yellow with violet colors.

Three Ways to Improve Accessibility

  1. 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.
  2. 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 WebAIM Color Contrast Checker or Chome DevTools.

  3. 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.
    Two charts comparing what people with normal vision and deuteronopia see. Both charts use patterned color guides.

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.

Photo of author

About the Author

Deborah Edwards-Onoro helps small businesses, consultants, nonprofits, and higher ed with creative and distinctive websites. Deborah shares her expertise with web design, user experience, and accessibility on her blog, social media, and at meetup events. As organizer of Refresh Detroit, West Metro Detroit WordPress, and Metro Detroit WordPress, she encourages members to share their knowledge and experiences. In her free time, you'll find her birding, shooting photos, reading, or watching tennis.
%d bloggers like this: