WCAG 1.4.12 Text Spacing

Success criterion 1.4.12 helps people with dyslexia, low vision and other reading difficulties who use browser extensions or their own styles to space text out. Wider spacing makes text easier to read, but only if the page does not break. It was added in WCAG 2.1, is level AA and part of EN 301 549 (clause 9.1.4.12).

What the criterion requires

In content built with markup languages that support these properties (HTML and CSS do), there must be no loss of content or functionality when the user sets all of the following, and changes no other style property:

• line height to at least 1.5 times the font size;
• spacing after paragraphs to at least 2 times the font size;
• letter spacing to at least 0.12 times the font size;
• word spacing to at least 0.16 times the font size.

Your design does not have to use these values. The requirement is that a user can override them without text being cut off, overlapping or hidden.

Exception: languages and scripts that do not use one of these properties only need to support the ones that exist for them.

Typical failures on an online shop

• "Add to cart" and other buttons with a fixed height and overflow: hidden, so the label is clipped;
• product cards with a fixed height, so the product name or price disappears;
• navigation tabs and filter chips whose text overlaps the next item;
• badges such as "−20 %" or "New" positioned absolutely over the image, so wider text covers the price;
• inline style attributes with !important spacing that block the user's override.

How to check it

Automated: our checker flags inline styles that set letter, word or line spacing with !important, which prevents users from overriding them (rule avoid inline spacing). Whether text is cut off after the change can only be seen, so it needs a manual check too.

By hand: apply a text spacing bookmarklet or user stylesheet with exactly these values: line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; and margin-bottom: 2em for paragraphs. Then go through the main pages and look for clipped text, overlaps and controls you can no longer use.

How to fix it

• Avoid fixed heights on elements that contain text; use min-height and padding instead.
• Avoid overflow: hidden on text containers, or allow them to grow.
• Let labels, tabs and chips wrap onto the next line.
• Do not set spacing with !important in inline styles.

Related criteria

• 1.4.4 Resize Text — text at 200 % zoom.
• 1.4.10 Reflow — no horizontal scrolling at 320 px.
• Free check of one page — find inline spacing problems.

Frequently asked questions

Does my site have to use 1.5 line height?

No. WCAG does not require these spacing values in your design. It requires that nothing is lost when a user overrides your spacing with them.

How do I test WCAG 1.4.12?

Apply a text spacing bookmarklet or user stylesheet that sets line-height 1.5, paragraph spacing 2em, letter-spacing 0.12em and word-spacing 0.16em, then look for clipped, overlapping or hidden text and broken controls.

What is the most common cause of failures?

Containers with a fixed height or overflow: hidden — buttons, tabs, badges and cards — that cut off the text once it needs more room.