Tools for Designing Accessible Experiences

When it comes to creating accessible applications and websites, there are several tools that we use to help us along the way. These tools are helpful for people that are completely new to accessibility as well as seasoned accessibility veterans.

During the Design Phase

The design phase is the best time to get your app or website off on the right foot with accessibility. When accessibility is thought of this early on you can help reduce a lot of rework and retrofitting.

Whether we’re working with an existing brand or starting with a clean slate, color choice is extremely important. An estimated 1 in 12 men and 1 in 200 women have some form of color blindness and about 285 million people globally have some form of visual impairment. So without proper color contrast on your website or app, users with low vision and/or color blindness may not be able to read important copy. All the design tools listed below aid in testing color contrast ratio and text size based on WCAG ratio guidelines.

Stark (Sketch, Figma, & Adobe XD Plugin)

While working on mockups or developing a brand, this tool allows you to test color contrast and simulate different forms of color-blindness in the context of your project.

Color Safe (Online Tool)

When deciding on a color palette for a project, this tool suggests text colors based on a particular background color, font family, font size, font weight, and level of compliance you are hoping to meet.

Accessible Colors (Online Tool)

When working with existing brand guidelines that have an inaccessible color palette, this tool is especially in helping find the closest accessible alternative.

During the Development Phase

All these tools can be used while developing locally or on any live site in the browser to test the current page.

SiteImprove (Chrome Extension)

This is one of my favorite tools to use! It’s really straightforward and configurable to test against specific compliance levels. The page audit generates in a couple seconds, explains how certain issues affect your users, and provides a clear recommendation on how to fix any issues.

Siteimprove also has a paid tool where it will regularly do full website scans and generate accessibility reports.

AXE (Chrome Extension)

Axe is similar to Siteimprove’s chrome extension, but is tailored a little more for developers.

Lighthouse (Chrome Developer Tools)

Lighthouse is an audit tool managed by Google that can test a page’s performance, user experience, and accessibly. Since Google uses accessibility as a ranking factor in their algorithm, this tool helps highlight areas that can improve your website or application’s accessibility and SEO at the same time!

While these tools help guide our websites and applications in the right direction when it comes to accessibility, it’s important to remember there is still a level of manual testing. Not all accessibility requirements can be tested using an automated tool, but it’s certainly a helpful piece in our accessibility process.

Monique Silva

Director of Design

Monique's interest in design started at a young age, but it wasn't until going to school at the University of Illinois that she discovered her love of UX & UI design. With degrees in both Graphic Design and Psychology, she has developed a strong understanding of how design can enrich a user's overall experience. She also enjoys running outdoors, reading, and baking/eating plenty of baked goods.