WCAG 1.4.12 — Text Spacing

Text Spacing Issues

What is this issue?

Text spacing issues occur when content breaks, overlaps, or becomes unreadable after users apply increased spacing to improve readability. WCAG Success Criterion 1.4.12 (Level AA) requires that no loss of content or functionality occurs when users override the following text spacing properties: line height to at least 1.5 times the font size, paragraph spacing to at least 2 times the font size, letter spacing to at least 0.12 times the font size, and word spacing to at least 0.16 times the font size.

Many users with dyslexia, low vision, or cognitive disabilities use browser extensions or custom CSS to increase text spacing, making text easier to track and read. When a site's CSS uses fixed-height containers, absolute positioning, or overflow: hidden on text blocks, the increased spacing causes text to overflow, overlap with other elements, or disappear entirely.

The root cause is typically rigid layout assumptions. Developers set exact heights on containers that hold text, use CSS that clips overflowing content, or position text with absolute coordinates that do not adjust when the text expands. Any layout that cannot accommodate increased text spacing will fail this criterion.

Impact on users

Users with dyslexia often need increased letter and word spacing to prevent letters from visually merging together. Without this accommodation, reading becomes extremely slow and error-prone. An estimated 5-10% of the population has some degree of dyslexia, making this a high-prevalence issue.

Users with low vision may increase line height and paragraph spacing to keep their place while reading with magnification. If the site clips overflowing text, these users lose content -- and they may not even realize it is missing, leading to misunderstandings.

Cognitive accessibility research consistently shows that increased text spacing improves reading speed and comprehension for a wide range of users, not just those with diagnosed disabilities. Sites that support text spacing adjustments provide a better experience for everyone.

Code example

Before (non-compliant)

/* Fixed heights clip expanded text */
.card-body {
  height: 120px;
  overflow: hidden;
}
.nav-item {
  height: 40px;
  line-height: 40px;
  overflow: hidden;
}
.tooltip {
  max-height: 80px;
  overflow: hidden;
  white-space: nowrap;
}

After (compliant)

/* Flexible containers accommodate spacing */
.card-body {
  min-height: 120px;
  overflow: visible;
}
.nav-item {
  min-height: 40px;
  padding: 8px 16px;
  /* No fixed line-height or overflow:hidden */
}
.tooltip {
  min-height: 80px;
  overflow: auto;
  white-space: normal;
}

How Scrutia detects this issue

Scrutia injects the WCAG 1.4.12 text spacing overrides (line-height: 1.5, letter-spacing: 0.12em, word-spacing: 0.16em, paragraph margin-bottom: 2em) into every page and then checks for text overflow, clipping, and overlap. It flags elements where content is lost or where text overlaps with adjacent elements after the spacing is applied.

Check your site for this issue

Scrutia audits your site against WCAG criteria in minutes.

Free audit

Frequently Asked Questions

What are the exact spacing values required by WCAG 1.4.12?

Line height at least 1.5 times the font size, paragraph spacing at least 2 times the font size, letter spacing at least 0.12 times the font size, and word spacing at least 0.16 times the font size. Content must remain functional at all of these settings simultaneously.

Do I need to apply these spacing values by default?

No. The requirement is that your layout does not break when users apply these values. Your default spacing can be tighter, as long as the layout adapts gracefully when users override it.

How can I test text spacing on my site?

Use a browser bookmarklet or extension that applies the WCAG 1.4.12 overrides. The Text Spacing Bookmarklet by Steve Faulkner is a popular tool. Scrutia automates this test across all your pages.

Which CSS properties most often cause text spacing failures?

Fixed height with overflow: hidden is the most common culprit. Fixed line-height values, white-space: nowrap on multi-word content, and absolute positioning of text elements are also frequent causes.

Does your site have this issue?

Scrutia scans your pages against WCAG success criteria and delivers actionable fixes. Results in 5 minutes.

Run a free audit