1.4.12 Text Spacing

WCAG 2.2 · 1.4.12 AA Perceivable

What it requires

No loss of content or functionality may occur when a user overrides text-spacing properties, with no change to any other style. For content implemented with markup languages that support these style properties, the page must stay fully readable and operable when the reader sets all of the following:

  • Line height (line spacing) to at least 1.5× the font size.
  • Spacing after paragraphs to at least 2× the font size.
  • Letter spacing (tracking) to at least 0.12× the font size.
  • Word spacing to at least 0.16× the font size.

The criterion only requires that these specific values be supportable — it does not require the author to ship them. Text in a writing system that does not use one of these properties is exempt from that property.

  • Low-vision readers who increase spacing to track lines and separate words.
  • People with dyslexia and other reading or cognitive disabilities, for whom wider spacing reduces letters and words crowding together.
  • Anyone using a user stylesheet, bookmarklet, or browser extension that adjusts spacing for comfortable reading.

When the criterion fails, increased spacing causes clipped, overlapping, or truncated text, content that disappears behind fixed-height containers, or controls that can no longer be read or activated.

How to detect it

Checking text spacing
Check How
Apply the spacing Use the WCAG Text Spacing bookmarklet (or a user stylesheet) to set line height 1.5, paragraph 2×, letter 0.12em, word 0.16em.
Look for loss Manually scan for clipped, overlapping, or cut-off text and any control that becomes unreadable or unusable.
Zoom & reflow Combine with 200%–400% zoom to surface fixed-height boxes and overflow that hides content.
Automated tools Largely manual — axe and similar tools cannot reliably detect spacing-induced clipping, so human review is required.

How to fix it

  1. Avoid fixed height on containers that hold text; use min-height so boxes grow.
  2. Let overflow be visible or scrollable rather than clipped (avoid overflow: hidden on text regions).
  3. Set spacing properties in relative units (em, unitless line-height) and never with !important, so user overrides win.
  4. Re-test buttons, badges, and nav items, which fail most often due to tight fixed sizing.
.card {
  min-height: 4rem;       /* grows with spacing, not fixed */
  line-height: 1.5;       /* unitless, user can raise it */
  overflow: visible;      /* text never clipped */
}

Copy-paste tests

Automated coverage

The axe-core rule avoid-inline-spacing flags failures of this criterion, firing when inline style sets letter, word, or line spacing with !important so a user override can't win. Run it via the axe DevTools browser extension or axe-core in CI. Automated tools only catch some failures — spacing-induced clipping and overlap still need human review.

Run this in the browser console

text-spacing-audit.js 
// Read-only: surface elements that may block text-spacing overrides.
const suspects = [...document.querySelectorAll('*')].filter(el => {
  const s = getComputedStyle(el);
  const hasText = el.textContent.trim().length > 0;
  const fixedH = s.height !== 'auto' && el.scrollHeight > el.clientHeight + 1;
  const clipped = s.overflow === 'hidden' || s.overflowY === 'hidden';
  return hasText && (fixedH || clipped);
});
console.log('Possible text-spacing risks:', suspects.length);
console.table(suspects.slice(0, 50).map(el => ({
  tag: el.tagName, class: el.className, overflow: getComputedStyle(el).overflow
})));
suspects.forEach(el => { el.style.outline = '2px solid magenta'; });

What to check manually: after applying the WCAG text-spacing values, confirm no buttons, badges, or nav labels clip or overlap, and that every region stays fully readable and operable — no script can judge whether content is actually lost.