Three straight staircases with four people walking and running on them with a yellow hue overlaying the image.

Free Figma Plugins for Accessibility Design

by | November 22, 2023



Creating a great user experience for everyone who visits your website means it must be as accessible as possible. By ensuring a site is accessible, you also make it easy to use, regardless of your visitor’s physical or mental capabilities. But as anyone who’s had to design or build a website that complies with WCAG 2.1 Level AA guidelines (the common standard for web accessibility) will tell you, it isn’t always easy. But digital product design technologies are rapidly improving, and the leading collaborative design tool, Figma, offers a ton of plugins that aid designers in making their products more accessible. Because we strive to enable everyone to access the internet, we’ve compiled a list of Figma accessibility design plugins for our team, and we’re sharing it here. Throughout this post, we use the numeronym “a11y” to stand for the word “accessibility.” We hope you get a lot out of this compilation of top-notch tools. 

A11y Color Contrast Checker 

The Letter 'A' displayed in four blue boxes on a white background. The right hand side panel displays different settings for text lightness and background lightness. A screenshot of a website page displayed on a computer screen. The pop-up box displaying an Accessibility Color Contrast Checker, demonstrating that 'All texts meet AAA color contrast requirements' on the website screenshot.

This plugin for Figma stands out as one of the most widely used. It guarantees text legibility for users by following the Web Content Accessibility Guidelines (WCAG).

A11y Color Contrast Checker 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: Enables you 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.


Easily modify the contrast of your images by accessing the app's dedicated contrast button to ensure your text and background meet the latest WCAG standard.A screenshot of a website with a pop-up text box demonstrating the Contrast ratio for the blue text and white font choice.

Contrast simplifies the process of verifying color contrast ratios as you work. When you select a layer, Contrast will promptly analyze the color directly behind your selection. It provides you with the contrast ratio and indicates whether it meets the passing or failing levels outlined in the Web Content Accessibility Guidelines (WCAG). In cases where Contrast cannot detect the background color, simply add another layer to your selection, and Contrast will compare them both for you.

PROS: Same as A11y Color Contrast Checker.

CONS: Same as A11y Color Contrast Checker. Depending on how a layer is constructed, you may encounter limitations in accessing all the text.


The Able plugin seamlessly integrates color contrast and color blindness considerations into your workflow with minimal effort. When you open Able, it automatically compares 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 and links to the color contrast guidelines.

CONS: You can select only two layers rather than the entire artboard.

A screenshot of the website Able with the tagline "friction free accessibility for Figma" there is an pop-up box stating the colors and contrast ration, and previews the background and text color.Screenshot of the Frame with the text "Give the Gift of Home" with a pop-up text box stating the colors used and the contrast ratio.

Color Blind

This plugin obtains a precise and real-time simulation of your designs tailored to the specific type of color vision disorder you've chosen.

PROS: You can effortlessly preview and generate images depicting various colorblind versions.

CONS: There are no drawbacks to note. The plugin is user-friendly and provides all the essential options needed for effective use.

Displaying two Color Blind icons one with a blue and white icon, the other red and black.Screenpage for the Color Blind app with the text "Simulate Color Blind in Your Designs" with a close-up realistic portrait of a white women with one eye and eyebrow showing with circular imagery overtop their hazel eye. Text in the corner "Made with love in India"The homepage of a website with a blue and white background with a pop-up ColorBlind Simular box with the text "Using this plugin you can preview how your design will be perceived by people with a particular color blind type." then lists 10 different types of color blindness.Displaying 8 different types of color blindness so you can view your website the way someone experiencing colorblindness would.

Text Resizer

Text resizer empowers users to tailor text sizes to meet WCAG requirements for text resizing. When implemented correctly, your designs should be compatible across all operating systems and browsers regardless of the user’s text size preference.

Many users, irrespective of visual impairments, prefer to make slight adjustments to text size. Hence, understanding how your design accommodates these changes becomes imperative. This is where Text Resizer excels, providing you with precise insights into this behavior.

