WCAG 1.4.12 Text Spacing Explained

WCAG 1.4.12 Text Spacing is a Level AA rule that requires your page to keep working when a reader widens the space between lines, letters, words, and paragraphs. You don’t ship that spacing — but if someone forces it on, nothing may be clipped, hidden, or overlapped.

What WCAG 1.4.12 actually requires

The official W3C wording says that in content built with markup that supports text-style properties, “no loss of content or functionality occurs” when a user sets all of the following — and changes nothing else:

The key word is survives. This is a robustness test, not a styling mandate. Your default typography can stay exactly the way your designer made it. The question 1.4.12 asks is: if a reader overrides spacing to these values, does your layout still hold?

Why this matters and who it affects

People do override spacing — constantly — because tight type is hard to read. The W3C lists three groups who depend on this:

• Low-vision readers, who enlarge spacing along with font size to track lines without losing their place.
• People with dyslexia, for whom extra letter and word spacing reduces the crowding that makes letters swim or transpose.
• People with some cognitive disabilities, who use wider spacing to visually organize a block of text.

These readers apply spacing through browser extensions, reading-mode tools, or custom stylesheets. When they do, a well-built page reflows gracefully. A fragile page swallows its own content — and the very people the rule protects are the ones who can no longer read it. That makes 1.4.12 part of the Perceivable principle in the POUR framework and a core part of WCAG 2.1 AA.

Concrete failure examples (and the fix)

Almost every 1.4.12 break traces to one thing: a container that can’t grow. The W3C catalogs this as failure F104 — content that clips or overlaps when spacing is adjusted. Here are the patterns we see most.

Fixed-height buttons and cards

A button or card with a locked pixel height looks fine until line height jumps to 1.5×. Then the second line of a label spills past the edge and gets cut off — “Add to cart” becomes “Add to” with the rest sheared away.

/* FAILS 1.4.12 — the text can't grow past 40px */
.btn {
  height: 40px;
  overflow: hidden;
}

/* PASSES — the box grows with its content */
.btn {
  min-height: 40px;        /* keep the look, allow expansion */
  padding-block: 0.5rem;
  height: auto;
}

overflow: hidden clipping a panel

A testimonial box or hero banner set to overflow: hidden silently throws away the extra lines that appear once paragraph and line spacing expand. The text is still in the DOM — the reader just can’t see it.

/* FAILS — clips spaced text */
.panel { height: 120px; overflow: hidden; }

/* PASSES — lets the panel reflow */
.panel { min-height: 120px; height: auto; }

Overlapping text from absolute positioning

When two text blocks are stacked with fixed offsets (common in carousels and image overlays), increased line height pushes the top block down until it collides with the one below, leaving an unreadable jumble. The fix is to let the flow set the spacing instead of pinning elements to exact pixel coordinates.

The unifying rule, straight from the W3C’s C36 technique: don’t set a fixed height on anything that holds text. Use min-height when you need a baseline size, and let the box expand.

How to test WCAG 1.4.12

You can verify this in a few minutes per template — and it’s one of the easier criteria to check, because the test is mechanical.

1. Apply the four values at once. Use the free text-spacing bookmarklet from the W3C, a browser extension, or paste this into your DevTools so it hits everything:

   * {
     line-height: 1.5 !important;
     letter-spacing: 0.12em !important;
     word-spacing: 0.16em !important;
   }
   p { margin-bottom: 2em !important; }

2. Walk every page and state. Check headers, buttons, nav menus, cards, modals, form labels, tables, and especially anything with a fixed height. Open dropdowns and accordions — collapsed components often clip when expanded.

3. Hunt for three symptoms: text cut off at a box edge, text hidden below a fold inside a panel, and text overlapping a neighboring element.

4. Don’t trust automation alone. Scanners can flag overflow: hidden and fixed heights, but they can’t see that a label is now unreadable. This is where human review matters — pair tooling with manual accessibility testing on your real templates.

Why a text-spacing failure shows up in lawsuits

Text spacing is a Level AA criterion, so it sits inside the WCAG 2.1 AA baseline that U.S. courts and the Department of Justice treat as the practical yardstick for an accessible site under ADA Title III. But what makes 1.4.12 distinctly dangerous in a complaint is how easy it is to demonstrate. A plaintiff’s tester doesn’t need a screen reader or a keyboard walkthrough — they run the W3C text-spacing bookmarklet once, and any button label that shears off or panel that swallows its copy becomes a side-by-side screenshot. That before/after image is concrete, reproducible, and hard to argue with, which is exactly the kind of exhibit that turns a demand letter into a settlement.

It also rarely travels alone. Because the same overflow: hidden and fixed-height patterns that trigger F104 often clip text in checkout fields and form-heavy flows, a single brittle CSS habit can block transactions and stack up alongside other failures in the same complaint. And the bar is climbing, not falling: digital-accessibility lawsuits exceeded 4,000 in 2024 per UsableNet’s year-end report, so the surface area for a clipping defect to be noticed keeps growing.

Here is the part that catches site owners off guard — the “increase text spacing” button inside an accessibility overlay widget does not satisfy 1.4.12. The overlay only widens spacing on demand; the criterion is about whether your own layout survives when a reader’s browser extension widens it. If your CSS still pins a fixed height or clips with overflow: hidden, the failure is untouched no matter what the toolbar offers. That is why UsableNet found more than 1,000 businesses were sued despite having an overlay installed — and why we are deliberately anti-overlay and fix the stylesheet instead.

This page is general information, not legal advice. For your specific exposure, consult a qualified attorney.

Fix text spacing in the CSS, not with a script

There is no bolt-on toggle that makes a fixed-height layout robust — 1.4.12 is settled in your stylesheet or not at all. Our team works through every page with the four-value override applied, finds each fixed height, each overflow: hidden container, and each absolutely positioned text block that F104 flags, then swaps them for min-height and natural flow so the box grows with its content. Because the change lives in CSS and the C36 min-height technique, the spacing your customers see by default never changes — the page simply stops breaking when a low-vision or dyslexic reader needs room to read.

If you’d rather not run the bookmarklet across every template by hand, start with a free scan and we’ll show you exactly where text clips — then remediate it for you and document the result in a full audit.