• Success Criterion 1.4.12
  • Conformance level AA
  • W3C reference F104

Text That Clips or Overlaps Under User Text-Spacing Settings

1.4.12 — Text Spacing

Scenario

Setting

A used-car marketplace's listing filter

What’s wrong

When a user increases line/letter/word spacing (a common low-vision aid), text gets cut off or overlaps other content.

Example 

.filter-chip { height: 28px; line-height: 28px; padding: 0 12px; white-space: nowrap; overflow: hidden; }

Why it matters

When a shopper applies a stylesheet with 1.5x line spacing, the 'Under $15,000' chip's text clips at top and bottom inside its fixed 28px height.

How to test

Apply a text-spacing bookmarklet (line-height 1.5x, paragraph spacing 2x font size, letter-spacing 0.12x, word-spacing 0.16x) site-wide and scan every page for clipped or overlapping text.

How to fix

Use min-height instead of a fixed height so chips can grow to fit user-controlled line spacing.

.filter-chip { min-height: 28px; height: auto; padding: 6px 12px; white-space: normal; overflow: visible; }

Outcome

A shopper applying wider line spacing reads the full 'Under $15,000' label without any of it clipping off.

Who is affected

Low-vision users who rely on custom text spacing get filter labels that clip and become unreadable.

Learn more

Related scenarios