Understanding issues
A11y Audit detects and classifies violations into 7 categories corresponding to the WCAG 2.2 AA criteria most frequently violated in Figma mockups.
1. Text contrast — WCAG 1.4.3
Section titled “1. Text contrast — WCAG 1.4.3”Criterion: Contrast (Minimum) — Level AA
Required thresholds
Section titled “Required thresholds”| Text type | Minimum ratio |
|---|---|
| Normal text (< 18pt or < 14pt bold) | 4.5:1 |
| Large text (≥ 18pt or ≥ 14pt bold) | 3:1 |
How the plugin measures it
Section titled “How the plugin measures it”The plugin calculates the relative luminance ratio between the text color and the immediate background color. If multiple background layers overlap, it traverses the layer hierarchy to find the effective color.
Common violations
Section titled “Common violations”- Light gray text on white background (e.g.: placeholder text)
- White text on insufficiently dark bright-colored background
- Colored text on a similar-toned background
2. UI component contrast — WCAG 1.4.11
Section titled “2. UI component contrast — WCAG 1.4.11”Criterion: Non-text Contrast — Level AA
Required threshold
Section titled “Required threshold”Minimum contrast ratio of 3:1 between:
- Form field outlines and the background
- Active component states (checked checkbox, active button) and the adjacent background
- Informational icons and their background
Common violations
Section titled “Common violations”- Form field border that is too light
- Gray icon on white background
- Toggle or checkbox whose state is indicated only by color
3. Text size — WCAG 1.4.4
Section titled “3. Text size — WCAG 1.4.4”Criterion: Resize text — Level AA
Text must be resizable to 200% without loss of content or functionality. In the Figma context, the plugin checks that font size is sufficiently readable from the design stage.
Indicative thresholds
Section titled “Indicative thresholds”| Context | Recommended minimum size |
|---|---|
| Body text | 16px |
| Captions and labels | 12px |
| Mobile body text | 16px |
4. Touch target size — WCAG 2.5.8 and 2.5.5
Section titled “4. Touch target size — WCAG 2.5.8 and 2.5.5”Criteria:
- 2.5.8 Target Size (Minimum) — Level AA: clickable area ≥ 24×24 px
- 2.5.5 Target Size (Enhanced) — Level AAA: clickable area ≥ 44×44 px
How the plugin measures it
Section titled “How the plugin measures it”The plugin measures the dimensions of identified interactive elements (buttons, links, clickable icons). A warning is issued if the dimension is less than 24×24 px (AA violation); informational feedback is shown if it’s between 24 and 44 px (AAA non-compliance).
Common violations
Section titled “Common violations”- Navigation icons too small on mobile
- Links within body text (tap area = line height only)
- “Close” or “info” buttons of 16×16 px
5. Images without description — WCAG 1.1.1
Section titled “5. Images without description — WCAG 1.1.1”Criterion: Non-text Content — Level A
Every informational image must have a text equivalent. In Figma, this corresponds to image and icon layers that don’t have a descriptive layer name.
How the plugin detects it
Section titled “How the plugin detects it”The plugin flags image or icon type layers with generic names (“Image”, “Rectangle”, Figma auto-number, etc.). These layers should be renamed with a content description or marked as decorative.
Naming convention
Section titled “Naming convention”- Informational image: name the layer descriptively (e.g.:
Team photo — development team) - Decorative image: prefix with
[deco](e.g.:[deco] Background illustration)
6. Heading hierarchy — WCAG 1.3.1
Section titled “6. Heading hierarchy — WCAG 1.3.1”Criterion: Info and Relationships — Level A
The heading structure (H1, H2, H3…) must be logical and without level skips. In Figma, the plugin inspects the text styles applied and their order of appearance within the frame.
Detected violations
Section titled “Detected violations”- Multiple H1s on the same page
- Jump from H2 to H4 without an H3 in between
- Using headings purely for their visual appearance (e.g.: H1 used as a subheading because it “looks nicer”)
Convention
Section titled “Convention”Apply Figma text styles consistently with their semantic level. Name your styles Heading/H1, Heading/H2, etc. for the plugin to recognize them correctly.
7. Color only — WCAG 1.4.1
Section titled “7. Color only — WCAG 1.4.1”Criterion: Use of Color — Level A
Information must not be conveyed by color alone. A user who is color blind or has a visual impairment must be able to understand information without perceiving color differences.
Common violations
Section titled “Common violations”- Form fields with invalid state indicated only by a red outline (without icon or error text)
- Charts where data series are distinguished only by color (without label or pattern)
- Links in text that are not underlined and distinguished only by color
How the plugin detects it
Section titled “How the plugin detects it”The plugin identifies states (error, success, warning) that use only a color change without another visual indicator (icon, text, underline, pattern).
Summary of criteria
Section titled “Summary of criteria”| Category | WCAG Criterion | Level |
|---|---|---|
| Text contrast | 1.4.3 | AA |
| UI contrast | 1.4.11 | AA |
| Text size | 1.4.4 | AA |
| Minimum target size | 2.5.8 | AA |
| Enhanced target size | 2.5.5 | AAA |
| Images without description | 1.1.1 | A |
| Heading hierarchy | 1.3.1 | A |
| Color only | 1.4.1 | A |