WCAG text spacing (1.4.12)

Four numbers to remember

Each value is a multiple of the font size. The table shows what that means for body text set at 16 CSS pixels.

These are minimums the page must tolerate, not targets. A user may choose any of them, all of them, or bigger values; the rule tests the four together at exactly these levels.

What WCAG text spacing does and does not require

The rule is about robustness. People with dyslexia, low vision and some cognitive disabilities often read better with more space between lines, letters and words. They set it with a browser extension, a user stylesheet or a reading tool. The rule makes sure your page does not fall apart when they do.

• Required: with the four values applied, every word remains on screen and legible, and every control still responds.
• Not required: shipping those values, a spacing control on the page, or support for even larger values.
• Scope: content built with markup such as HTML. Text inside images is not affected, which is another reason to avoid images of text.

Who changes their text spacing

Readers with dyslexia often find crowded letters blur together; extra letter and word spacing helps them separate words. People with low vision use extra line height so their eyes can find the next line. Some people with attention difficulties use paragraph spacing to break text into chunks. Many of them never touch zoom, so text spacing problems can appear on pages that pass every zoom test.

Testing with a text spacing bookmarklet

A bookmarklet is a bookmark that runs a short script on the current page instead of opening a new address. Several accessibility teams publish free text spacing bookmarklets that apply the four WCAG values with the highest priority, so they beat your own CSS.

1. Add the bookmarklet to your bookmarks bar.
2. Load the target page and look it over once.
3. Run the bookmarklet. Text across the page should spread out.
4. Scan every component: navigation, buttons, tabs, badges, cards, form labels, error messages, tooltips, footers.
5. Look for words cut off, words that overlap other words, and text hidden behind other boxes.
6. Open menus, accordions and dialogs, since hidden content is not visible on first load.

If you cannot install a bookmarklet, apply the same values in the browser developer tools on the body element. They are shown in the code section below.

What usually breaks

Write CSS that survives the override

These are the test values as plain CSS. A bookmarklet applies the same values but forces them over every other rule.

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

.btn { height: 40px; overflow: hidden; }

.btn { min-height: 2.5rem; padding: 0.5rem 1rem; }

Languages the rule treats differently

Not every writing system uses all four properties. Some scripts, for example, do not use letter spacing in the same way as English. WCAG allows content in those languages to meet the rule using only the properties that exist for that language and script. For English and most Latin based languages, all four apply.

Connected criteria

Text spacing sits beside 1.4.4 Resize text and 1.4.10 Reflow: all three test whether your layout can flex. At AAA, 1.4.8 Visual presentation goes further: for blocks of text there must be a way to get line spacing of at least 1.5 within paragraphs, among other reading settings. W3C explains the details in Understanding Text Spacing. Keep it on your WCAG checklist for every component, since one rigid button style can fail across a whole site.