Skip to content
Pandus
en Change language
Menu

Checking WCAG contrast in Figma and Canva

Both Figma and Canva can check colour contrast inside the design file. In Figma, open a colour in the colour picker and switch to its accessibility view: it shows the ratio between the layer and its background and whether it passes WCAG AA and AAA.

Updated October 14, 2026 · 4 min read · How we write and check our guides

In Canva, choose File → Accessibility → Check design accessibility. These checks catch low contrast early, but they look at one pair of colours at a time and miss states such as hover and focus, so test the whole palette as well. Facts come from Figma's and Canva's help pages, checked on 14 October 2026.

The WCAG contrast thresholds

What Level AA Level AAA
Normal text 4.5:1 7:1
Large text (about 24 px regular or 18.5 px bold) 3:1 4.5:1
Icons, input borders, focus indicators and other UI parts (WCAG 1.4.11) 3:1 —

Details and examples are on the WCAG pages for contrast (minimum) and non-text contrast.

Contrast in Figma

  • Where: select a layer, open its colour in the colour picker and open the accessibility view. The selected layer is always the foreground.
  • What it shows: the ratio from 1:1 to 21:1, and AA and AAA results for normal text, large text or graphics; AAA applies to text only.
  • When it fails: a warning icon appears next to AA or AAA. Selecting it moves the colour to the nearest value that passes.
  • Limits: the ratio compares brightness of two colours, so gradients, images behind text and transparent layers need a second look. Figma also offers a free web contrast checker for two hex codes.

Contrast in Canva

  • Where: in a design you can edit, File → Accessibility → Check design accessibility. The checker does not appear if you only have comment access.
  • What it covers: colour contrast and other common issues; Canva's accessibility tools also help add alt text to images, structure headings and arrange the reading order.
  • Limits: Canva itself says the check is not a guarantee of accessibility. Designs exported to PDF need their own check; see how to check PDF accessibility.

What design tools do not catch

  • States. Hover, focus, disabled and error states are often separate frames or not drawn at all. Check that the focus indicator has 3:1 against its surroundings.
  • Text over images and gradients. The ratio changes across the image; test the lightest and darkest spot behind the text.
  • The whole palette. A colour that works on white may fail on your brand's light grey. Test every pair at once with our palette contrast checker.
  • Font size. Whether text counts as "large" depends on its real size in the browser; see font size and WCAG.
  • Everything that is not colour. Labels, headings, keyboard order and alt text are decided when the design is built.

From design to the live site

  1. Check single pairs with our contrast checker, which also suggests the closest colour that passes.
  2. Check the brand palette with the palette contrast checker and write the passing pairs into the design system.
  3. Once the page is built, run the WCAG checker on the staging or live page: it measures the contrast of the real text on the real background.
  4. Curious about the newer contrast method? Read APCA vs WCAG; WCAG 2.2 still uses the ratio above.

Pandus checks web pages, not design files. It is an automated check, not a full audit.

Frequently asked questions

Does Figma have a contrast checker?

Yes. The colour picker has an accessibility view that shows the contrast ratio between the selected layer and its background and marks AA and AAA results for normal text, large text and graphics. Figma also has a free web contrast checker.

Does Canva have an accessibility checker?

Yes. In a design you can edit, open File, then Accessibility, then Check design accessibility. Canva flags issues such as colour contrast and helps with alt text, headings and reading order; Canva says it is not a guarantee of accessibility.

Which contrast ratio does WCAG require?

At level AA: 4.5:1 for normal text, 3:1 for large text (about 24 px, or 18.5 px bold) and 3:1 for icons, input borders and other user interface components and graphics that carry meaning.

Can Pandus check my Figma or Canva file?

No. Pandus checks web pages once they are live or on a staging site. For design files use the built-in tools, our contrast checker for single pairs and the palette checker for all brand colours.

Sources

  • Figma Help Center, Apply paints with the color picker (accessibility view): https://help.figma.com/hc/en-us/articles/360041003774-Apply-paints-with-the-color-picker
  • Figma, Color Contrast Checker: https://www.figma.com/color-contrast-checker/
  • Canva Help Center, Using design accessibility: https://www.canva.com/help/using-design-accessibility/
  • W3C, Understanding WCAG 2.2 — 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
  • W3C, Understanding WCAG 2.2 — 1.4.11 Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html