Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

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 checks the colour contrast ratio of all visible text in a frame and provides feedback on whether it meets WCAG’s AA and/or AAA level compliance. It also provides colour sliders that allow users to adjust the colours and understand how the corresponding contrast ratio changes in real-time.

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

Able

Able plugin adds colour contrast and colour blindness to your workflow with as little effort as possible. Open Able, and we will automatically compare the contrast between the two layers you select. This way, you can keep Able open and casually select layers to compare without re-running or updating the plugin!

Good: I can see the font size option

Bad: You need to select only two layers, not the entire artboard.

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.

  • No labels