WCAG 1.4.8 Visual Presentation: Optimize Text Readability for All Users

Last updated: 2026-03-31

Level AAA Perceivable WCAG 1.4.8

What This Criterion Requires

WCAG 1.4.8 Visual Presentation is a AAA-level criterion that establishes specific requirements for how blocks of text are displayed to maximize readability. The criterion requires five key properties for text blocks: foreground and background colors can be selected by the user, text width does not exceed 80 characters or 40 characters for CJK scripts, text is not fully justified (aligned to both left and right margins), line spacing is at least 1.5 times the font size within paragraphs and paragraph spacing is at least 1.5 times the line spacing, and text can be resized up to 200% without requiring horizontal scrolling. These requirements are based on decades of readability research showing that overly wide text columns, tight line spacing, and justified text significantly reduce reading speed and comprehension, particularly for users with dyslexia, low vision, or cognitive disabilities. While this is a AAA criterion, implementing these text presentation best practices substantially improves the reading experience for all users.

Why It Matters

Text readability directly affects whether users can access and understand your content. Research consistently shows that long line lengths (over 80 characters) cause readers to lose their place when moving to the next line, increasing reading errors and fatigue. Fully justified text creates uneven spacing between words, forming distracting 'rivers of white space' that particularly affect readers with dyslexia. Tight line spacing makes it difficult for users with low vision to track from one line to the next. When users cannot customize colors, those with visual sensitivities, migraines, or light sensitivity may be unable to read content at all. These issues compound for users with cognitive disabilities, who may already require more effort to process written text. Allowing users to customize text presentation enables them to create reading conditions that work for their specific needs. Meeting these requirements benefits everyone: comfortable text presentation reduces eye strain, improves comprehension, and keeps readers engaged longer.

Common Failures and How to Fix Them

Text blocks wider than 80 characters

Content containers are set to full viewport width or use very wide max-width values, causing text lines to extend well beyond 80 characters. This makes it difficult for readers to track from the end of one line to the beginning of the next.

Inaccessible 
.article-content {
  max-width: 100%;
  padding: 0 20px;
  /* Text lines can exceed 120+ characters on wide screens */
}
Accessible 
.article-content {
  max-width: 70ch;
  /* Approximately 70 characters wide */
  margin: 0 auto;
  padding: 0 1.5rem;
}

Fully justified text alignment

Text is set to justify alignment, creating uneven word spacing that forms visual 'rivers' of white space running through paragraphs. This particularly affects users with dyslexia and makes text harder to read for everyone.

Inaccessible 
.article-content p {
  text-align: justify;
}
Accessible 
.article-content p {
  text-align: left;
  /* Or text-align: start for RTL support */
}

Insufficient line and paragraph spacing

Text blocks use default or tight line spacing, making it difficult for users to distinguish between lines and paragraphs, especially at smaller text sizes or when zoomed.

Inaccessible 
body {
  font-size: 16px;
  line-height: 1.2;
}
p {
  margin-bottom: 0.5em;
}
Accessible 
body {
  font-size: 16px;
  line-height: 1.5;
  /* 1.5x font size = 24px line height */
}
p {
  margin-bottom: 2.25em;
  /* 1.5x line height = 1.5 * 1.5em */
}

How to Test

  1. Measure the width of text blocks in characters. Content containers should limit lines to approximately 80 characters (or 40 for CJK scripts). Use browser developer tools or a character-counting bookmarklet.
  2. Check that no text blocks use text-align: justify. Search stylesheets for justify and verify that body text uses left or start alignment.
  3. Verify line-height is at least 1.5 for body text and that paragraph spacing (margin-bottom) is at least 1.5 times the line-height value.
  4. Confirm that text can be resized to 200% without requiring horizontal scrolling to read any line of text.
  5. Test whether users can override foreground and background colors using browser settings or custom stylesheets without breaking the layout.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria