1.4.8 Visual Presentation

Level: AAA | Principle: Perceivable | Since: WCAG 2.0 | Automation: Manual

What This Means

For blocks of text, the visual presentation must meet several requirements to ensure readability. Users must be able to select foreground and background colors, text width must not exceed 80 characters (40 for CJK), text must not be fully justified, line spacing must be at least 1.5 times the font size, paragraph spacing must be at least 2 times the line spacing, and text must be resizable up to 200% without requiring horizontal scrolling.

These requirements address the reading difficulties experienced by people with cognitive, language, and learning disabilities. Full justification creates uneven spacing between words (known as "rivers of white space"), long lines make it hard to track from one line to the next, and tight spacing makes text blocks visually overwhelming.

All of these requirements can be met through CSS, and several can be addressed by allowing users to apply their own stylesheets or by providing a style switcher.

Who This Affects

Users with dyslexia — full justification and long lines significantly increase reading difficulty
Users with low vision — need to resize text and may require specific color combinations
Users with cognitive disabilities — tight spacing and wide text blocks are harder to process
Users with photosensitive conditions — need to control foreground and background colors

Common Pitfalls

1. Text blocks wider than 80 characters

/* Bad: no max-width, text stretches full viewport */
.article-content {
  width: 100%;
}

/* Good: constrain text width to approximately 80 characters */
.article-content {
  max-width: 70ch;
}

2. Full justification creating uneven word spacing

/* Bad: fully justified text creates rivers of white space */
p {
  text-align: justify;
}

/* Good: left-aligned text has consistent word spacing */
p {
  text-align: left;
}

3. Insufficient line and paragraph spacing

/* Bad: tight spacing */
p {
  line-height: 1.2;
  margin-bottom: 0.5em;
}

/* Good: meets AAA spacing requirements */
p {
  line-height: 1.5;
  margin-bottom: 2em;
}

4. No mechanism to change colors

<!-- Good: provide a style switcher for colors -->
<div role="group" aria-label="Display settings">
  <label for="text-color">Text color:</label>
  <input type="color" id="text-color" value="#000000">
  <label for="bg-color">Background color:</label>
  <input type="color" id="bg-color" value="#ffffff">
</div>

How to Test

Inspect the CSS for text blocks and measure the max-width or character count per line. Lines must not exceed 80 characters (40 for CJK).
Check the text-align property on all text blocks and confirm none use justify (full justification).
Verify line-height is at least 1.5 and paragraph margin-bottom is at least 2 times the line spacing.
Zoom text to 200% and confirm no horizontal scrollbar appears for text content.
Check if the page provides a mechanism for users to select foreground and background colors (a style switcher or compatibility with user stylesheets).
Pass: Text blocks are under 80 characters wide, not fully justified, have adequate spacing, reflow at 200%, and colors can be customized.
Fail: Any text block exceeds 80 characters, uses full justification, has tight spacing, requires horizontal scrolling at 200%, or provides no way to change colors.

How to Fix

Set max-width: 70ch or similar on text containers to keep lines under 80 characters
Use text-align: left (or start) instead of justify for body text
Set line-height: 1.5 or greater on body text and margin-bottom on paragraphs to at least 2x the line height
Ensure the layout responds to 200% text zoom without horizontal scrolling
Provide a style switcher or respect user stylesheets for foreground and background color selection