--- title: "Visual Presentation" url: "https://barrierefreihochzwei.de/en/wcag/1-4-8-visual-presentation" language: "en" description: "WCAG 1.4.8 (AAA) covers how adaptable blocks of text must be: colors, line length, alignment, spacing and zoom. Learn how to make long texts easy to read." published: "2025-01-01T08:00:00+01:00" updated: "2026-10-15T09:41:59+02:00" --- # Visual Presentation When text finally becomes flexible. - **Erfolgskriterium:** 1.4.8 - **Prinzip:** Perceivable - **Konformitätsstufe:** Level AAA - **Erklärung beim W3C:** [www.w3.org/WAI/WCAG22/Understanding/visu...](https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html) Success criterion 1.4.8 # 1.4.8 Visual Presentation Level AAAPerceivable When text finally becomes flexible. ## 1. What is the goal of this criterion? Text on websites should be like a tailored suit – it should fit everyone. Reality often looks different: endlessly long lines, cramped line spacing or justified text with gaps between words. People with low vision, cognitive disabilities or reading difficulties quickly hit their limits. The goal of Success Criterion 1.4.8 is to present longer blocks of text – or make them adaptable – so that users can read them in the way they need. Colors, line width, alignment, spacing and enlargement should all be adjustable. ## 2. What exactly does it require? Specifically, for the visual presentation of blocks of text, a mechanism must be available that achieves five things: **Color choice:** users can select foreground and background colors themselves – via the website or via browser and operating system settings. **Limited line width:** lines of text are no more than 80 characters wide (no more than 40 for Chinese, Japanese or Korean characters). Long lines make reading harder because it’s easy to “lose your place”. **No justified text:** text is not justified (aligned to both left and right margins). The uneven word spacing makes reading considerably harder. **Sufficient spacing:** line spacing within paragraphs is at least one and a half, and the spacing between paragraphs is at least 1.5 times the line spacing. **Resizing without horizontal scrolling:** text can be enlarged to 200% without assistive technology, without having to scroll horizontally in a full-screen window to read a line. Important: content doesn’t have to use these values by default. What matters is that a mechanism exists for users to achieve them – and that mechanism may also be provided by the browser or other software. Your main job is not to block such adjustments. ## 3. Why does it matter for accessibility? Imagine having to read an important contract, but the lines are so long and tightly packed that you keep losing your place. Or the text uses a color combination that tires your eyes within minutes. That’s what many people experience online every day. Flexible text presentation makes content accessible because it: Lets people with low vision set colors and contrast to suit them – some need black text on a yellow background, others white text on black. Helps people with dyslexia or other reading difficulties keep their bearings thanks to suitable line widths and spacing. Supports people with cognitive disabilities in taking in blocks of text without “getting lost” in long lines. Spares people who enlarge text heavily the tedious horizontal scrolling for every single line. And finally, it makes content easier to read for everyone – including people without disabilities reading in poor light or on small screens. ## 4. How to meet the criterion The good news: browsers and operating systems already offer many features for adjusting text. Your job is not to block them and, where useful, to offer additional options. Here are some proven tips: **Enable color choice:** make sure your layout works when users force their own colors (for example Windows contrast themes or custom browser colors). Optionally offer a color scheme switcher (such as light/dark) and use the `prefers-color-scheme` media query. Use CSS custom properties for colors so schemes are easy to switch. **Control line width:** limit blocks of text with `max-width` in `ch` units, e.g. `max-width: 70ch` – that keeps lines under roughly 80 characters even at different font sizes. Test your text: for body copy, around 60 to 75 characters per line reads well. **Avoid justified text:** use `text-align: start` (or `left`) instead of `text-align: justify` – even if justified text looks “neater”. On multilingual websites with different reading directions, `start` is the more robust choice. **Optimize spacing:** set `line-height` for body text to at least `1.5`. Make the spacing between paragraphs clearly larger than the line spacing. Alternatively, you can offer users toggles for different spacing options (“Normal”, “Expanded”). **Ensure enlargement without horizontal scrolling:** use relative units (`rem`, `em`, `%`) and flexible layouts with CSS Grid or Flexbox. Test at 200% browser zoom: text should wrap rather than run off the screen (see also [Reflow](https://barrierefreihochzwei.de/en/wcag/1-4-10-reflow)). **Technical implementation:** a display settings switcher can be built with a few lines of JavaScript and CSS custom properties. More important than your own controls, though, is that user stylesheets and browser extensions don’t break your page – which is exactly what [Text Spacing](https://barrierefreihochzwei.de/en/wcag/1-4-12-text-spacing) tests. ## 5. Why this criterion matters for businesses Success Criterion 1.4.8 is another case where accessibility isn’t an end in itself – it brings real benefits for your business. ### 1. Reach a wider audience Readable, adaptable text makes your content usable for far more people: people with low vision, dyslexia, ADHD or age-related vision loss. Everyone reading in different situations benefits too – in bright sunlight, in the evening or on the go. ### 2. Clean code as a side effect Taking 1.4.8 seriously means working with semantic HTML, relative units and flexible layouts. That makes your website more robust and easier to maintain. Accessibility isn’t a direct Google ranking factor, but a clean, readable structure indirectly helps findability too. ### 3. Make content easier to understand Readable text is more likely to be read. When people can read your content comfortably – whether product descriptions, terms and conditions or instructions – they understand your offer better and have fewer questions. **Last but not least: the legal context.** Level AAA is not required by the European Accessibility Act or by its German implementation, the Barrierefreiheitsstärkungsgesetz (BFSG) – the benchmark there is WCAG 2.1 Level AA via EN 301 549. The W3C also advises against requiring Level AAA as a general policy for entire sites. For text-heavy services, however, 1.4.8 is a worthwhile goal. This section is general information, not legal advice. ## 6. The success criterion in the W3C’s words > **Success Criterion 1.4.8 Visual Presentation (Level AAA)** > > For the visual presentation of blocks of text, a mechanism is available to achieve the following: > > - Foreground and background colors can be selected by the user. > - Width is no more than 80 characters or glyphs (40 if CJK). > - Text is not justified (aligned to both the left and the right margins). > - 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. > - 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. > > **Note 1:** Content is not required to use these values. The requirement is that a mechanism is available for users to change these presentation aspects. The mechanism can be provided by the browser or other user agent. Content is not required to provide the mechanism. > > **Note 2:** Writing systems for some languages use different presentation aspects to improve readability and legibility. If a presentation aspect in this success criterion is not used in a writing system, content in that writing system does not need to use that presentation setting and can conform without it. Authors are encouraged to follow guidance for improving readability and legibility of text in their writing system. In short: for blocks of text there must be a way – the browser counts – to choose colors, limit lines to 80 characters, avoid justified text, use generous spacing and enlarge text to 200% without horizontal scrolling. **Official explanation from the W3C** The W3C explains every success criterion in depth – with intent, examples and techniques. [Understanding 1.4.8](https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html) ## More criteria from “Perceivable” [ 1.1.1 Level A ### Non-text Content When images need words. ](https://barrierefreihochzwei.de/en/wcag/1-1-1-non-text-content) [ 1.2.1 Level A ### Audio-only and Video-only (Prerecorded) When podcasts and silent videos need a second form. ](https://barrierefreihochzwei.de/en/wcag/1-2-1-audio-only-and-video-only-prerecorded) [ 1.2.2 Level A ### Captions (Prerecorded) When videos need to make sense without sound. ](https://barrierefreihochzwei.de/en/wcag/1-2-2-captions-prerecorded)