1.4.12 Text Spacing

What does it mean?

Some people, for example many with dyslexia, read better with more space between lines, words and letters. They apply their own styles with browser extensions. Your page must not break when they set: line height to 1.5 times the font size, spacing after paragraphs to 2 times the font size, letter spacing to 0.12 times and word spacing to 0.16 times the font size.

You do not have to use these values in your design. You only have to make sure nothing gets cut off, overlaps or disappears when users apply them. Scripts that cannot show text in this way, and human languages that do not use one of these properties, are exempt for that property only.

Who does it help?

• People with dyslexia
• People with low vision
• People with cognitive disabilities

Common failures

• Buttons or labels with fixed heights that cut off text when line height increases
• Text in boxes with overflow: hidden that disappears when spacing grows
• Navigation items that overlap when letter spacing increases

How we test it

• evidence Evidence: our scanner collects material such as screenshots, lists and measurements.

Test question: With increased line, paragraph, letter and word spacing, is any text cut off or overlapping?

A person decides every criterion. No criterion ever passes automatically.

How to fix it

.btn { height: 40px; overflow: hidden; white-space: nowrap; width: 120px; }

.btn { min-height: 2.75rem; padding: 0.5rem 1rem; }

/* Test styles a user might apply */
* { line-height: 1.5 !important; letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important; }
p { margin-bottom: 2em !important; }

Flexible sizing lets the button grow with its text; the test block applies the four spacing values for checking.

Practical tips

• Paste the test styles into the browser developer tools and look for clipped or overlapping text.

Official source

Understanding WCAG 2.2 at the W3C: 1.4.12 Text Spacing