How to use the wcag text spacing calculator
- Enter the font size of your text and choose pixels, points, rem or em. For rem and em the page uses 16 pixels as the base.
- Read the minimum line height, space after paragraphs, letter spacing and word spacing in your unit and in pixels.
- Copy the values or the test style sheet in the steps to try them on your page.
- Download the CSV for your records.
Formula
Line height = 1.5 x font size
Space after paragraphs = 2 x font size
Letter spacing = 0.12 x font size
Word spacing = 0.16 x font size
Pixels = size x 1 for px, x 96/72 for pt and x 16 for rem or em. Each result is shown in your unit and in pixels.
16 pixel body text
For text at 16 px the line height is 24 px, the space after a paragraph is 32 px, the letter spacing is 1.92 px and the word spacing is 2.56 px.
For 12 pt text, which is 16 px, the values are 18 pt, 24 pt, 1.44 pt and 1.92 pt. For 1.125 rem text, which is 18 px, the line height is 1.6875 rem or 27 px.
What the criterion asks
Success Criterion 1.4.12, Text Spacing, is a level AA requirement of the Web Content Accessibility Guidelines 2.1. It says that when a reader sets four text spacing properties to at least these values, nothing should be lost: no text cut off, no overlap and no hidden content. The reader may do this with a browser extension, a user style sheet or a bookmarklet because wider spacing helps many people with dyslexia or low vision.
The values are minimums that the page must tolerate, not a style to apply. You do not have to design with 1.5 line height, but your layout must still work if a reader applies it. Fixed-height boxes, text in images and absolutely positioned labels are the usual things that break.
Testing a page
Apply the four values to the whole page, for example with an extension or the test style sheet shown on this page, and then look for clipped text, overlapping lines and controls that no longer fit. Check forms, menus, tables and cards, and check at a narrow width as well as a wide one.
Fix problems by letting boxes grow with their content, using min-height instead of height and avoiding clipping with overflow hidden on text containers. Automated checkers cannot find all of these, so test by hand too.
Assumptions and limits
- The multipliers are the ones in WCAG 2.1 Success Criterion 1.4.12.
- One em or rem is 16 pixels, and one point is 4/3 of a pixel.
- The page does not read your style sheet. It only calculates the values.
- Nothing is uploaded.
Frequently asked questions
Do I have to use these values in my design?
No. The page must keep working when a reader applies them. You can design with other values.
Does the rule apply to all languages?
The criterion applies to text in scripts that use these properties. It does not apply to scripts where letter or word spacing is not used, such as some East Asian text.
Is the paragraph value in addition to line height?
Yes. It is the space after a paragraph, set separately from the line height.
Why include points?
Print style sheets and some design tools still use points, so the values can be set in either.