Learn how to create accessible web and graphic designs to enhance the user experience for all.
Why is design accessibility important?
Keeping accessibility top-of-mind
Choose the right color palette
Enhance readability with typography
When it comes to choosing the right branding for your business or organization, you have to consider more than looking pretty. Accessibility of web and graphic design is a crucial and often overlooked aspect that has the power to connect with new audiences. When you find the perfect intersection between design and accessibility, you’ll open up the doors to all audiences and encourage better user experiences.
From color choices to typography and beyond, every element of your design plays a role in determining who can effectively engage with your brand. Equip yourself with the knowledge and tools to create designs that are not only visually appealing but are also inclusive and accessible to all. Accessible design isn’t just for people with disabilities— it makes a more enjoyable viewing experience for all.
Why is design accessibility important?
Did you know that 77% of consumers are motivated to buy from companies who are committed to social responsibility? Showing your commitment to accessibility is just one way to show your brand’s core values, expanding your market reach and improving the user experience. In the United States, over 7 million people use screen readers to access digital content, one in 12 men experience color vision deficiency, and more than 40 million people are dyslexic. These disabilities, and others, significantly impact the way people interact and the ability for them to interact with your content. Channeling an accessible mindset in your designs will allow more people to interact with your valuable content and boost your brand’s inclusivity.
Keeping accessibility top-of-mind
Accessibility in design isn’t just a nice-to-have feature— it’s essential for creating inclusive digital experiences. Assess your color palette, typography, and brand elements to make your designs more accessible.
Choose the right color palette
When you’re thinking about your color palette, it’s important to choose colors that have a high contrast ratio, making it easier for people with color blindness or visual impairments to differentiate between elements and text. The Web Content Accessibility Guidelines (WCAG) recommends a minimum contrast ratio of 4.5:1. This is the brightness ratio between the color in the background versus the foreground. Use this Contrast Checker to calculate the contrast ratio of your brand colors.
Red-green color vision deficiency is the most common form of color blindness, which makes it difficult for people to differentiate between red and green. When specifically considering red-green color blindness, try to avoid using both red and green in your designs. In general, it’s best to follow these guidelines when designing with color blindness in mind:
- Keep it simple and incorporate white space— A simple color palette and design is more digestible for all viewers.
- Don’t be stingy about labels— Adding labels to graphs, charts, and other elements make it so people don’t have to rely on differentiating colors.
- Incorporate patterns— This helps people with color blindness differentiate between elements without needing to see the colors.
Take a look at your brand’s current color palette to see how you can make adjustments to make your designs more accessible.
Enhance readability with typography
The fonts you choose in your design play a strong role in a user’s ability to read and digest the content. You want to choose fonts that work well together and remain consistent throughout all of your designs. But it’s not just about the fonts, it’s also about size, spacing, structure, and legibility.
When looking for accessible font types, we recommend finding sans serif fonts. Serif fonts have strokes or “tails” at the end of each letter, whereas sans serif fonts are more clean cut. Sans serif fonts are more legible at smaller sizes, making them preferable and accessible.
The minimum font size for your graphics should be 16 px, which many designers often use for body text. We recommend that designs have a line spacing of 1.5 times the font size to make it the most readable.
With your designs, create a clear visual hierarchy, using different font sizes, weights, and colors to emphasize headers and allow users to quickly scan and understand the content structure. Follow HTML heading tags when applicable to define the design’s structure.
It’s also important to consider the readability of your text when it’s overlaid on top of an image. Because images incorporate multiple colors, it can be difficult to get the right contrast between them and your text to ensure legibility. WCAG Standards suggest that text on images should have a contrast of at least 3:1 for text larger than 18 pt normal or 14 t bold. Body text should have a contrast of 4.5:1, lower than 18 pt normal or 14 pt bold. To boost contrast, you can try an overlay technique or gradients to make text stand out. Alternatively, try placing strips or highlights behind text to provide a barrier between the text and the image.
Consider accessible elements
As we discussed before, designing for screen readers and assistive technologies is an important consideration when it comes to accessibility. If your graphic is not readable by an assistive technology, it’s essential to write descriptive alt text that gives the user the details they may otherwise miss.
Here are some additional elements to consider for improving accessibility in your designs:
- Clear and consistent navigation— Ensure that your design has a clear structure, helping users with cognitive disabilities or those using screen readers to easily understand and navigate your content.
- Appropriately use icons and symbols— When using icons or symbols in your design, make sure they are universally recognizable or accompanied by text labels.
- Design responsively— Create designs that are responsive and adaptable to different screen sizes and orientations.
- Provide transcripts and captions— For audio and video content in your designs, provide transcripts and captions. This makes the content accessible to users who are deaf or hard of hearing, as well as those who prefer to read content rather than listen to it.
By incorporating these accessibility into your designs, you’re not only expanding your reach but also demonstrating your commitment to inclusivity. Remember, accessible design is good design— it benefits all users, not just those with disabilities.
Leverage accessibility tools
The best way to make sure your designs are accessible is having a second set of eyes on them. We’re fans of these online tools that help us make sure our design is accessible:
- Canva’s accessibility feature will fully scan your design and point out areas where you can improve its accessibility.
- UserWay’s plug-in will check your website’s accessibility to make sure it satisfies WCAG standards and requirements.
- We Are Colorblind is a valuable resource sharing articles from the perspective of people with colorblindness.
- Contrast is a Figma plug-in that will give you insight into WCAG color contrast ratios.
- ColorBox’s algorithm helps you choose accessible color combinations, sorting by color, hue, saturation, and luminosity.
- Color Oracle is a free simulator for color blindness, allowing you to see your designs through the eyes of someone with color vision impairment.
Accessible design is not just about compliance—it's about opening doors to new audiences, enhancing user experiences, and strengthening your brand. By thoughtfully considering color contrasts, typography choices, and inclusive design elements, you're crafting a visual language that speaks to a wider audience.
As technology evolves and our understanding deepens, so too should our commitment to inclusive design. Accessible design challenges us to think more creatively, to empathize more deeply with our users, and to create solutions that truly serve everyone.
Craving graphic designs that pop? Connect with us today.