WCAG 1.4.12 Text Spacing: How to Make Website Text Easier to Read

WCAG 1.4.12 Text Spacing — what it is and why it matters

WCAG 1.4.12 Text Spacing requires that users can increase spacing around text without losing content or functionality. The goal is to make paragraphs, headings, lists and form labels easier to read for people with low vision, cognitive differences or reading disabilities.

What the success criterion requires

• Authors must ensure text spacing can be adjusted to these minimum values without loss of content or function:
• Line height (line spacing) at least 1.5 times the font size.
• Spacing following paragraphs at least 2 times the font size.
• Letter spacing at least 0.12em.
• Word spacing at least 0.16em.
• No clipping, overlap or loss of interactivity when those spacing settings are used.

Which elements you must check

• Paragraphs, headings and block text.
• List items and table cell text.
• Form labels, input values, and interactive text such as links and buttons.
• Any text that is part of a control or that must remain readable to operate the page.

How to test WCAG 1.4.12 manually

1. Open the page in a browser and identify representative pages: article pages, forms, settings screens, menus and dialogs.
2. Apply the target spacing values for the whole page. Use a browser user stylesheet, dev tools, or an extension that injects CSS. The values to apply are 1.5 line-height, 2.0 paragraph spacing, 0.12em letter-spacing and 0.16em word-spacing.
3. Check for content clipping or overlap. Look for text that is cut off, overlapped, hidden, or that causes controls to become unusable.
4. Try to interact with controls. Make sure links, buttons and form fields still work and are reachable by keyboard and pointer.
5. Test on narrow viewports and at different font sizes. Spacing must still work when the layout changes.

Quick manual test

• Increase paragraph spacing and line height. Scan for overlapping text.
• Increase letter and word spacing. Scan for hyphenation or words breaking inside UI controls.
• Tab through the page to confirm all interactive elements remain usable.

CSS techniques to meet WCAG 1.4.12

Use relative units and avoid fixed heights. The examples below show simple author CSS that satisfies the minimum spacing values.

Selector	Suggested declarations
body, p, li, h1, h2, h3, label	line-height: 1.5; margin-bottom: 2em;
p, li	word-spacing: 0.16em; letter-spacing: 0.12em;
input, textarea, button, a	line-height: 1.5; padding: 0.5em 0.6em;

Notes:

• Use em or unitless values so spacing scales with font size.
• Avoid fixed height on text containers. Let height grow with content.
• Avoid overflow: hidden on parent containers that contain text. That can clip lines when spacing is increased.

Common layout problems and how to fix them

Problem: Menu links overlap when letter spacing grows

Fix: Allow wrapping and add horizontal padding. Use white-space: normal on link containers and set word-wrap: break-word for long tokens. Ensure flex containers use flex-wrap: wrap so items drop to the next line instead of overlapping.

Problem: Form labels or placeholder text are cut off

Fix: Remove fixed heights from label or input wrappers. Give inputs padding that scales with font size. Ensure labels are not absolutely positioned over inputs in a way that relies on exact spacing.

Problem: Buttons with icons hide text when spacing grows

Fix: Place icons and text in separate inline elements. Use gap or padding between them, not negative margins. Allow the text to flow to a second line by avoiding white-space: nowrap.

Practical QA checklist for developers and testers

• Apply the four spacing changes globally and test representative pages.
• Confirm no text is clipped, overlapped or obscured.
• Confirm interactive controls remain reachable and operable by keyboard and pointer.
• Confirm responsive behaviour: content reflows instead of being hidden.
• Check custom components such as carousels, tabs and dropdowns for spacing regressions.
• Use automated regression tests for layout only where they assert visible text is not clipped.

Two practical checks competitors often miss

1. Test inside native form widgets

People focus on paragraphs and headings. They often forget native form controls. Increase spacing and check select lists, date pickers and multi-line textareas. These controls often have internal layout limits that cause clipping.

2. Test with keyboard-only navigation plus increased spacing

Some layouts look fine visually but push focusable elements off screen or behind overlays when spacing changes. Tab through the page after applying spacing changes to catch these issues.

How this relates to other WCAG requirements

Text Spacing is about spacing values and readable flow. It is complementary to requirements that cover zoom and reflow. Use spacing rules and flexible layouts together so increased spacing does not break functionality.

Frequently asked questions

Do I need to provide controls for users to change spacing?

No. You do not have to add a UI to change spacing. You have to make sure the page works when a user changes spacing through browser settings or user styles.

Will these changes break my visual design?

They can affect tight layouts. Prioritise readable content and flexible components. Use media queries to adjust complex components on narrow viewports so increased spacing does not cause overlap.

Summary checklist

• Line height 1.5, paragraph spacing 2.0, letter-spacing 0.12em, word-spacing 0.16em.
• Use relative units and avoid fixed heights.
• Allow wrapping and do not clip text with overflow rules.
• Test forms, menus and widgets with increased spacing and keyboard navigation.

If you want, I can create a short test CSS file you can paste into dev tools or give a prioritized list of pages to test first.