Skip to content

Accessibility tools

A selection of tools to help product designers design accessibly.

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 comperable to Sim Daltonism on Mac.

""

Web tools

Color Review

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

""

Edit this page on GitHub
2 contributorsichelseayaili
Last edited by ichelsea on January 5, 2021