Text spacing ensures that users can adjust the space between lines, words, and letters to read content comfortably. Many users rely on increased spacing to track lines, distinguish words, and maintain reading flow. This success criterion does not require authors to choose specific spacing values. Instead, it requires that the content continues to work when users apply their own spacing preferences.
When text spacing is locked, either by forced CSS rules or by layouts that break when spacing increases, users lose control over how text is displayed. This creates a significant barrier for people who rely on custom stylesheets or browser tools.
WCAG Success Criterion
1.4.12 Text Spacing (Level AA)
Content must remain readable and usable when users apply the following spacing values:
- line-height of at least 1.5
- space following paragraphs of at least 2 × font size
- letter-spacing of at least 0.12em
- word-spacing of at least 0.16em
No loss of information or functionality is allowed when these values are applied.
Who This Helps
This criterion primarily supports users who:
- Have cognitive or learning disabilities
- Have dyslexia or reading disorders
- Have low vision
- Use screen magnifiers or browser zoom
- Use custom stylesheets or text-spacing tools
Tightly spaced text can make it difficult to locate the next line, identify word boundaries, or maintain reading focus over longer passages.
What User Overrides Mean
User overrides are CSS rules applied by the user, not the author. These may come from:
- Browser extensions
- User stylesheets
- Accessibility tools
- Built-in browser features that modify spacing
WCAG requires that author styles do not prevent these user rules from taking effect.
Important clarification
Inline styles are not inherently a failure.
Text spacing fails this criterion only when:
- Spacing rules are forced using
!important, or - The layout breaks when spacing is increased (overlap, clipping, hidden content)
What Adjustable Text Spacing Requires
Content passes this criterion when:
- Users can apply increased spacing via custom CSS
- Text does not overlap, clip, or disappear
- Controls remain operable
- Reading order and meaning are preserved
Authors do not need to set WCAG spacing values themselves.
They must simply allow users to apply them successfully.
Correct Markup Patterns (Pass)
These examples pass because spacing values remain overrideable and the layout remains stable.
<p style="font-size: 200%;">
I stepped on a Corn Flake, now I'm a Cereal Killer...
</p>
<p style="line-height: 1.5;">
On a scale from one to ten, what is your favorite color of the alphabet?
</p>
<p style="letter-spacing: 0.12em;">
The quick brown fox jumped over the lazy dog
</p>
<p style="word-spacing: 0.16em;">
A group of 24 caterpillars has 694 legs
</p>
<p style="word-spacing: 0.16em; letter-spacing: 0.12em; line-height: 2;">
Look, a distraction!
</p>These pass because user CSS can still override spacing, and the layout does not collapse.
Incorrect Markup Patterns (Fail)
These examples fail because they block user control.
<p style="line-height: 1.5 !important;">
Banana error
</p>
<p style="letter-spacing: 0.5em !important;">
We need more cheese!!!
</p>
<p style="word-spacing: -0.4ch !important;">
The cheese grater is in the way!
</p>
<p style="word-spacing: 200%; letter-spacing: 0.5rem !important; line-height: 3;">
Yo, Darth Vader
</p>These fail because !important prevents users from applying their own spacing rules.
Common Real-World Failures
Most failures of 1.4.12 are not caused by inline styles alone.
Common causes include:
- Fixed-height containers containing text
- overflow: hidden on text blocks
- Absolutely positioned text elements
- Grid or flex layouts that collapse at increased spacing
- Line-height is defined in pixels instead of relative units
These patterns cause text to overlap, clip, or disappear when spacing is increased.
Why This Matters
Many users rely on increased spacing to read comfortably. When spacing cannot be adjusted, users may:
- Lose their place while reading
- Miss content entirely
- Be unable to complete tasks involving text
- Abandon the content altogether
Readable text depends on flexibility, not tightly controlled design.
Rule Description
Text spacing must remain adjustable by the user. Content must not block user-applied spacing changes, and increased spacing must not cause loss of information or functionality.
The Algorithm
- Apply WCAG text spacing values using user CSS
- Observe whether text overlaps, clips, or disappears
- Check that controls and interactive elements remain usable
- Verify that spacing changes can override author styles
- If the content breaks or cannot be adjusted, the criterion fails
Automated tools may detect forced spacing rules, but manual testing is required to evaluate layout behaviour.
Wrapping Up
Text spacing is a user need, not an author preference. Content must remain readable and usable when users increase spacing to meet their reading requirements. If increasing spacing causes text to break, disappear, or become unusable, the design fails this criterion, regardless of how clean the CSS appears.
