WCAG 2.2 - Success Criterion
1.4.12 Text Spacing
Description
No loss of content or functionality must occur when users apply the following text spacing overrides: line height set to at least 1.5 times the font size, letter spacing set to at least 0.12 times the font size, word spacing set to at least 0.16 times the font size, and spacing following paragraphs set to at least 2 times the font size. Users with dyslexia, low vision, or cognitive disabilities commonly apply custom text spacing through user stylesheets or browser extensions to improve readability, and content must not break under these adjustments.
How To Test
- Install or create a bookmarklet that overrides text spacing to the WCAG 1.4.12 test values:
line-height: 1.5em,letter-spacing: 0.12em,word-spacing: 0.16em, and paragraph spacing:2em. - Activate the bookmarklet on the page being tested.
- Scroll through all content and verify no text is clipped, hidden, or overlapping.
- Test interactive components: menus, modals, tooltips, dropdowns, and accordions.
- Verify all form labels, button text, and link text remain fully visible.
- Inspect the DOM for containers using fixed heights with
overflow: hiddenthat may clip expanded text. - Return text spacing to default and confirm the before/after comparison shows no loss of content.
Testing Tools
- Color Contrast Analyser (CCA) — Free desktop app. Download from GitHub, install, use the eyedropper tool to measure contrast ratios on the demo. Read the ratio value and compare to AA (4.5:1) or AAA (7:1) standards.
- Lighthouse — Built into Chrome DevTools. Open DevTools (F12), go to Lighthouse tab, select "Accessibility", and run the audit. Review contrast violations and pass criteria in the results.
- axe DevTools — Browser extension for Chrome/Firefox. Install from official page, open DevTools, go to axe tab, run scan, and see detailed contrast violations with remediation advice.
Demo
WCAG 1.4.12 text-spacing overrides are simulated below (line-height: 1.5; letter-spacing: 0.12em; word-spacing: 0.16em). The fixed-height container clips the content.
Text is clipped - height: 80px; overflow: hidden
Same text-spacing overrides applied to a flexible container. The container expands to fit - no content is lost.
User-controlled text spacing can increase the space between lines, letters, and words. Content in flexible containers expands naturally when these overrides are applied.
All text visible - min-height: 80px; overflow: visible
Code
A tooltip uses a fixed width and height with overflow: hidden. When users apply WCAG 1.4.12 text spacing overrides, the tooltip content is clipped and becomes unreadable.
Tooltip content clipped - width: 120px; overflow: hidden
The same tooltip uses white-space: normal and no fixed width constraint. Content expands naturally when users apply text spacing overrides.
All content visible - white-space: normal; overflow: visible; max-width: 200px
Code
Navigation uses fixed-width items with white-space: nowrap. When text spacing is applied, menu items overlap and text becomes unreadable.
Menu items clip and overlap - white-space: nowrap; width: 100px; overflow: hidden
Navigation uses flexible widths and allows wrapping. When text spacing is applied, menu items expand and remain fully readable.
All menu items visible - white-space: normal; flex-wrap: wrap
Code
Fail Explanation
A failure occurs when applying the specified text spacing values causes content to become hidden, truncated, or to overlap in a way that makes it unreadable. Common failure patterns include fixed-height containers that clip text when line height increases, text in tooltips or modal dialogs that overflows its container when letter spacing is increased, navigation menu items that overlap when word spacing is expanded, and truncation of text within table cells or card components. Using CSS overflow: hidden on containers with fixed heights combined with pixel-based font sizes is a frequent cause of failure.
Pass Explanation
A passing implementation ensures that the content remains fully readable and functional when any combination of the four text spacing properties is applied at their specified maximum values. This is achieved by using flexible container heights (with min-height rather than height), using relative units for sizing, and avoiding overflow: hidden on text containers. Layouts should be tested with a bookmarklet or browser extension that applies the maximum text spacing values simultaneously.
Notes
This criterion tests resilience to user overrides, not the default text spacing of the page itself. The WCAG Understanding document provides a test bookmarklet that applies all four spacing values simultaneously. Authors should note that this criterion was added in WCAG 2.1 and is commonly overlooked in design systems where card and tooltip heights are defined in pixels.
Techniques
WCAG techniques used in this demo: C35, C36, C37
Suggested Solutions & References
Curated from 3 real-world audit findings and official WCAG guidance.