Skip to main content
Perceivable WCAG 1.4.8

1.4.8 Visual Presentation

For blocks of text, users can select foreground and background colors, width is no more than 80 characters, text is not justified, line spacing is at least 1.5, and paragraph spacing is at least 1.5 times the line spacing.

Level AAA Moderate WCAG 2.0 (new) WCAG 2.1 WCAG 2.2

What This Rule Means

WCAG 1.4.8 defines five specific requirements for the visual presentation of blocks of text to maximize readability. The user must be able to: (1) select foreground and background colors, (2) read text in lines no wider than 80 characters (40 for CJK scripts), (3) see text that is not fully justified, (4) have line spacing of at least 1.5 within paragraphs, and (5) have paragraph spacing of at least 1.5 times the line spacing.

These requirements are rooted in readability research. Long line lengths cause tracking errors, full justification creates uneven spacing that disrupts reading flow, and tight line spacing makes it difficult to find the next line. Together, these properties create a baseline of readable text layout.

Why It Matters

Users with dyslexia, low vision, or cognitive disabilities benefit significantly from controlled text presentation. Research shows that line lengths beyond 80 characters increase reading errors, justified text creates "rivers of white space" that disrupt reading for dyslexic users, and tight spacing makes it hard for people to track from line to line.

Allowing users to customize colors is essential for those who need high-contrast or specific color combinations (such as light text on dark backgrounds) for comfortable reading.

Related axe-core Rules

There are no automated axe-core rules for 1.4.8. These properties require visual inspection and computed style analysis. Some can be checked programmatically with custom scripts but are not part of standard rule sets.

How to Test

  1. Measure the maximum line width of body text. Count characters on the longest line — it should not exceed 80 characters.
  2. Check the text-align property on body text blocks. It should not be set to justify.
  3. Inspect line-height on body text. It should be at least 1.5 (or 150%).
  4. Check spacing between paragraphs. It should be at least 1.5 times the line-height value.
  5. Test whether the user can override foreground and background colors via browser settings or a provided UI mechanism.

How to Fix

Apply readable text defaults across your site:

/* Readable text block styling */
.content-area {
  /* Max 80 characters wide */
  max-width: 70ch; /* ch unit = width of '0' character */

  /* No full justification */
  text-align: left;

  /* Line spacing at least 1.5 */
  line-height: 1.6;

  /* Paragraph spacing at least 1.5x line height */
  /* With line-height: 1.6 on 1rem (16px) = 25.6px */
  /* Paragraph spacing should be >= 38.4px */
}

.content-area p {
  margin-bottom: 1.5em; /* 1.5x the font size, closely approximating 1.5x line-height */
}

/* Allow user color overrides — don't use !important on colors */
.content-area {
  color: var(--text-color, #1a1a2e);
  background-color: var(--bg-color, #ffffff);
}

Provide a theme switcher for color customization:

<fieldset class="theme-switcher">
  <legend>Reading preferences</legend>
  <label><input type="radio" name="theme" value="light" checked /> Light</label>
  <label><input type="radio" name="theme" value="dark" /> Dark</label>
  <label><input type="radio" name="theme" value="sepia" /> Sepia</label>
  <label><input type="radio" name="theme" value="high-contrast" /> High Contrast</label>
</fieldset>

Common Mistakes

  • Full-width text containers that span the entire viewport on large screens, creating line lengths of 150+ characters.
  • Using text-align: justify on body text, creating uneven word spacing and rivers of white space.
  • Default line-height of 1.2 or "normal" (typically ~1.15), which is below the 1.5 minimum.
  • Paragraphs with only margin-bottom: 1em, which is less than 1.5 times the line spacing.
  • Using !important on text colors, preventing user style sheets from overriding them.

Resources