Accessibility tools

Figma

Error

these are just an example figma plugin/toolkit I found it may or may nto be relevant. all of these need to be reviewed and selected by UX

Figma Annotation Toolkit

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.

The A11y - Focus Order plugin lets you add accessibility annotations over your designs for the interactive elements of desktop, website, and mobile applications. You can share these annotations with engineers as part of your design. Accessibility is critical for good design. Making your designs accessible makes them easier to use for everyone. Our plugin addresses a very specific corner of accessibility. As designers, we often think about accessibility visually, in terms of color contrast, type readability, etc. This plugin addresses accessibility for keyboarding and screen reader software. It helps designers and engineers create a plan for how their product will interact with this technology so that screen readers can communicate properly with their users.

Contrast Plugin for Figma

Contrast makes it easy to check the contrast ratios of colors as you work. Select a layer and Contrast will immediately look for the color directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG). If Contrast cannot find the background color, add another layer to your selection, and Contrast will compare them both.

Color Blind allows you to view your designs in the 8 different types of color vision deficiencies. All you need to do is make a selection and the plugin will clone it and create versions with the colors changed based on what each one would look like to a person with that type of color blindness.

System Tools

Sim Daltonism (macOS)

From the perspective of a color blind person, some colors are impossible to distinguish. Sim Daltonism lets you visualize colors as they are perceived with various types of color blindness.

Move the Sim Daltonism window over something on the screen and see what it looks like with a color blindness. With this app you can check the accessibility of websites and other user interfaces, make your visual designs better for color blind people, or just play around to better understand how various color blindness types affect color perception.

Web Tools

WebAIM Contrast Checker

The WebAIM contrast checker https://webaim.org/resources/contrastchecker/

WebAIM Link Contrast Checker

The WebAIM link contrast checker https://webaim.org/resources/linkcontrastchecker/

Color Review

A color contrast checker that helps you adjust and find accessible colors within an existing color palette https://color.review/