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!
