WCAG 1.4.8 — Visual Presentation

What this requires

For blocks of text at Level AAA, a mechanism must let the user control five aspects of visual presentation:

Choose foreground and background colours.
Limit line width to no more than 80 characters (40 for CJK).
Avoid full justification (text-align: justify).
Use line spacing of at least 1.5 within paragraphs and at least 2.25 between paragraphs.
Allow text resizing without horizontal scrolling at full-width widow, when text size is set to 200%.

How AI coding tools fail this

When asked for "magazine-style typography", AI tools reach for text-align: justify, tight line heights, and very wide measure. The visual is striking and breaks the criterion on every front.

The second pattern: hard-coded paragraph widths (max-w-xl, w-[640px]) that approximate the 80-character target on the designer's preferred font and become too wide or too narrow as the user resizes.

The third: design systems that ship a single "body" text style with no mechanism for the reader to influence colour, width, or spacing. The reader is locked into the designer's choice.

Failing examples

Fully justified prose with tight line height:

<article className="text-justify leading-tight">
  {longProse}
</article>

A very wide measure with no user control:

<article className="max-w-7xl leading-snug">
  {longProse}
</article>

Passing examples

A reader-friendly default: ~70-character measure, 1.6 line height, ragged-right alignment:

<article className="mx-auto max-w-prose text-left leading-7">
  {longProse}
</article>

Plus a reading-preferences control on long-form content pages:

<aside aria-labelledby="reading-prefs-heading">
  <h2 id="reading-prefs-heading">Reading preferences</h2>
  <fieldset>
    <legend>Theme</legend>
    {/* light / dark / sepia */}
  </fieldset>
  <label>
    Width
    <input type="range" min="40" max="80" value={width} onChange={...} />
  </label>
  <label>
    Line spacing
    <input type="range" min="1.5" max="2" step="0.1" value={leading} onChange={...} />
  </label>
</aside>

Edge cases

80-character measure is approximate; the spirit is "comfortable reading width", not "exactly 80". The max-w-prose Tailwind utility maps to roughly this width for most fonts.
CJK languages cap at 40 characters, not 80.
Justified text is a hard fail. Even on body copy with manual hyphenation, rivers and gaps degrade reading for dyslexic users.
Headings and short blocks (captions, labels) aren't "blocks of text" in the criterion's sense — the requirements apply to paragraph-length and longer content.
OS-level reading modes (Safari Reader, Edge Read aloud) can satisfy parts of this criterion implicitly. The criterion still requires the author-provided page to offer the control.

How Jeikin handles this

axe-core can detect text-align: justify and excessive line widths in static CSS. The harder question — "does the user have a reading preferences mechanism on long-form pages?" — is a manual review item. The dashboard captures both the automated findings and the reviewer's record of which pages offer reading controls.

References

W3C — Understanding 1.4.8 Visual Presentation (opens in new tab)