1.4.8 Visuelle Darstellung

1. Was ist das Ziel dieses Kriteriums?

Text auf Websites sollte wie ein maßgeschneiderter Anzug sein – er sollte zu jedem Menschen passen. Die Realität sieht oft anders aus: endlos lange Zeilen, gedrängter Zeilenabstand oder Blocksatz mit Löchern zwischen den Wörtern. Menschen mit Sehbehinderungen, kognitiven Einschränkungen oder Leseschwierigkeiten stoßen dabei schnell an ihre Grenzen.

Das Ziel von Erfolgskriterium 1.4.8 ist es, längere Textblöcke so darzustellen bzw. anpassbar zu machen, dass Nutzer:innen sie nach ihren Bedürfnissen lesen können. Farben, Zeilenbreite, Ausrichtung, Abstände und Vergrößerung – all das soll sich einstellen lassen.

2. Was fordert das Erfolgskriterium genau?

Ganz konkret muss für die visuelle Darstellung von Textblöcken ein Mechanismus verfügbar sein, mit dem sich fünf Dinge erreichen lassen:

Farbwahl: Nutzer:innen können Vorder- und Hintergrundfarben selbst auswählen – über die Website oder über Einstellungen von Browser und Betriebssystem.

Zeilenbreite begrenzen: Textzeilen sind höchstens 80 Zeichen breit (bei chinesischen, japanischen oder koreanischen Schriftzeichen höchstens 40). Lange Zeilen erschweren das Lesen, weil man leicht „die Zeile verliert“.

Kein Blocksatz: Text ist nicht im Blocksatz (links- und rechtsbündig zugleich) gesetzt. Die ungleichmäßigen Wortabstände erschweren das Lesen erheblich.

Ausreichende Abstände: Der Zeilenabstand innerhalb von Absätzen beträgt mindestens das 1,5-Fache (anderthalbzeilig), und der Abstand zwischen Absätzen ist mindestens 1,5-mal so groß wie der Zeilenabstand.

Vergrößern ohne horizontales Scrollen: Text lässt sich ohne Hilfstechnologie auf 200 % vergrößern, ohne dass man in einem Vollbildfenster horizontal scrollen muss, um eine Zeile zu lesen.

Wichtig: Die Inhalte müssen diese Werte nicht von Haus aus verwenden. Entscheidend ist, dass es einen Mechanismus gibt, mit dem Nutzer:innen sie erreichen können – und dieser Mechanismus darf auch vom Browser oder einer anderen Software kommen. Deine Aufgabe ist es vor allem, solche Anpassungen nicht zu blockieren.

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du musst einen wichtigen Vertrag lesen, aber die Zeilen sind so eng und lang, dass du ständig die Orientierung verlierst. Oder der Text steht in einer Farbkombination, die deine Augen binnen Minuten ermüdet. So geht es vielen Menschen täglich im Internet.

Flexible Textdarstellung schafft Barrierefreiheit, weil sie:

Menschen mit Sehbehinderungen erlaubt, Farben und Kontraste nach ihren Bedürfnissen einzustellen – manche brauchen schwarzen Text auf gelbem Hintergrund, andere weiße Schrift auf Schwarz.

Menschen mit Legasthenie oder anderen Leseschwierigkeiten hilft, sich durch passende Zeilenbreiten und -abstände besser zu orientieren.

Menschen mit kognitiven Einschränkungen unterstützt, Textblöcke zu überblicken und nicht in langen Zeilen „verloren zu gehen“.

Menschen, die Text stark vergrößern, das mühsame horizontale Scrollen für jede einzelne Zeile erspart.

Und nicht zuletzt: Sie macht Inhalte für alle leichter lesbar – auch für Menschen ohne Einschränkungen, die bei ungünstigem Licht oder auf kleinen Bildschirmen lesen.

4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Browser und Betriebssysteme bieten bereits viele Funktionen für Textanpassungen. Deine Aufgabe ist es, diese nicht zu blockieren und bei Bedarf zusätzliche Optionen anzubieten. Hier ein paar bewährte Praxis-Tipps:

