Paragraph Spacing for Accessibility — The 2x Font Size Rule

Paragraph spacing is the fourth WCAG 1.4.12 value and the one most developers miss. The rule: the gap between paragraphs must be at least 2x the font size (or your layout must survive that override). For 16px body text, that is 32px minimum between paragraphs. Most CSS resets zero out the default, so you end up with paragraphs stacked tightly together — a WCAG failure and a readability problem.

The WCAG 1.4.12 paragraph spacing rule

Paragraph spacing = the gap between the end of one paragraph and the start of the next. WCAG requires at least 2x the font size. For a 16px font, that is 32px. For 18px, 36px. For 14px, 28px.

The rule applies whether you implement spacing via margin-bottom, padding-top, or a CSS gap property. Any method is fine — just hit 2x.

What browsers give you by default

The user-agent stylesheet sets paragraph margin-top and margin-bottom to 1em each. Two adjacent paragraphs end up with 1em gap total (because adjacent margins collapse). That is below the 2x requirement.

CSS resets like normalize.css or Tailwind Preflight zero out paragraph margins entirely — which is even worse for accessibility. You have to add them back explicitly.

The CSS fix — one rule

p {
  margin-bottom: 2em;
  /* or if you prefer rem: margin-bottom: 2rem; */
}

That single rule on the p selector sets all paragraphs to 2em margin-bottom, which equals 2x the current font size regardless of element.

If you use CSS variables for spacing: margin-bottom: var(--spacing-2x, 2em); lets you override per context.

Sell Custom Apparel — We Handle Printing & Free Shipping

How to test paragraph spacing

Apply this in browser dev tools temporarily:

p {
  margin-bottom: 2em !important;
}

If your layout breaks — cards grow too tall, fixed-height sections overflow, sidebars misalign — those are bugs to fix. The WCAG requirement is that the layout survives this override.

The spacing checker runs this test automatically for any CSS you paste in.

Paragraph spacing vs. line break — why they matter differently

HTML has two ways to separate text: <p> elements (paragraphs) and <br> tags (line breaks). WCAG 1.4.12 applies to <p>. A line break does not create a "paragraph boundary" that screen readers or assistive tech recognize.

Use <p> for prose. Use <br> only for forced line breaks within a single paragraph (addresses, poems, signatures). Using <br><br> instead of separate <p> tags is a common accessibility anti-pattern — the text flows into one paragraph for screen readers.

Design implications of 2em paragraph spacing

2em margin-bottom looks like a lot of whitespace if you are used to tight 1em or 0.5em spacing. Modern reading-focused sites (Substack, Medium) actually use 1.5-1.75em, which fails 1.4.12 strictly. They rely on users having an assistive bookmarklet override — which violates the spirit of the rule.

Best practice: set 2em by default, and trust that your design still looks intentional. Most sites over-tighten paragraph spacing and suffer in readability, not just accessibility.

Frequently Asked Questions

Does margin collapsing count?

Yes. If you set both margin-top and margin-bottom to 1em each, adjacent margins collapse to 1em total — which fails the 2em requirement. Use margin-bottom: 2em with margin-top: 0 to avoid collapsing confusion.

What about list items (li)?

List items are not paragraphs. WCAG 1.4.12 applies to

elements. However, good typography still applies spacing between list items for readability — typically 0.5em between items in an unordered list.

Can I use padding instead of margin?

Yes. WCAG does not care which CSS property creates the gap. Padding-bottom: 2em on

or a wrapper div works identically for compliance.

What if paragraphs are inside a grid with gap?

If the grid gap provides at least 2em between paragraphs, you pass. Just ensure the gap is derived from the font size (use rem or em) so it scales with text resizing.