Meeting WCAG text guidelines in Figma

Ask the community
1

WCAG guidelines say:

Line height (line spacing) to at least 1.5 times the font size;
Spacing following paragraphs to at least 2 times the font size;
Letter spacing (tracking) to at least 0.12 times the font size;
Word spacing to at least 0.16 times the font size.

So for line height, I can enter 150% in Figma.
Paragraph spacing I can say font size*2 (i.e. 32 for size 16 text)
Letter spacing I would put 12%?
Word spacing isn’t possible to control in Figma?

2

The guideline you’re referring to doesn’t require you to follow these standards in your design. Rather, when deployed in production, the web site/app allows for a user to be able to configure your content to these guidelines without loss of content or functionality. For more detail, read the “Author Responsibility” question here: Understanding Success Criterion 1.4.12: Text Spacing

That said, tactically to answer your questions, in Figma:

Letter spacing would be 12%
You cannot adjust word spacing easily (easiest workaround is to set letter spacing to 16% to cover both letters and words)

I’m not sure why you’d want to do this though except to simulate how your design would adjust to meet these guidelines. And even then, it’s sort of a waste of time if your developers don’t actually implement said design in code.

Hope that was helpful!

2 Likes