Farbwahl ermöglichen: Achte darauf, dass dein Layout funktioniert, wenn Nutzer:innen eigene Farben erzwingen (z. B. Kontrastdesigns unter Windows oder eigene Farben im Browser). Biete optional einen Umschalter für Farbschemata an (z. B. Hell/Dunkel) und nutze die Media-Query prefers-color-scheme. Verwende CSS Custom Properties für Farben, damit sich Schemata leicht umstellen lassen.

Zeilenbreite kontrollieren: Begrenze Textblöcke mit max-width in der Einheit ch, z. B. max-width: 70ch – so bleibt die Zeile auch bei anderer Schriftgröße unter etwa 80 Zeichen. Teste deine Texte: Bei Fließtext sind etwa 60 bis 75 Zeichen pro Zeile gut lesbar.

Blocksatz verhindern: Verwende text-align: start (oder left) statt text-align: justify – auch wenn Blocksatz „ordentlicher“ aussieht. Bei mehrsprachigen Websites mit unterschiedlicher Leserichtung ist start die robustere Wahl.

Zeilenabstände optimieren: Setze line-height für Fließtext auf mindestens 1.5. Wähle den Abstand zwischen Absätzen deutlich größer als den Zeilenabstand. Alternativ kannst du Nutzer:innen Schalter für verschiedene Abstandsoptionen anbieten („Normal“, „Erweitert“).

Vergrößerung ohne horizontales Scrollen sicherstellen: Nutze relative Einheiten (rem, em, %) und flexible Layouts mit CSS Grid oder Flexbox. Teste bei 200 % Browser-Zoom: Text sollte umbrechen statt aus dem Bildschirm zu laufen (siehe auch Umbruch (Reflow)).

Technische Umsetzung: Ein Darstellungs-Umschalter für Nutzeroptionen lässt sich mit wenigen Zeilen JavaScript und CSS Custom Properties bauen. Wichtiger als eigene Schalter ist aber, dass Nutzer-Stylesheets und Browser-Erweiterungen deine Seite nicht zerstören – genau das prüft auch Textabstand.

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

Auch bei Erfolgskriterium 1.4.8 gilt: Barrierefreiheit ist kein Selbstzweck – sondern bringt handfeste Vorteile für dein Unternehmen.

1. Zielgruppe erweitern

Gut lesbarer, anpassbarer Text macht deine Inhalte für deutlich mehr Menschen nutzbar: Menschen mit Sehbehinderungen, Legasthenie, ADHS oder altersbedingt nachlassender Sehkraft. Zusätzlich profitieren alle, die in unterschiedlichen Situationen lesen – im hellen Sonnenlicht, abends oder unterwegs.

2. Saubere Technik als Nebeneffekt

Wer 1.4.8 ernst nimmt, arbeitet mit semantischem HTML, relativen Einheiten und flexiblen Layouts. Das macht deine Website robuster und leichter zu pflegen. Barrierefreiheit ist kein direkter Google-Rankingfaktor, aber eine saubere, gut lesbare Struktur kommt indirekt auch der Auffindbarkeit zugute.

3. Inhalte verständlicher machen

Lesbarer Text wird eher gelesen. Wenn Menschen deine Inhalte bequem lesen können – egal ob Produktbeschreibungen, AGB oder Anleitungen –, verstehen sie dein Angebot besser und haben weniger Rückfragen.

Und nicht zuletzt: Einordnung ins Recht. Level AAA wird weder vom BFSG noch von der BITV 2.0 verlangt – Maßstab ist dort WCAG 2.1 Level AA über die EN 301 549. Das W3C rät außerdem davon ab, Level AAA pauschal für ganze Websites vorzuschreiben. Gerade für textlastige Angebote ist 1.4.8 aber ein lohnendes Ziel. Dieser Abschnitt informiert allgemein und ersetzt keine Rechtsberatung.

6. Das Erfolgskriterium im Wortlaut des W3C

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.

Kurz gesagt: Für Textblöcke muss es einen Weg geben – auch über den Browser –, Farben zu wählen, Zeilen auf 80 Zeichen zu begrenzen, Blocksatz zu vermeiden, großzügige Abstände zu nutzen und Text ohne horizontales Scrollen auf 200 % zu vergrößern.