1.4.8 Visual Presentation

WCAG 2.2 · 1.4.8 AAA Perceivable

What it requires

For blocks of text, a mechanism must let the user control its visual presentation so it is readable for them. Specifically, all of the following must be achievable:

  • Colours — foreground and background colours can be selected by the user (for example via the browser, the OS, or a page control).
  • Width — a line of text is no wider than 80 characters (or 40 for CJK scripts).
  • Justification — text is not fully justified (not aligned to both the left and right edges).
  • Line and paragraph spacing — line spacing is at least 1.5 within paragraphs, and paragraph spacing is at least 1.5 times the line spacing.
  • Resize without scrolling — text can be resized to 200% without horizontal scrolling to read a line on a full-screen window.

The requirement is met when the user can achieve each of these, whether the page provides controls or it works through user-agent settings.

When this fails, reading is harder for people with low vision who cannot customise colours or magnify text without losing lines off-screen, and for people with cognitive, language, or learning disabilities — including dyslexia — who rely on generous spacing, short line lengths, and ragged-right edges (justified text creates uneven “rivers” of white space that disrupt tracking).

How to detect it

Checks for 1.4.8 Visual Presentation
Aspect How to check Automatable?
User colours Confirm the user can override text/background colours without breaking the layout. No — manual.
Line width Measure a full line of body text; it should not exceed ~80 characters. Partial.
Justification Inspect CSS / rendering for text-align: justify on text blocks. Partial.
Spacing Verify line-height ≥ 1.5 and paragraph gap ≥ 1.5× line spacing. Partial.
200% resize Zoom text to 200% on a full-screen window; lines must not require horizontal scrolling. No — manual/zoom check.

Automated tools such as axe do not report a pass/fail for 1.4.8; it is a AAA criterion that requires manual inspection and zoom testing.

How to fix it

  1. Do not lock text to author colours; allow user/forced-colour overrides and avoid background images behind text that defeat them.
  2. Constrain measure with a max-width (around 60–70ch) so lines stay under 80 characters.
  3. Use text-align: start (or left) instead of justify.
  4. Set line-height: 1.5 and a paragraph spacing of at least 1.5× that value.
  5. Use relative units so text reflows to 200% without horizontal scrolling.
.prose p {
  max-width: 66ch;        /* under 80 characters */
  text-align: start;      /* never justify */
  line-height: 1.5;       /* ≥ 1.5 line spacing */
  margin-block-end: 2.25em; /* ≥ 1.5× line spacing */
}

Copy-paste tests

Automated coverage

There is no fully automated axe-core rule for 1.4.8 Visual Presentation, so this AAA criterion needs manual review. Use the console check and the steps below to surface and confirm issues.

Run this in the browser console

1-4-8-visual-presentation.js 
// Read-only: flag text blocks that may fail 1.4.8 (justified / too wide).
const suspects = [...document.querySelectorAll('p, li, blockquote, dd')]
  .map(el => {
    const cs = getComputedStyle(el);
    const chars = el.textContent.trim().length;
    const px = parseFloat(cs.fontSize) || 16;
    return { el, align: cs.textAlign, lineHeight: cs.lineHeight,
             approxCh: Math.round(el.getBoundingClientRect().width / (px * 0.5)) };
  })
  .filter(r => r.align === 'justify' || r.approxCh > 80);
suspects.forEach(r => { r.el.style.outline = '2px solid magenta'; });
console.table(suspects.map(({ el, ...r }) => r));
console.log('Review %d flagged block(s) for justify / >80ch / spacing.', suspects.length);

What to check manually: zoom text to 200% on a full-screen window and confirm no line needs horizontal scrolling, and override foreground/background colours (browser or OS) to verify text stays readable.