Definition: Textabstände sind die Abstände zwischen Zeilen, Absätzen, Buchstaben und Wörtern. WCAG 1.4.12 (Stufe AA) verlangt nicht bestimmte Abstände, sondern dass eine Seite größere Abstände verträgt: Stellen Nutzende sie mit eigenen Einstellungen höher, darf kein Inhalt und keine Funktion verloren gehen [1].
Englisch: Text spacing · Zuletzt geprüft: 27. September 2026
Wer davon profitiert
Viele Menschen mit Legasthenie oder Sehbehinderung lesen besser, wenn Zeilen und Wörter weiter auseinanderstehen. Sie stellen das mit Browser-Erweiterungen, eigenen Stylesheets oder Lesehilfen ein. Das hilft nur, wenn das Layout mitwächst – und nicht Buttons abschneidet oder Text übereinanderschiebt.
Die vier Werte
Eine Seite muss mindestens diese Einstellungen vertragen, ohne dass etwas verloren geht [1][2]:
| Eigenschaft | Wert |
|---|---|
| Zeilenhöhe | 1,5-fache Schriftgröße |
| Abstand nach Absätzen | 2-fache Schriftgröße |
| Buchstabenabstand | 0,12-fache Schriftgröße |
| Wortabstand | 0,16-fache Schriftgröße |
Die Seite muss diese Werte nicht selbst verwenden. Sie darf nur nicht kaputtgehen, wenn jemand sie setzt. Ausgenommen sind Sprachen und Schriften, die eine der Eigenschaften nicht kennen – dann gilt das Kriterium nur für die übrigen [2].
Ein Beispiel: Bei 16 Pixel Schrift bedeutet das eine Zeilenhöhe von 24 Pixel, 32 Pixel nach jedem Absatz, knapp 2 Pixel zusätzlich zwischen den Buchstaben und gut 2,5 Pixel zwischen den Wörtern. Ein deutscher Text mit langen Komposita läuft dadurch spürbar breiter – genau dort brechen starre Layouts zuerst.
Häufige Fehler
- Feste Höhen für Buttons, Karten oder Menüpunkte: Der Text wächst, der Kasten nicht, und der Rest wird abgeschnitten.
overflow: hiddenauf Containern mit Text.- Inline-Stile mit
!important, die eigene Einstellungen der Nutzenden überschreiben. - Text in Bildern, der sich gar nicht anpassen lässt.
Im Code
/* Text wird abgeschnitten */
.card-title {
height: 48px;
overflow: hidden;
}/* Der Kasten wächst mit */
.card-title {
min-height: 48px;
}So prüfen Sie es
Das W3C nennt ein Bookmarklet, das die vier Werte auf jede Seite anwendet [2]. Sie können die Werte auch in den Entwicklerwerkzeugen per CSS setzen. Gehen Sie danach die Seite durch: Ist Text abgeschnitten, überlappt etwas, fehlt eine Schaltfläche?
Wie Reviseberg damit umgeht
Reviseberg meldet mit der axe-core-Regel avoid-inline-spacing Inline-Stile, die Abstände mit !important festnageln und damit eigene Einstellungen verhindern. Ob die Seite mit größeren Abständen noch funktioniert, prüft axe-core nicht. Das muss ein Mensch mit den Werten oben testen. Reviseberg führt 1.4.12 deshalb als nur teilweise automatisch prüfbar.
Verwandte Begriffe
Reflow · Bildschirmlupe · Einfache Sprache · Kontrastverhältnis