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
- Design rules for testing your Figma design
Overview of the Level Access Design Companion workflow
The workflow involves the following procedures:
- 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.
Use the Locate link to jump to affected elements directly in the design.
Fix the issues.
Re-run the test.
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.
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 |
|
Comments
0 comments
Please sign in to leave a comment.