Accessibility tools

On this page

Figma
System tools
Web 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.

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 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.