Content must survive increased text spacing

Rule text-spacing · Deeper checks · impact moderate · Live only (static → incomplete)

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Users with dyslexia and low vision override text spacing for readability. Containers with fixed heights and clipped overflow can cut text off when spacing increases. Confirming this needs to apply the spacing and re-measure, so it runs live.

How to fix#

Let containers holding text grow: replace a fixed height with min-height (or none), drop overflow: hidden on text containers, and size buttons, labels and cards from their content with padding. Do not lock line-height, letter-spacing or word-spacing with !important, which blocks the user’s override. Single-line truncation (white-space: nowrap with text-overflow: ellipsis) clips too — let the text wrap.

Example#

<div style="height:20px;overflow:hidden;line-height:20px">Two lines of text here</div>

<div style="min-height:20px;line-height:1.5">Two lines of text here</div>

WCAG success criteria#

1.4.12 Text Spacing — Level AA#

Content must survive user-applied increases to line height, paragraph, letter, and word spacing without clipping.

Understanding 1.4.12

Standards#

This rule contributes to the following standards:

WCAG AA EN 301 549

References#

• WCAG — Text Spacing