What the Text Spacing Test Actually Checks

WCAG success criterion 1.4.12 is part of the Web Content Accessibility Guidelines at Level AA. It says a reader must be able to override four text properties without losing content or function: line height to at least 1.5, letter spacing to at least 0.12em, word spacing to at least 0.16em, and spacing after paragraphs to at least twice the font size. The official wording is published by the W3C Understanding document , which explains the intent and the accepted testing method.

The values in the criterion are minimums. A reader is not expected to stop at exactly 1.5 or 0.12em; they may go further. The test asks whether the page survives the floor values, because a layout that breaks at the floor will break at anything above it. This tool applies exactly those floor values and measures what happens.

Why Spacing Flexibility Matters

Spacing is not decoration for the people who need it. Readers with dyslexia frequently increase letter and word spacing to stop letters crowding into each other. Readers with low vision raise line height so lines do not blur together as they track across the page. For those readers, the spacing overrides are the difference between a readable page and one they have to abandon.

The failure is rarely the paragraph text. Paragraphs wrap by default, so extra spacing pushes words to the next line and the layout grows. The failure is in the fixed parts: a button set to white-space: nowrap, a card with a hard-coded height, a table with a fixed layout, a label squeezed beside its value. Those elements cannot grow, so the text overflows, clips, or overlaps when the spacing increases.

How to Use This Checker

1. Paste the HTML you want to test, or use the plain text tab for a quick paragraph check. The sample button loads a snippet that includes a paragraph, a heading, and a nowrap button so you can see a passing and a failing element side by side.
2. Set the container width to the narrowest width your layout ships at. A phone breakpoint around 320 to 360px is where spacing failures show up first, because the horizontal room is smallest there.
3. Confirm the four overrides are on. Each switch maps to one part of the criterion, so you can test them individually if you want to isolate which property breaks a layout.
4. Read the verdict. Green means no overflow at that width. Amber lists every flagged element with its tag and the first part of its text, so you know exactly where to look.

What the Results Mean

A green result is good news, but it is scoped to the width you chose and the markup you pasted. Change the width and the result can change with it, which is exactly why the width control exists. Test the widest content container and the narrowest phone column, then test the special cases: tables, tooltips, buttons, anything with a fixed size.

An amber result is a specific list, not a vague warning. Each flagged element shows whether it overflows horizontally or vertically, the tag that contains it, and the text inside it. That combination points at the fix: let the element grow, remove the nowrap, break the label onto its own line, or switch the table to auto layout.

Common Fixes for Failing Elements

Buttons and chips with nowrap

Drop white-space: nowrap and let the label wrap to two lines, or shorten the label. A button that wraps is still usable; a button that clips its label is not.

Fixed-height cards

Remove the height and use padding instead. Cards grow with their content, so extra line height pushes the card taller instead of clipping the text.

Tables with fixed layout

Switch to automatic layout, or let the table scroll horizontally inside its container. Fixed columns have no room to absorb the extra spacing.

Labels beside values

Stack the label above the value instead of placing it inline. Side-by-side rows have a fixed horizontal budget that ignores the reader's spacing needs.

Where This Fits in an Accessibility Review

Text spacing is one of several WCAG checks that a static site can run without a backend. The contrast checker covers the color side of readability, and the font inspector shows the weight and spacing properties of a live page. The accessibility guide collects the full checklist, and the type scale calculator helps you pick sizes that leave room for the spacing overrides from the start.

The practical order is: fix contrast first, because text that fails color contrast fails regardless of spacing. Then run the text spacing test at your real breakpoints. Then check keyboard access and focus. Each check is fast, and together they cover the most common reasons a page fails an accessibility audit.

Testing Templates Instead of Every Page

Most sites render content from a small set of templates, and the text spacing test only needs to run once per template. An article template, a product card, a pricing table, a dashboard row, and a header nav are usually the whole surface area. Fix the template, and every page built from it passes automatically. Keep a list of the templates you tested and the width you used, so a reviewer can see the coverage instead of re-testing everything by hand.

The exception is content that authors write directly: a marketing page with bespoke sections, an email template, or a long-form article with custom pull quotes. Those get one paste each. A reasonable target is the ten most-trafficked templates plus any page that pairs text with fixed-width imagery, because captions and overlay labels are where spacing failures hide.

FAQ

What exactly does WCAG 1.4.12 test?

It tests whether content still fits and works when a reader applies their own text spacing. The four overrides are line height at 1.5, letter spacing at 0.12em, word spacing at 0.16em, and spacing after paragraphs at 2 times the font size. If text overflows, clips, or overlaps after those changes, the page fails the criterion at Level AA.

Why does text spacing matter for accessibility?

Some readers enlarge spacing on purpose: people with dyslexia often widen letter and word spacing, and low-vision readers raise line height to track lines more easily. When a layout hard-codes widths or sets nowrap on labels, those readers cannot apply the spacing they need without breaking the page.

How do the 1.4.12 values map to CSS?

Line height becomes line-height: 1.5. Letter spacing becomes letter-spacing: 0.12em. Word spacing becomes word-spacing: 0.16em. Paragraph gap becomes margin-bottom: 2em on paragraphs (or double the current value). The values are minimums, not targets; the test is about what happens when a reader exceeds the authored spacing.

Do I need to test every page on the site?

Start with the templates that repeat: article pages, product cards, tables, and anything with fixed-width labels or buttons. One passing template covers the pages built from it. Then spot-check the unusual layouts, because a table or a tooltip can fail even when the rest of the site passes.

Is this tool the same as an automated accessibility audit?

No. It checks one thing, overflow under the four spacing overrides, at the width you choose. A full audit also checks contrast, keyboard access, focus order, and the other WCAG criteria. Use this tool for the spacing check and the contrast checker for color, then review the rest manually.

What usually fails the text spacing test?

Buttons and chips with white-space: nowrap, fixed-width cards, tables with fixed layout, inline labels next to values, and single-line truncation with text-overflow: ellipsis. Paragraphs and headings almost always survive, because they wrap by default.