WCAG 1.4.8: Visual Presentation
Reading is where low vision, dyslexia, and cognitive load all collide with typography. This AAA criterion bundles five requirements for blocks of text: user-selectable colors, lines of at most 80 characters, no full justification, space-and-a-half line spacing, and 200% resize without horizontal scrolling.
The success criterion, in full
For the visual presentation of blocks of text, a mechanism is available to achieve the following: (1) foreground and background colors can be selected by the user; (2) width is no more than 80 characters or glyphs (40 if CJK); (3) text is not justified (aligned to both the left and the right margins); (4) line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing; (5) text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.
The key phrase is a mechanism is available: your defaults can meet each condition, or you can give users a way to reach it — including simply not defeating the browser and OS features that already provide it.
The five requirements, unpacked
1. Colors selectable by the user
Foreground and background colors can be selected by the user.
Readers with low vision, dyslexia, or light sensitivity often need specific combinations — light-on-dark, sepia, yellow-on-black. Conformance usually means not fighting the platform: browser and OS color overrides must work on your text, which they do as long as text is real text and you have not hard-blocked user styles. Providing your own theme picker also satisfies this.
2. Line length ≤ 80 characters
Width is no more than 80 characters or glyphs (40 if CJK).
Long lines make it hard to track from the end of one line to the start of the next. Blocks of text must be able to render at 80 characters or fewer per line (40 for Chinese, Japanese, and Korean glyphs). A max-width in ch units, or a fluid layout the user can narrow, both work.
3. Text not justified
Text is not justified (aligned to both the left and the right margins).
Full justification creates uneven word spacing and 'rivers' of white space that many readers with dyslexia find severely disruptive. Blocks of text must be left-aligned (in LTR languages) or right-aligned (RTL) — or a mechanism must exist to remove justification.
4. Line and paragraph spacing
Line spacing is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
Cramped leading makes lines blur together. Within paragraphs, line spacing must be at least 1.5; between paragraphs, the space must be at least 1.5 times the line spacing — e.g. with line-height: 1.5 on 16px text (24px), paragraph spacing of at least 36px (2.25em). A default this generous, or a mechanism to achieve it, conforms.
5. 200% resize without horizontal scrolling
Text resizes up to 200 percent without requiring horizontal scrolling to read a line of text on a full-screen window.
When the user zooms text to twice its size, lines must wrap within the viewport — no sideways scrolling back and forth to read each line. Responsive, reflowing layouts pass; fixed-width columns that overflow fail. This is stricter than 1.4.4 (AA), which allows some loss of layout fidelity but not of content.
1.4.8 applies to blocks of text — running prose of more than a sentence. Headings, navigation labels, and short UI strings are out of scope. The criterion sits alongside its AA cousins: 1.4.12 Text Spacing (user overrides must not break the layout) and 1.4.10 Reflow (no 2-D scrolling at 400% zoom).
Who this helps
People with dyslexia and reading disabilities
Unjustified text, short lines, and generous spacing remove the rivers, crowding, and line-tracking failures that make reading exhausting.
People with low vision
Custom color pairs, larger text that reflows, and clear paragraph separation together keep long-form reading possible without a screen magnifier.
People with light sensitivity
Selecting their own foreground and background — dark themes, low-glare palettes — is often the difference between reading and not reading at all.
People with cognitive and attention differences
Shorter lines and visible paragraph boundaries reduce place-losing and re-reading; consistent spacing lowers the effort of every page.
CSS patterns
1. A prose container that satisfies width, alignment, and spacing
Four declarations cover conditions 2, 3, and 4 — and the ch unit measures width in characters directly.
.prose {
max-width: 70ch; /* ≤ 80 characters per line (40 for CJK) */
text-align: left; /* never justify blocks of text */
line-height: 1.5; /* space-and-a-half within paragraphs */
}
.prose p {
/* Paragraph spacing ≥ 1.5 × line spacing:
line spacing = 1.5em → need ≥ 2.25em between paragraphs */
margin-block-end: 2.25em;
}
/* ✗ Anti-pattern: justified text creates rivers of white space */
.prose--bad {
text-align: justify;
}2. Reflow at 200%: relative units and no fixed columns
Condition 5 fails when layouts fix their widths in pixels. Size in relative units and let text wrap.
/* ✓ Fluid column: zooming to 200% reflows, never side-scrolls */
main {
width: min(70ch, 100% - 2rem);
margin-inline: auto;
}
html {
font-size: 100%; /* respect the user's base size */
}
/* ✗ Anti-patterns that force horizontal scrolling at 200% */
.layout--bad {
width: 960px; /* fixed pixel column */
white-space: nowrap; /* unwrappable lines */
}3. User-selectable colors: cooperate, and optionally provide
Real text plus theme tokens means browser overrides, forced-colors mode, and your own theme picker all work.
:root { --fg: #1f2937; --bg: #ffffff; }
[data-theme="dark"] { --fg: #e2e8f0; --bg: #0f172a; }
[data-theme="sepia"] { --fg: #433422; --bg: #f4ecd8; }
body {
color: var(--fg);
background: var(--bg);
}
/* Cooperate with Windows High Contrast / forced colors */
@media (forced-colors: active) {
body { color: CanvasText; background: Canvas; }
}How to test for 1.4.8
- 1
Measure line length
In DevTools, count characters per line in the widest block of prose (or divide column width by average character width). Confirm lines are at most 80 characters — or that narrowing the window achieves it without breaking the layout.
- 2
Scan for justified text
Search stylesheets for text-align: justify and inspect rendered paragraphs for flush right edges. Any justified block of prose is a failure unless a mechanism removes it.
- 3
Verify line and paragraph spacing
Check computed line-height is at least 1.5 within paragraphs, and that the gap between paragraphs is at least 1.5 times the line spacing (e.g. ≥ 2.25em when line-height is 1.5).
- 4
Zoom to 200% full-screen
Maximize the window and zoom to 200%. Read several paragraphs: if you must scroll horizontally to finish a line, condition 5 fails. Check both browser zoom and text-only zoom.
- 5
Override the colors
Apply a user stylesheet, reader mode, or forced-colors mode and set your own foreground/background. Text should adopt the chosen colors; text baked into images or locked by aggressive CSS is a failure.
Common failures
- text-align: justify on article bodies — the single most common 1.4.8 failure, and one with no visual upside.
- Full-width prose on large monitors producing 120–160-character lines with no max-width and no way to narrow them.
- line-height of 1.2 or 'normal' on body copy, with paragraphs separated by less than the line spacing.
- Fixed-pixel layouts that force horizontal scrolling as soon as text is zoomed to 200%.
- Long-form content rendered as images of text, which no color, spacing, or zoom mechanism can touch.
- CSS that fights user overrides — !important colors everywhere and forced-colors mode explicitly disabled.
Frequently asked questions
What does WCAG 1.4.8 Visual Presentation require?
For blocks of text, a mechanism must be available to achieve five things: (1) foreground and background colors can be selected by the user; (2) width is no more than 80 characters or glyphs (40 if CJK); (3) text is not justified to both margins; (4) line spacing is at least space-and-a-half within paragraphs and paragraph spacing is at least 1.5 times larger than the line spacing; and (5) text can be resized up to 200% without assistive technology in a way that does not require horizontal scrolling to read a line on a full-screen window. It is a Level AAA criterion from WCAG 2.0.
What counts as a 'block of text'?
More than one sentence of text — running prose like articles, documentation, and long descriptions. Headings, labels, menus, captions, and single-sentence UI strings are not blocks of text, so 1.4.8 does not constrain them. That scoping matters: an 80ch limit on your article column is required; an 80ch limit on your navigation bar is not.
Does 'a mechanism is available' mean my defaults don't have to comply?
Correct — with care. The criterion is satisfied if the user can achieve each condition, whether because your defaults already meet it, because you provide controls (theme picker, width toggle, spacing switch), or because you simply do not defeat the browser and OS features that do it (user stylesheets, reader mode, forced colors, zoom). The trap is actively breaking those mechanisms: text rendered as images, !important color declarations that fight forced-colors mode, fixed-width layouts that cannot narrow, or zoom-hostile viewport settings.
Is the 80-character limit about my default design or a hard maximum?
The user must be able to get lines of 80 characters or fewer. If your text column is fluid and narrows when the user resizes the window or zooms, that mechanism alone can satisfy the requirement even if a very wide window shows longer lines. In practice, setting max-width: 80ch (or less — typography guidance usually favors 45–75 characters) on prose containers is the simplest, most robust answer, and it reads better for everyone.
How do the spacing numbers in 1.4.8 relate to 1.4.12 Text Spacing?
They approach the same readability problem from opposite directions. 1.4.12 (AA) says: if the user overrides spacing to line-height 1.5 and paragraph spacing 2× the font size, nothing may break. 1.4.8 (AAA) says: the user must be able to achieve line spacing of at least 1.5 within paragraphs, with paragraph spacing at least 1.5 times the line spacing. Note the units differ — 1.4.12's paragraph spacing is measured against font size, 1.4.8's against line spacing. Ship line-height: 1.5+ and generous paragraph margins and you satisfy both comfortably.
How is the 200% requirement here different from 1.4.4 and 1.4.10?
1.4.4 Resize Text (AA) requires 200% resize without loss of content or functionality, but tolerates horizontal scrolling. 1.4.10 Reflow (AA) requires no two-dimensional scrolling at 320 CSS pixels width (400% zoom), with exceptions for tables, images, and similar. 1.4.8's fifth condition targets reading specifically: at up to 200%, a line of text must be readable on a full-screen window without horizontal scrolling. A properly responsive, reflowing text layout satisfies all three at once.
Related Success Criteria
Color is not used as the only visual means of conveying information.
Audio that plays automatically can be paused, stopped, or controlled.
Text has a contrast ratio of at least 4.5:1 (3:1 for large text).
Text can be resized up to 200% without loss of content or functionality.
Text is used instead of images of text, except for customizable or essential images.