1.4.12 Text Spacing

Level: AA | Principle: Perceivable | Since: WCAG 2.1 | Automation: Manual

What This Means

Content must remain readable and functional when users apply the following text spacing overrides simultaneously:

Line height (line spacing) to at least 1.5 times the font size
Paragraph spacing 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

Users with dyslexia or low vision often need increased spacing to read comfortably. The page must not clip, overlap, or lose content when these adjustments are made.

Who This Affects

Users with dyslexia — increased spacing significantly improves readability
Users with low vision — need extra spacing to distinguish letters and words
Users with cognitive disabilities — tighter text is harder to process

Common Pitfalls

1. Fixed-height containers that clip text

/* Bad: text gets clipped when spacing increases */
.card {
  height: 200px;
  overflow: hidden;
}

/* Good: let the container grow */
.card {
  min-height: 200px;
}

2. Text overflow hidden on single-line elements

/* Bad: text gets cut off */
.label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100px;
}

When text spacing is increased, the truncated content becomes even more hidden. Allow wrapping or use a container that can expand.

3. Inline styles that override user spacing

<!-- Bad: inline styles prevent user overrides -->
<p style="line-height: 1.0; letter-spacing: 0;">Dense text</p>

<!-- Good: use classes and allow override -->
<p class="body-text">Readable text</p>

How to Fix

Use flexible containers and relative units

/* Good: container adapts to content */
.card {
  min-height: 100px;
  padding: 1rem;
  overflow: visible;
}

/* Good: text styles that tolerate spacing overrides */
.body-text {
  line-height: 1.5;
  max-width: 70ch;
}

Avoid clipping mechanisms on text containers

/* Good: allow natural flow */
.content {
  overflow: visible;
  /* or use overflow: auto to add scrollbars instead of clipping */
}

How to Test

Open DevTools (F12), go to Console, and paste: document.querySelectorAll('*').forEach(el => { el.style.lineHeight='1.5em'; el.style.letterSpacing='0.12em'; el.style.wordSpacing='0.16em'; }); document.querySelectorAll('p').forEach(el => { el.style.marginBottom='2em'; });
Scroll through every section of the page looking for clipped, overlapping, or hidden text.
Check that all buttons, links, and form controls remain fully visible and clickable.
Verify no content disappears behind fixed-height containers.
Pass: All content remains readable and functional with spacing overrides applied.
Fail: Any text is clipped, overlaps other elements, or controls become unusable.