PROS: You can conveniently adjust all text sizes at once using the “rem” unit.

CONS: The text resizing function is not compatible with text sizes defined with Variables or Style settings.

Dev note: Don’t use this plugin to change the rem value for your designs. One rem is always 16px in the browser.
 An app with the text selector on the screen to demonstrate how you can "quickly check your layout accessibility for various base size.".

Webpage screenshot of the practicality of the Text Resizer - Accessibility Checker, demonstrating what a current base font size of 12 px would like versus a New Base Font Size of 16px.

A11y Focus Order

This Microsoft-created plugin ultimately benefits users who rely on a keyboard or other input devices to navigate an application. It specifies the precise order in which elements should receive focus within the browser, enhancing accessibility and user experience. Designers will find that the plugin allows you to:

  • Add accessibility annotations to your design.
  • Bulk add, remove, reorder, and update your annotations  
  • Create multiple annotation sets that can be named and styled with a different color
  • Store annotations in a single-layer group that can be toggled on / off  

Here are more details on how to use the plug-in, as well as a YouTube tutorial.

PROS: This tool is a rare gem tailored for users who depend on the keyboard or other input devices for navigation.

CONS: Unfortunately, project budgets seldom allocate resources for additional features such as this.


This plugin brings a spell-checking feature to Figma and FigJam, similar to the one found in Google Docs. It continuously scans your Figma or FigJam document for spelling errors and offers a convenient one-click solution to correct them.

PROS: It is easy to use.

CONS: You need to get a license key to use the plugin.

Screenshot of the Spelll tool with the text "Avoid embarrassing spelling mistaks" with a pop-up window with a Spell Check for FigmaSpellcheck screenshot The Spell App requires a license key to utilize, this is a screenshot of the textbox to enter in your email address.Pop-up textbox demonstrating the use case of Spelll with a pop-up window correcting the word Bodycopy.

Stark Accessibility Tools (paid)

While it isn’t free, we’re including Stark Accessibility Tools because they’re so useful. With a comprehensive suite of utilities like Contrast Checker, Focus Order, Alt-Text Annotations, Vision Simulator, and more, all conveniently located in one place, it enables designers to easily identify and address accessibility issues in designs before they enter the production phase—or swiftly analyze and rectify those already in progress.

Here's a YouTube tutorial for more details. 

PROS: Provides in-depth results for all accessibility options.

CONS: Not free, requires an account.

Color tool screenshot showing all the material palette options for colors.Demonstrating the color ration and ensuring that it meets contrasting with checkmarks beside Normal text and Large text ratios with two rows: AA and AAAText ratio with a pop-out textbox with the ratios demonstrating the difference in Normal Text and Large Text with two rows: AA and AAA with white text on blue background.

What are your favorite accessibility plugins?

That’s our round-up. We know other plugins are available, and that the Figma community might surface more. To keep up to date with these helpful apps, check out their community site for these tools. 

And, if you know of accessibility design tools that we might find useful, let us know! You can message Crispin and Eugene on LinkedIn. 

Crispin Bailey

Crispin Bailey

Director of Design & UX

When website requirements get daunting, Crispin loves to roll up his sleeves and dig in. His overarching goal is to deliver beautiful and accessible websites for our clients and their audiences. As a seasoned digital strategy expert, Crispin oversees Kalamuna’s design and strategy practice, coordinating design and technical efforts throughout the discovery and design phases on projects to build bridges between research, design, and development.

Portrait photo of Eugene Park wearing a black collared dress shirt

Eugene Park

Senior UX/UI Designer
Eugene is a seasoned UX/UI designer who is driven by a profound passion for crafting impactful projects that leave a lasting positive mark on society. With a steadfast commitment to making the world a better place, she dedicates herself to creating user-friendly products that resonate deeply with individuals and communities. By empowering mission-driven organizations with innovative digital strategies, Eugene strives to amplify their voices and foster meaningful change. Her unwavering mission is to leverage her expertise and creativity to bring about tangible improvements in society and create a brighter future for all.