Perceivable · 1.4 Distinguishable

Text Spacing WCAG 1.4.12 · Level AA

In markup-based content, no content or functionality may be lost when users set line height to at least 1.5 times the font size, spacing after paragraphs to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times. Languages and scripts that lack a property need only meet the rest.

Level
AA
Since
WCAG 2.1
Principle
Perceivable
Guideline
1.4 Distinguishable
Try the live demo All criteria Checklist

Live demo

Apply the WCAG text spacing

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Turn on text spacing. It sets line height to 1.5, 2em after paragraphs, and wider letter and word spacing. Check that both sentences on the card are still there.

Live example

Passes

What happened

    Why it passes

    The card has a minimum height in em, not a fixed one, so it grows. With wider spacing, both sentences stay visible.

    Why it fails

    The card is fixed at 112 pixels tall with overflow hidden. With wider spacing, the transfer date is pushed out of the box and cut off.

    Examples

    Code that fails, and the fix

    Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes 2 lines

    Fails

    Card with a fixed pixel height

    Live preview

    CSS
    .offer-card {  height: 120px;  overflow: hidden;  line-height: 1.2;}

    When a reader sets line height to 1.5 and adds 2em after paragraphs, the text grows taller than 120px and overflow: hidden cuts off the end.

    Passes

    Card that grows with its text

    Live preview

    CSS
    .offer-card {  min-height: 7.5em;  padding: 1em;  line-height: 1.2;}

    min-height keeps the designed size as a minimum, but the card can grow, so no text is lost when spacing increases.

    02

    Fails

    Button label in a fixed box

    Live preview

    CSS
    .apply-button {  width: 120px;  height: 36px;  overflow: hidden;  white-space: nowrap;}

    Letter spacing of 0.12em and word spacing of 0.16em make the label “Apply discount” wider. In a fixed 120px box with overflow hidden, the end of the label can be cut off.

    Passes

    Button sized by its padding

    Live preview

    CSS
    .apply-button {  min-height: 2.25em;  padding: 0.5em 1em;}

    With padding in em and no fixed width or height, the button grows with its label when text spacing changes.

    Why it matters

    Who it helps

    People with dyslexia or low vision who increase spacing with a user style sheet or extension can read more easily without text being cut off or overlapping.

    W3C: Understanding 1.4.12

    • Level AA

      Level AA is the level most laws and policies require.

    • In WCAG versions

      Added in WCAG 2.1 in June 2018, and kept in 2.2.

      No WCAG 1.0 checkpoint maps to it.

    • Where it is required

      Required where the law names WCAG 2.1 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Australia and New Zealand.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Apply all four spacing values to the page with a text spacing bookmarklet or user style sheet.
    2. Check that no text is clipped, truncated or overlapped, and that every control and piece of content still works.

    Common failures

    Where it breaks

    • Buttons, tabs or cards with fixed heights clip their text once spacing is increased.
    • Containers with overflow hidden cut off the last lines of text when line height grows.

    On the Accessibility Checklist

    Related