A wide range of tools can help you find accessibility issues—from browser plugins to website scanners. But each tool has its own strengths and weaknesses. Sparkbox’s goal is to research various accessibility tools and empower anyone to run accessibility audits. In the past, we have reviewed tools aimed at developers and others who are working with code, but web accessibility should be a consideration throughout the entire process—including the UX and design stages. In this article, I will be taking a look at the Stark plugin for Figma by using it with a test page put together by our design team.
Figma is a popular application used to collaboratively design user interfaces and digital layouts. While Stark can be used in several different ways, including as a browser extension and as a standalone Mac app, I will be focusing on the Figma plugin. Unlike other accessibility tools we have reviewed in this series, Stark is a paid service. In order to experience all of Stark’s major features, we signed up for a subscription.
This review will rate the plugin based on the following areas:
Watch a bite-sized review plus a walkthrough of the plugin in the video below or keep scrolling to read the full review. Jump to the conclusion if you are in a hurry.
In order to fully vet accessibility tools like this one, Sparkbox created a demo design with intentional errors. This design is not related to or connected with any live content or organization. Sparkbox was not paid or otherwise reimbursed by Stark for this review.
Want updates from Sparkbox?
Sign up to receive our emails right to your inbox—like Sparkbox’s monthly newsletters or updates about specific topics like more accessibility tool reviews!
Ease of Setup: Outstanding (4/4)
Stark is straightforward to set up. Starting from zero to using the tool is a matter of creating an account on the Stark website, choosing a payment plan, finding and installing the Stark plugin in the Figma Community, and logging into your Stark account within the plugin. A user can search for the tool themselves, but there is a direct link to the plugin as well that can be found in the “Getting Started” guide that can be found upon first logging in.
Ease of Use: Outstanding (4/4)
This category is focused on how easy it is to learn and begin using the tool on Figma once the plugin is installed. After a user is logged into their account in the plugin, they are presented with a menu detailing the various Stark tools that are labeled with both text and an icon. From there, users click on the tool they want to use, click on the element they want to examine in their design, and the plugin window will update with feedback.
If more direction is needed or a user would like to check if they have missed any nuances in any particular tool, there is a link to “Getting Started” tutorials found both in the account dashboard and the main website. The tutorials cover how to use the tool and why certain accessibility considerations are important. These tutorials can be a jumping-off point for web accessibility beginners to start exploring or continuing their education.
For further guidance and feedback, Stark also has active Slack and Discord communities for asking questions as well as a nolt board for submitting feature requests.
Reputable Resources: Exceeds Expectations (3/4)
There are direct links to the WCAG 2.1 standards in the tutorials, though the website copy does still specify WCAG 2.0. We reached out to a Stark representative about how compliance with the latest guidelines is ensured, and we were told that the team is continually up to date with the latest WCAG version. We were also pointed to the Release Notes page which currently only lists feature updates on Stark itself.
Accuracy of Feedback: Meets Expectations (2/4)
Of the five accessibility failures that we expected to be caught by an accessibility tool for design, Stark missed one. There are fewer expectations included in this list of accessibility failures compared to our other reviews in this series to account for the fact that this tool isn’t simply analyzing code.
To see all the test issues that Stark found, skip to Accessibility Issues Found.
Clarity of Feedback: Exceeds Expectations (3/4)
Stark’s tools will alert a designer as to what errors can be found in elements of their design. For the Contrast tool, this means a color combination not possessing a minimum required contrast level. For the Alt-Text tool, this means an image is missing defined alt text or there is another issue with existing alt text.
Currently, there are no direct links to the WCAG 2.1 guidelines within the plugin but the plugin itself offers some guidance. Using the Contrast tool within the plugin as an example, Stark provides feedback on whether a color combination has Level AA or AAA compliance as well as the necessary contrast ratio. On the plus side, the plugin does link the user back to their documentation.
Cost: Areas for Improvement (1/4)
There is a free version of Stark, but user access to features is limited. The Pro membership aimed at individual designers starts at $12 month-to-month or can be paid annually for $120. The next tier is the Team membership, which costs $15 per month per seat starting at 5 seats. There is also an enterprise-level tier with dependent pricing.
There is a dark pattern on the pricing page, where the prominent text on the Pro membership states that the cost is $10 per month when that is meant to be the price when an annual membership is bought. The text that clarifies this is in the less-prominent paragraph below, along with the $12 month-to-month option. Also worth noting is that their privacy page mentions that device and usage information is collected when using Stark.
Strengths and Limitations: Meets Expectations (2/4)
One of Stark’s strengths are its features that aid in the designer-developer handoff. The ability to signify focus order for elements, define elements as landmarks, and note when alt text should be included on an image helps alleviate the back-and-forth that can happen at the handoff stage.
On the other hand, there are some Stark features that could be improved. If a user were to accept one of the color suggestions using the Contrast tool, only the individual element would be updated and any corresponding library color styles would not. If a user were to apply color suggestions in several locations without updating corresponding styles, this could lead to a design with many stray styles. The Typography tool has this issue as well. Additionally, it would be helpful for the Typography tool to analyze other attributes that might make text harder to read, like a sufficient line height.
It is important to note that Stark is in active development. The Vision Simulator feature which previously offered only color-blindness options recently added new simulators, including blurred vision and viewing pages as if under a bright light. The new Sidekick feature was added to the plugin during the writing of this review which scans the entire design and offers a list of accessibility issues that can be addressed.
Conclusion: Recommended (19/28)
Stark is unique in the accessibility tool space in that it analyzes at the design stage as opposed to looking at the code of a live website. Stark’s developers face the challenge of designing an accessibility tool like this that can’t analyze code, but the tool can help bridge some of that gap between designer and developer as it stands today.
Accessibility Issues Found
| Test Site Issue | Tools Should Find | People Should Find | Stark Found |
|---|---|---|---|
| Insufficient contrast in large text | ✅ | — | ✅ |
| Insufficient contrast in small text | ✅ | — | ✅ |
| Insufficient contrast in interface controls | ✅ | — | ✅ |
| Insufficient text spacing | ✅ | — | ❌ |
| Target for click area is less than 44px by 44px | ✅ | — | ✅ |
| Missing form input labels | — | ✅ | ❌ |
| Form helper text not visually close to inputs | — | ✅ | ❌ |
| Form error messages only using color to display an error | — | ✅ | ❌ |
| Form errors do not include instructions on how to correct the error | — | ✅ | ❌ |
| Content is presented without having to scroll in 2 directions | — | ✅ | ❌ |
| Looping animations are missing pause/play controls | — | ✅ | ❌ |
| Headings and labels are not descriptive | — | ✅ | ❌ |
| Missing skip links for sections that are repeated on multiple pages | — | ✅ | ❌ |
| When a component receives focus the context of the content changes | — | ✅ | ❌ |
| Navigation across multiple pages changes | — | ✅ | ❌ |
| Mystery navigation (icons to represent pages without any descriptive text) | — | ✅ | ❌ |
| Link text is vague (click here) and/or only makes sense when accompanied by surrounding text | — | ✅ | ❌ |
| The same link text is repeated in multiple places on the page but they all go to different locations | — | ✅ | ❌ |
| Visual hierarchy | — | ✅ | ❌ |
