Lesbarer Fliesstext: Zeilenlänge, Zeilenhöhe und Kontrast

Worum es geht

Zeilenlänge (measure) ist die Länge einer Zeile in Zeichen. Durchschuss (line height) ist der Abstand von einer Grundlinie zur nächsten. Der Kontrastwert ist das Verhältnis der Leuchtdichte zwischen Text und Hintergrund. WCAG 2.2 nennt für alle drei Zahlenwerte. Kriterium 1.4.8 Visuelle Darstellung (AAA) verlangt für Textblöcke: eine Breite von höchstens 80 Zeichen oder Glyphen (40 bei CJK-Schrift), keinen Blocksatz, einen Zeilenabstand von mindestens dem Anderthalbfachen innerhalb von Absätzen mit einem Absatzabstand von mindestens dem 1,5-Fachen des Zeilenabstands sowie Text, der sich auf 200 % vergrössern lässt, ohne dass horizontal gescrollt werden muss. Kriterium 1.4.12 Textabstand (AA) verlangt, dass kein Inhalt und keine Funktion verloren geht, wenn Nutzende den Zeilenabstand auf mindestens das 1,5-Fache der Schriftgrösse, den Absatzabstand auf das 2-Fache, den Buchstabenabstand auf das 0,12-Fache und den Wortabstand auf das 0,16-Fache setzen. Kriterium 1.4.3 Kontrast (AA) verlangt 4.5:1 für Text und 3:1 für grossen Text, den das Dokument als rund 18 Punkt oder 14 Punkt fett definiert.

Warum es wichtig ist

Zu lange Zeilen lassen das Auge beim Zeilenwechsel die Stelle verlieren; zu enger Durchschuss lässt Zeilen verschmelzen; schwacher Kontrast ist bei Sonnenlicht und für Menschen mit eingeschränktem Sehvermögen unleserlich. Das sind die Fehler, die ansonsten gut strukturierte Inhalte am häufigsten unangenehm zu lesen machen, und sie lassen sich günstig beheben.

So wird es angewendet

• Die Textspalte mit max-width in ch-Einheiten begrenzen (zum Beispiel max-width: 65ch). Ein ch entspricht der Laufweite der Ziffer 0 der Schrift, die Grenze skaliert also mit der Schriftart; bei einer proportionalen Schrift fasst eine Zeile mehr Zeichen als ihr ch-Wert, daher eine Beispielzeile gegen die 80-Zeichen-Obergrenze auszählen statt sie anzunehmen.
• line-height als einheitenlose Zahl setzen (1.5 oder mehr für Fliesstext, weniger für grosse Überschriften), damit sie mit der Schriftgrösse mitskaliert; bei langen Zeilen und bei Schriften mit hoher x-Höhe erhöhen.
• rem für Schriftgrössen und em/rem für Abstände verwenden, damit Browser-Zoom und die Schriftgrösseneinstellungen der Nutzenden greifen; feste Pixelhöhen auf Textcontainern vermeiden, damit neu beabstandeter Text nicht überläuft.
• Jedes Paar aus Text- und Hintergrundfarbe gegen 4.5:1 prüfen, einschliesslich Platzhaltertext, Text über Bildern und beider Farbschemata; grosse Überschriften dürfen 3:1 verwenden.
• Fliesstext linksbündig (am Anfang ausgerichtet) setzen; Blocksatz ohne Silbentrennung erzeugt Weissraum-Flüsse, und 1.4.8 nennt nicht ausgeschlossenen Text ausdrücklich.

Stolpersteine

Dünne Schriftschnitte verlieren auf Bildschirmen an Kontrast, selbst wenn das Farbverhältnis besteht. line-height in px skaliert nicht mit dem Text mit. Kürzung mit text-overflow: ellipsis verbirgt Inhalt, wenn Nutzende den Abstand vergrössern. Kontrast-Werkzeuge messen nur Farbe; ein unruhiges Hintergrundbild braucht einen deckenden oder unscharfen Hintergrund hinter dem Text.