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

Annotation Toolkit (Internal)

This Figma library includes annotations to use on your designs prior to developer hand off. These annotations let you document semantic structure, make visuals and interactions accessible Annotate design system components, outline DOM order, and work better together. It is active by default in all new Figma files, and can also be activated manually if needed.

A11y - Focus Order 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.