Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Here are some tools to use with Figma for accessibility.

  1. A11Y color contrast checker (Free)

...

Ensure your text is readable for users by adhering to WCAG (Web Content Accessibility Guidelines) standardsTo 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 color 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 color colour sliders that allow users to adjust the colors 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

Add 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

Image Added

Image AddedImage Added

Text Resizer

...

Enabling users to customize text size aligns 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 precisely assess this behaviour.

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. Get started for free today!

  1. Color Blind

You can use the color blind plugin to get an accurate and real-time simulation of your designs based on the type of disorder you have selected.

...

https://www.figma.com/community/collections/plugins-accessibility

...