Thomas Lowry, Designer Advocate at Figma
Failing to thoroughly address accessibility in your design means a large demographic of users may be excluded from being able to use your product. Just specifying the right colors so that text has enough contrast, or providing a way for users to navigate your site with a keyboard can make all the difference in enabling them to use your product too. WCAG (Web Content AccessibilityGuidelines) publishes and maintains standards for creating accessible on-screen experiences and is a great resource to learn more. To meet these needs while working in Figma, there is a growing collection of accessibility-focused plugins to help you tackle these challenges in your own designs. In this weeks plugin-round up, we’ll take a closer look at some helpful plugins to help you make your designs better for everyone.
Let’s start with color contrast. An important part of choosing the right color parings between text and the surfaces/backgrounds they reside on, is ensuring there is enough contrast so that the text is legible and readable by users with varying levels of vision. These plugins will help you identify if particular color combinations meet WCAG AA or AAA standards. Each of these has their own unique features and user-interface, so feel free try them both to see which one works best for you.
Able
Creator: Sondre Kvam
Able is plugin designed to check color contrast—it will analyze the color of any two objects that you have selected. One feature that I like most about this plugin is that it updates as you change your selection. The plugin also takes your colors and gives you a text/background preview and an option that enables you to simulate what those colors will look like through the lens of different types of color blindnesses. And, you can swap the colors between the text and background color. As a bonus, in the menu to select a type of color blindness to simulate, you’ll see a data point by each that indicates what percentage of the population is affected by each type of color deficiency.
Contrast Checker
Creator: Stark
If you’re coming from Sketch, you may already recognize this one. Stark displays the contrast ratio for any two objects that you select. It also gives you a contextual preview depending on whether or not one of your layers is a text layer or not. The plugin also displays a breakdown of your selected colors at both AA/AA and AAA/AAA ratings to show different levels of contrast ratios and a rating for if the font size used is over 18pts.
Color Blind
Creator: Sam Mason de Caires, UX Engineer at Cloudflare
Color Blind is a plugin designed to help you understand how your colors will look from the perspective of different types of color blindness. One of the unique things about this plugin is that it doesn’t just give you a preview of the colors you have chosen, but actually generates visuals on canvas based on whatever elements you have selected. The plugin will create duplicates of your design and change the colors to reflect each type of vision in an appropriately named group.
Focus Orderer
Creator: Tiffany Chen, UX designer at Microsoft
Shifting gears from colors, let’s move on to Focus Orderer. Focus Ordered lets designers annotate their designs to indicate where and what order the browser should change the focus to. With this plugin, you can select an element and use the plugin to create a focal point. If you need to change the order of the focus, you can do it all in the plugin UI by dragging to change their order and Focus Orderer will take care of renumbering them all on canvas. You can also use the plugin to test and tab through all the elements as well. This is a great way to treat accessibility as a first-class citizen during your design to implementation process.
We hope that these accessibility plugins find a place in your Figma workflow. Stay tuned next week for another round up of useful plugins, and if you missed last weeks, be sure to check out our post on 5 helpful utility plugins.
P.S: If you’re thinking of developing your own plugin, be sure to check out our Plugin API documentation to learn how to get started. There is also an online Slack community of plugin developers to connect with, too! If developing your own plugin feels intimidating, remember you can launch the console in Figma and try a few commands to get a feel for how it works. If you’ve ever used Javascript to interact with the DOM on a website, interacting with the Figma canvas works almost the same.
22 comments
Hi excellent blog! Does running a blog similar to this require
a great deal of work? I have absolutely no expertise in coding
but I had been hoping to start my own blog in the near future.
Anyways, if you have any recommendations or tips for new blog owners please share.
I understand this is off subject but I simply wanted to ask.
Thanks a lot!
You are so interesting! I do not suppose I’ve truly read something like that
before. So nice to discover another person with some genuine thoughts on this topic.
Seriously.. thank you for starting this up. This site is one thing that is
needed on the web, someone with a little originality!
Hello my loved one! I want to say that this article is awesome,
nice written and come with almost all important infos.
I’d like to see more posts like this .
Hi there! Quick question that’s entirely off topic.
Do you know how to make your site mobile friendly?
My web site looks weird when browsing from my
iphone4. I’m trying to find a theme or plugin that might be able to correct this problem.
If you have any suggestions, please share. Appreciate it!
Good site you’ve got here.. It’s hard to find high quality writing like yours nowadays.
I seriously appreciate people like you! Take care!!
I like it when individuals come together and share
opinions. Great blog, stick with it!
If you are going for most excellent contents like I do, just pay a visit this site
every day since it gives feature contents, thanks
Hi, i read your blog occasionally and i own a similar one and i was just
wondering if you get a lot of spam responses? If so how do you reduce it, any plugin or anything you can suggest?
I get so much lately it’s driving me mad so any support is very much appreciated.
Keep on working, great job!
Hi there, You have done an excellent job. I will definitely
digg it and personally suggest to my friends.
I’m confident they will be benefited from this website.
asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr
I think this is one of the most important information for me.
And i am glad reading your article. But want to remark on some general things, The website style is ideal, the articles is really nice : D.
Good job, cheers quest bars http://tinyurl.com/49u8p8w7 quest bars
Great weblog here! Additionally your web site a lot up very fast!
What web host are you the use of? Can I am getting your associate link in your host?
I want my site loaded up as fast as yours lol quest bars
https://www.iherb.com/search?kw=quest%20bars quest bars
Hi there! Do you know if they make any plugins to help
with SEO? I’m trying to get my blog to rank for some targeted
keywords but I’m not seeing very good success. If you know of
any please share. Many thanks! cheap flights http://1704milesapart.tumblr.com/ cheap flights
Simply want to say your article is as amazing. The clearness for your
post is simply great and i can think you are a professional on this subject.
Well along with your permission let me to snatch your feed
to stay updated with drawing close post. Thank you 1,000,000 and please continue the gratifying work.
scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery
I’m not sure why but this website is loading incredibly slow for me.
Is anyone else having this issue or is it a problem on my
end? I’ll check back later on and see if the problem still exists.
ps4 games https://bitly.com/3nkdKIi ps4 games
Fine way of telling, and good paragraph to obtain data regarding my presentation focus,
which i am going to present in university. scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery
Today, while I was at work, my sister stole my iPad and
tested to see if it can survive a thirty foot drop, just so she can be a youtube sensation.
My iPad is now destroyed and she has 83 views. I know this is entirely off topic but I had to share
it with someone! https://parttimejobshiredin30minutes.wildapricot.org/ part
time jobs hired in 30 minutes
I want to to thank you for this wonderful read!!
I absolutely enjoyed every little bit of it. I’ve got you saved as
a favorite to check out new stuff you post…
wonderful points altogether, you just won a new reader.
What would you recommend in regards to your publish that
you simply made some days ago? Any certain?
Outstanding quest there. What occurred after? Thanks!
I could not refrain from commenting. Perfectly written!