1.4.12 Text Spacing (Level AA)
High-Level Description
This success criterion ensures that text remains readable and functional when users adjust spacing settings such as line height, word spacing, letter spacing, and paragraph spacing. It supports users with dyslexia, low vision, cognitive disabilities, and reading fatigue by allowing custom text spacing without loss of content or functionality.
Detailed Description
Applies to:
- All web content containing text, including body copy, headings, buttons, menus, labels, and tooltips.
- CSS styling and layout of web pages that could be affected by spacing changes
This allows:
- Users to apply their own style sheets or browser settings to improve readability.
- Assistive tools to adjust spacing without breaking layout or hiding information.
- Text to remain usable even with increased line height, word spacing, and paragraph spacing.
Indicators of Non-Compliance
- Content overlaps or becomes clipped when line height or spacing increases.
- Controls, such as buttons or input fields, are misaligned or cut off.
- Essential content is hidden due to overflow caused by increased spacing.
- Layouts break when custom spacing is applied.
Required Text Spacing Minimum Values
When users override text styles, content must remain readable and usable with the following settings:
| CSS Property | Minimum Value |
|---|---|
| Line height | 1.5 times the font size |
| Paragraph spacing | 2 times the font size |
| Letter spacing | 0.12 times the font size |
| Word spacing | 0.16 times the font size |
Real-World Examples
| Scenario | Non-Compliant | Compliant |
|---|---|---|
| A blog post | Overlapping lines of text after increasing line height | Layout adjusts fluidly to line height of 1.5 without overlap or clipping |
| Input form | Labels shift into fields or get shortened with increased paragraph spacing | Labels reposition correctly and remain fully visible |
| Styled buttons with text | Increased letter spacing causes buttons to overflow or lose padding | Buttons scale properly to fit longer or wider text |
| Tight grid layout | Word spacing increase pushes content off-screen or under other elements | Layout is responsive and adjusts to spacing without obscuring content |
Disability Impact
| Disability Group | Without Custom Spacing Support | With Custom Spacing Support |
|---|---|---|
| Dyslexia or Cognitive | Cramped text reduces readability and comprehension | Extra spacing increases clarity and reduces visual stress |
| Low Vision | Tight lines or small gaps increase difficulty focusing | Better spacing improves tracking and reduces fatigue |
| ADHD | Overwhelming blocks of text are harder to process | Additional paragraph spacing improves cognitive flow |
| Temporary Impairments | Fatigue or eye strain make dense text hard to follow | Spacing adjustments make reading easier and less tiring |
Supporting Documentation
Remediation Strategies
1 - Test with User Overrides
- No content is obscured or overlapped
- Interactive elements remain usable
Apply custom spacing using browser tools or bookmarklets and verify that:
2 - Avoid Fixed Dimensions
Avoid fixed heights or widths that prevent text from expanding
3 - Use Flexible Layouts
Implement responsive design techniques such as flexbox or grid to support dynamic text spacing