Level AA

Users with dyslexia, low vision, and other cognitive and learning disabilities apply browser extensions and user stylesheets that override line height, paragraph spacing, letter spacing, and word spacing -- layouts built around fixed-height containers and overflow: hidden clip the enlarged text and break the page.

1.4.12 Text Spacing

In Plain Language

1.4.12 Text Spacing (Level AA, new in WCAG 2.1) requires that no content or functionality is lost when a user overrides text spacing to the following minimums: line-height at 1.5 times the font size, spacing following paragraphs at 2 times the font size, letter-spacing at 0.12 times the font size, and word-spacing at 0.16 times the font size[1]. All four values must be tolerated at once.

Why It Matters

  • Users with cognitive and learning disabilities (dyslexia in particular) and users with low vision install browser extensions or user stylesheets that apply the 1.4.12 spacing tokens. If the layout cannot absorb the taller line boxes and wider tracking, the text they rely on is the text that breaks.
  • Fixed-height text containers (height: 60px) plus overflow: hidden clip the enlarged content -- sentences end mid-word, buttons lose their labels, modal copy disappears below the fold of a capped panel.
  • Pixel-locked line-height (line-height: 20px) refuses to grow when the user raises the ratio to 1.5, so descenders collide with the next line and letters with tracking applied overlap the container edge.
  • 1.4.12 is distinct from 1.4.8 Visual Presentation (Level AAA), which asks authors to ship those spacing defaults. 1.4.12 is the Level AA version: authors do not have to apply the spacing, but they must not break when the user applies it[2].

Examples

Do: Flexible container that adapts to spacing overrides

This card uses flexible sizing. The container grows as text spacing increases.

No content is clipped or hidden.

✔ Container uses min-height, not fixed height -- text reflows naturally

/* Good: container grows with content, line-height is unit-less */
.card {
  padding: 1rem;
  min-height: 0;       /* no fixed height */
  overflow: visible;   /* never clip text */
}

/* These overrides must not break the layout: */
p {
  line-height: 1.5;         /* 1.5x font size, unit-less */
  letter-spacing: 0.12em;   /* 0.12x font size */
  word-spacing: 0.16em;     /* 0.16x font size */
}
p + p {
  margin-top: 2em;          /* 2x font size */
}
Don't: Fixed-height container that clips text

This card has a fixed height of 60px and overflow hidden. When spacing increases, the text is clipped and users cannot read it.

✘ Fixed height + overflow: hidden clips text when spacing is overridden

Do: Button text that wraps gracefully

✔ Button uses white-space: normal -- text wraps if needed at wider spacing

Don't: Button with nowrap that overflows

✘ white-space: nowrap in a constrained container -- text is cut off

How to Fix It

  1. Replace fixed heights with min-height. Any container that holds user-facing text should be free to grow vertically. Pair this with overflow: visible on text containers -- overflow: hidden on a text block is almost always a 1.4.12 failure waiting for a user stylesheet.
  2. Use unit-less line-height. Write line-height: 1.5, not line-height: 24px. Unit-less values inherit as a multiplier and scale with any font-size the user applies; pixel values stay locked and collide with taller glyph boxes.
  3. Test with the W3C spacing overrides. Paste a stylesheet that sets line-height: 1.5, letter-spacing: 0.12em, word-spacing: 0.16em, and paragraph margin-bottom: 2em into your browser's user CSS (or a bookmarklet) and walk the page. If anything clips, overlaps, or disappears, that is the failure[1].
  4. Let text wrap. Avoid white-space: nowrap on buttons, tabs, and menu items that carry real words. If a label has to stay on one line, give the container enough room to absorb the wider letter-spacing and word-spacing.
  5. Verify interactive controls. Buttons, links, tabs, and form labels must stay fully visible and operable after the overrides. A clipped button label is both a 1.4.12 failure and a 2.5.3 Label in Name risk if screen-reader users hear a name the sighted user cannot read.

References

  1. [1] W3C (2023). Understanding Success Criterion 1.4.12: Text Spacing. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html ↩ ↩
  2. [2] W3C (2023). Understanding Success Criterion 1.4.8: Visual Presentation. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html ↩