The Text Spacing success criterion exists because many users with low vision or dyslexia override a site’s spacing with their own stylesheet or browser extension to make text readable. If your layout assumes the spacing you shipped, that override can clip or overlap text and break the page. This tool applies the exact WCAG 1.4.12 maximums so you can see whether your markup survives.
How it works
WCAG Success Criterion 1.4.12 defines four spacing minimums that a user must be able to apply with no loss of content or functionality:
- Line height at least
1.5times the font size - Spacing below paragraphs at least
2times the font size - Letter spacing at least
0.12em - Word spacing at least
0.16em
When you enable the override, the tool wraps your pasted HTML in a container and applies precisely those values with !important, mirroring what the official test bookmarklet does. You then compare the rendered result against the unmodified version side by side. If text in the “after” pane is truncated, hidden behind another element, or escapes a fixed box, your CSS hard-codes a constraint that violates the criterion.
Example
A button styled with a fixed height: 32px and overflow: hidden looks fine normally. Apply the overrides and the larger line height pushes the label below the visible area, so the button text disappears. The fix is to replace the fixed height with min-height and vertical padding so the control grows with its content.
Tips and notes
- Test the smallest, most tightly packed components first (buttons, badges, table cells, nav items) — they fail most often.
- Replace
heightwithmin-heightand avoid single-lineoverflow: hiddentruncation on essential text. - The criterion only requires the layout to survive the overrides, not to look identical. Some reflow is expected and acceptable.
- All rendering is local to your browser; nothing you paste is transmitted.