Accessibility tools
Text spacing
- Last reviewed
- 13 August 2026
Test whether content is still usable when letter, word, line and paragraph spacing is increased.
What you can test
This tool can help you identify potential accessibility barriers that may affect people with:
How to use
Drag the Text spacing link to your bookmark bar to install the tool.
Once the tool is installed, visit a webpage and select the tool in your bookmark bar.
Meeting WCAG criterion
Text spacing is one of the Level AA WCAG criteria. The criteria state that when increasing text spacing, there is no loss of content or functionality.
The following settings must be able to be set and users should lose no access to content:
- line height (line spacing) to at least 1.5 times the font size
- spacing following paragraphs to at least 2 times the font size
- letter spacing (tracking) to at least 0.12 times the font size
- word spacing to at least 0.16 times the font size
These settings can make content on the screen much easier to read for some users.
Some people with dyslexia and other cognitive disabilities often find it easier to read and understand content that has been given spacing.
Example of using text spacing
Below is an example of the bookmarklet being used on Get Into Teaching.
Before
This is a screenshot showing a navigation bar with the links 'Is teaching right for me?' and 'How to become a teacher.'
View larger image in a new tab
After
This is a screenshot showing a navigation bar with the links 'Is teaching right for me?' and 'How to become a teacher' with a green circle on the links.
View larger image in a new tab
Fixing text spacing issues
Sometimes, when text spacing properties are applied to a webpage, content can or functionality can be lost.
For example, if placeholder text has been used in a form, it can often become lost or obscured due to the increased text space.
To fix this, always use a visible label rather than placeholder text.
Another example is when text spacing is applied and text containers do not expand with the content, which means that text overflows the container.
This can be because the height of the container (known as a div) holding the text is set using pixels (px), so it does not expand when the text size increases. Setting the container height in relation to the text size, using a relative unit such as em, or not setting a fixed height, will allow the container to expand with the content and prevent the text from overflowing.