StyleGuardBlog·
How to check color contrast in Figma for WCAG AA and AAA
How WCAG contrast is actually computed in Figma: background compositing, opacity, large text, and AA vs AAA thresholds.
Figma will not tell you that a label fails WCAG until a user, or a linter, measures it. The ratio is not “text color vs the frame fill you remember”. It is the rendered text against the effective background.
AA vs AAA
| Text | AA | AAA |
|---|---|---|
| Normal | 4.5:1 | 7:1 |
| Large (24px, or 18.66px and bold) | 3:1 | 4.5:1 |
Pick a level in your design system and keep it. Mixing AA marketing pages with AAA product UI is how contrast bugs sneak into the kit.
What to measure
- Resolve the text fill, including opacity.
- Walk ancestor solid fills until you have an opaque background. Composite over white if the stack never goes opaque.
- Compute the contrast ratio against that effective background.
- Apply the large-text threshold if the style qualifies.
Plugins that sample only the parent frame miss overlays, scrims, and text sitting on an image-adjacent solid.
Common fails in Figma files
- Grey helper text on a slightly off-white surface.
- White text on a brand blue that is too light for 4.5:1.
- Placeholder copy at 40% opacity.
- Buttons whose hover/disabled labels were never rechecked.
How StyleGuard reports it
The built-in Color contrast (WCAG) rule is an error by default. It composites ancestor solid fills over white, accounts for text opacity, and respects AA or AAA from Settings. The message looks like Contrast 2.1:1 is below the 4.5:1 minimum (WCAG AA).
Pair it with Readable font size (12px by default) and Touch target size (44×44). Contrast is only one part of accessible Figma QA.
Ready to check your file?
Try StyleGuard directly in Figma.
Get the Figma plugin