Note: Level Access Design Companion is our default Figma plugin. We recommend it for all new accessibility testing in Figma. Level Access Figma Plugin (Lite) is our legacy plugin, and remains available.
Who can use this feature?
- Available for the Accelerate and Enterprise packages.
On this page:
- Overview of the Level Access Design Companion workflow
- Test your design with Level Access Design Companion
- Get recommendations from Ask Level AI
- Generate alternative text for a missing image alternative-text finding
- Generate a replacement color for a contrast finding
- Design rules for testing your Figma design
- Create accessibility annotations
Overview of the Level Access Design Companion workflow
Design Companion supports two related workflows:
Testing a selected frame for accessibility issues
Documenting accessibility requirements for design handoff
Test and improve your design
- Install Level Access Design Companion.
- Log in. You must have a valid API key.
Select a supported frame.
Run a test.
Expand a finding to see WCAG context, measured values, and a recommendation.
For supported color contrast and missing image alternative-text findings, use Ask Level to get a suggested fix.
Use the Locate link to jump to affected elements directly in the design.
Fix the issues.
Re-run the test.
Document accessibility requirements
You can also create annotations for image alternative text, heading structure, focus order, and additional accessibility requirements. Annotations appear in the plugin and on the Figma canvas so that you can review them during design handoff.
For more details, review Create and manage accessibility annotations in Level Access Design Companion.
Test your design with Level Access Design Companion
After you install Level Access Design Companion, and log in, proceed to test your product design in Figma.
Note: When you log in, a frame might be already selected on the canvas. If no frame is selected, you'll see the relevant message. As well, in this context, the Run test button is disabled.
To test your design:
Log in, and select a frame on the canvas.
-
Select Run test. Wait till the test completes successfully. The Test Result view is displayed, indicating individual issues across the following categories:
- Contrast
- Text & Typography
- Interactive Elements
- Alt Text
- Form inputs
- Headings
Select the arrow to expand any finding. The finding card expands to reveal the context of the finding. What appears depends on the rule. The following table lists the type of issues a finding can contain, and which information is available for each issue.
| Type of issue | Information about the issue |
|---|---|
| Contrast issues |
WCAG criterion, calculated contrast ratio, AA and AAA pass/fail indicators for normal text (4.5:1), large text (3:1), and graphics/UI (3:1), foreground and background colors with swatch + hex + RGB, visual text previews, and a recommendation.
|
| Text size issues | WCAG criterion, detected text size in pixels, AA and AAA pass/fail indicators, and a recommendation. |
| Interactive Elements | WCAG criterion, target height and width in pixels, AA and AAA pass/fail indicators, and a recommendation. |
| Missing image alternative text |
WCAG criterion and a recommendation.
|
| Heading issues | WCAG criterion and a recommendation. |
| Form input issues | Input missing label, input group missing group label, placeholder used instead of label — WCAG criterion and a recommendation. |
To jump to the affected element in your design, select Locate on any individual finding.
You are taken to the issue, and presented with a recommendation how to fix it. Make the required changes.To run the test again, select the issue you want to check, and then choose Re-run.
Get recommendations from Ask Level AI
For supported findings, Ask Level AI can provide a suggested alternative-text value or a replacement color. Recommendations do not change your design automatically. Review the result, make the appropriate change in Figma or your handoff documentation, and re-run the test when applicable.
Generate alternative text for a missing image alternative-text finding
To generate Alt text:
Run a test and expand a missing image alternative-text finding.
Select the Ask Level AI prompt.
Review the generated alternative text.
Use the suggestion as the basis for the alternative text provided during implementation or design handoff.
Note: Generated alternative text is a starting point. Review it against the purpose and context of the image before using it. Ask Level does not automatically create an Image alt text annotation on the Figma canvas.
Generate a replacement color for a contrast finding
To generate a replacement color for a contrast finding:
Run a test and expand a supported color contrast finding.
Select the Ask Level AI prompt.
Review and copy the suggested replacement hex value.
Apply the color in Figma.
Re-run the test to validate the updated contrast.
Note: The recommendation is intended to address the contrast requirement. Review the suggested color against your organization’s brand and design-system requirements before using it.
Design rules for testing your Figma design
Level Access Design Companion tells you exactly what’s wrong with your tested frame and how to fix it. It matches your design to the design rules library.
The following table lists categories, their associated severity levels and testing rules.
Category |
Severity |
Testing rules |
|---|---|---|
Contrast |
Low |
|
Text & Typography |
Low |
|
Interactive Elements |
High |
|
Alt Text |
Critical |
|
Form Inputs |
Low |
|
Headings |
Low |
|
Create accessibility annotations
Use accessibility annotations to document requirements that might not be clear from the visual design alone. Design Companion supports image alternative text, heading order, focus order, and additional accessibility notes. Annotations are displayed in the plugin and on the Figma canvas.
For more details, review Create and manage accessibility annotations in Level Access Design Companion..
Comments
0 comments
Please sign in to leave a comment.