FREE Tools to check the visual accessibility of your User Interface design in Figma

Checking the accessibility of your design is a part that a user interface designer sometimes misses or does not know what the actual result is. To overcome this thing you can make a design checklist where you do the accessibility test too.

What does accessibility and the test mean? Accessibility is defined as a design that should the accessible to each and every user group. Your design should be easily accessible for users who have visual disabilities, color blindness, hearing disabilities, and touch (operating) disabilities.

The following are the principles of accessibility:

1. Perceivable
2. Operable
3. Understandable
4. Robust

But how to check the accessibility of your Figma design? that is the question here. Today, I am going to tell you about the two methods that you can use.

FREE Methods to Do Visual Accessibility Test in Figma Design

Following are some methods that designers can use in their Figma design or any design if they want to check the accessibility.

Use Figma Plugins

If you want to perform this test inside Figma only, then you can use the third-party plugins available in the Figma community. Here are some plugins that I am listing below, that you can use:

1. Accessibility Simulator (Link)

1. Stark Accessibility Tools (Link)

Use of Google Chrome or any browser

Yes, you can use Google Chrome developer options or any other browser who is having this feature.

Steps to do accessibility test in Google Chome

Step 1: Open your design in the Figma web app, if you are working on Figma Desktop App.

Step 2: Now, you have to enable the developer options from the three dots available at the top right corner of the browser. Three Dots -> More Tools -> Developer Tools

Step 3: A new section will the visible in your browers that must show code and a lot of other information on the particular page. Now, you have to click on the other three dots available at the top right corner inside this new section.

Step 4: Now, go to the More Tools section. Find and click on the Rendering option in this list.

Step 5: This will open a section inside developer options. Now, scroll to the Emulate vision Deficiencies - Forces vision deficiency emulation.

Step 6: Here, you can select the vision deficiency type and check how your design looks in different visual disabilities.

So, this is how you can run this test in Google Chrome.

I hope this article will help you to understand what is accessibility and why this test is one of the crucial steps in your design process. Accessibility is a very long topic. It has a lot of dependencies, tests, and terms that a designer has to follow. But, in this article, I have just covered the visual accessibility test.