To meet the accessibility standards and access a collection of top-notch tools for creating products with improved accessibility within Figma, explore this list of plugins.
Free Plugin
A11Y colour contrast checker
The A11y plugin for Figma stands out as one of the most widely used plugins. It guarantees text legibility for users by following the Web Content Accessibility Guidelines (WCAG).
This plugin assesses the color contrast ratio of all visible text within a frame and offers feedback on whether it meets WCAG's AA and/or AAA level compliance. Additionally, it provides color sliders, allowing users to fine-tune colors and observe real-time changes in the corresponding contrast ratio.
PROS: the ability to evaluate the contrast ratio of your entire Figma artboard. This preview offers insights into how your design will appear on your website or app.
CONS: Depending on how a layer is constructed, this plugin may encounter limitations in accessing all the text, potentially leading to misleading results.
Able
Able plugin seamlessly integrates color contrast and color blindness considerations into your workflow with minimal effort. Simply open Able, and it will automatically compare the contrast between the two layers you choose. This allows you to keep Able open and easily select layers for comparison without the need to rerun or update the plugin.
PROS: It shows the font size option also has a link to the color contrast guideline.
CONS: You should select only two layers rather than the entire artboard, as this can save you unnecessary effort.
Color Blind
You can use the colour blind plugin to get an accurate and real-time simulation of your designs based on the type of disorder you have selected.
Good: You can easily preview and generate the version of the image.
Bad: Nothing
Text Resizer
Text resizer enables users to customize text size to align with WCAG requirements and is compatible with all operating systems and browsers when implemented accurately.
Most individuals, regardless of visual impairment, tend to adjust text size slightly (either larger or smaller). Therefore, comprehending how your design responds to such changes is crucial. This is where Text Resizer comes into play, enabling you to assess this behaviour precisely.
Good: You can change all text sizes based on rem at once
Bad: This function is incompatible with Variable and style
A11y Focus Order
A11y Focus Orderer by Microsoft is very useful for users using the keyboard or other input devices to navigate an application. It specifies the order according to which elements should be focused upon in the browser.
Spelll
This plugin equips Figma and FigJam with a spell-checking capability akin to that of Google Docs. It performs ongoing checks for spelling errors in your Figma or FigJam document and provides a one-click solution to rectify them.
Not Free
Stark Accessibility Tools (not free, need an account)
With tools like Contrast Checker, Focus Order, Alt-Text Annotations, Vision Simulator, and more all in one place, you can find accessibility issues in a design before it goes into production—or quickly analyze and fix what’s already in flight.
https://www.figma.com/community/collections/plugins-accessibility
Please check the link to see more Figma plugins for accessibility.