Accessibility tools

A selection of tools to help product designers design accessibly.

On testing color contrast

When testing contrast be wary of tools that use color pickers. The picked color may differ depending on your color space settings and other factors. Always prefer direct value input.

Figma

Accessibility sticker sheet

This Figma file includes annotations to use on your designs prior to developer hand off. These annotations let you note accessibility information like desired tab order, screen reader labels, headings, and landmarks. Pull directly from the file or turn on the accessibility annotations in your Figma assets list.

A11y - Focus Orderer plugin

Select your elements in the desired tabbing order, add them to the plugin to get a visible layer label, and use the tab key to test the tab order from inside of Figma.

How does this help? Instead of manually placing tab order stickers on your design, let the plugin do it for you, and you can tab through your design to see if the flow makes sense.

Contrast plugin

This plugin will check the contrast of text, graphical objects, and even gradients.

How does this help? Checking the color contrast is one of the most important steps to take as a designer. Now you can test contrast without leaving the design tool.

Color Blind plugin

Color Blind allows you to view your designs in the eight different types of color vision deficiencies.

System tools

Sim Daltonism (MacOS)

Free application in the Mac App Store that can simulate various color blindness disorders.

How does this help? When you're designing something that uses color (yes, that's everything), you can use this app to see the design as someone who has color blindness would see it, and check if it still makes sense.

Colour Simulations (Windows)

Free application for Windows that is comparable to Sim Daltonism on Mac.

Web tools

WebAIM Contrast Checker

The WebAIM contrast checker is the golden standard and does a good job explaining what the result means. At GitHub the WebAIM contrast checker is the standard that has to be met.

There is also a link contrast checker.

Color Review

Color review is fantastic if you're looking for help finding an accessible color in an existing palette.