Design with Accessibility in Mind

Good design can not only make ideas more compelling, but it can also make information more accessible. This month we’re focusing on accessibility: how elements like color choice, font readability, and discernable focus areas within designs can ensure that content can be received, navigated, and understood by as many people as possible. We’re going to share three actions you can take in your design to make it more accessible. First up: color!

1. Don’t rely on color to relay important information. Color isn’t always readable for people with a range of visual impairments, so provide information in more than one way. For example: this metro map from Quebec (left) uses color to indicate each metro line, but also uses the name of the line beside where the line appears on the map. An example from PDC’s work: HighByte’s icons are in color, but we also provide a one-color version. Red is used to to signify an alert or action, but the addition of the exclamation point makes this clear in the one-color version as well:

For more information about color and accessibility, visit:

Accessible Brand Colors Online Tool by Use All Five

Contrast Checker by Acart Communications

Color Blindness Simulator by Matthew Wickline and the Human-Computer Interaction Resource Network

Color Accessibility Tools & Resources by Stephanie Walter

2. Testing fonts for accessibility. There are several factors that make fonts more readable for people with dyslexia, cognitive disabilities, and/or visual impairments. This article gives an excellent overview of elements to look for in accessible fonts. One characteristic that makes fonts more accessible is when similar letters have defining features, instead of being an exact mirror of their counterparts. This can help folks who tend to transpose mirrored letters, like people with dyslexia. An example from the article:

For more information about fonts and accessibility, visit:

Material Design Guide by Google

Letter and Symbol Misrecognition by Typography.Guru

3. Design usable focus states. Focus states (or focus indicators) are outlines or other cues that show users which part of a website is currently highlighted by the keyboard—an important piece of information for people who use screen readers, have limited mobility, and/or who are using their keyboard as the primary way they navigate the internet. These indicators are especially important in online forms, menus, buttons, and links. Here are a couple of examples of clear focus states in website navigation bars:

For more information about focus states, visit:

Designing for Accessibility is Not That Hard by UX Collective

Designing for Accessibility: A Checklist for Web Design by Wix

Check out AccessiBe’s accessibility web plugin - incredible resource!

We hope this article helps more designers to include accessibility in their design practice, not only because it is the right thing to do, but also because accessible design expands audiences and better communicates ideas: and what’s better than design that reaches more people?

Thanks for reading!