Design · Textabstände

Textabstände anpassbar machen

Manche Menschen können einen Text erst dann gut lesen, wenn die Zeilen weiter auseinanderstehen oder zwischen den Buchstaben mehr Luft ist. Das WCAG-Kriterium 1.4.12 Textabstände verlangt deshalb, dass sich Zeilen-, Absatz-, Wort- und Buchstabenabstand erhöhen lassen, ohne dass dabei Inhalt abgeschnitten oder überdeckt wird. Diese Seite zeigt die vier konkreten Werte, das oft missverstandene Prinzip dahinter und wie du dein Layout mit einem kurzen Test absicherst.

  • 8 Minuten Lesezeit
  • Stand: Juni 2026

Warum anpassbare Textabstände wichtig sind

Stell dir vor, eine Zeile Text klebt für dein Auge förmlich an der nächsten. Für viele Menschen mit Sehbehinderung oder Legasthenie ist genau das Alltag: Stehen die Zeilen zu dicht, rutscht der Blick beim Lesen in die falsche Zeile, Wörter verschwimmen ineinander. Wer mehr Abstand zwischen Zeilen, Wörtern und Buchstaben einstellt, liest spürbar leichter und schneller.

Genau diese Anpassung schützt das Erfolgskriterium 1.4.12 Textabstände. Ein Erfolgskriterium ist eine einzeln prüfbare Anforderung der Web Content Accessibility Guidelines (WCAG). Menschen ändern die Abstände über eine Browser-Erweiterung, ein eigenes Benutzer-Stylesheet oder ein kleines Lesezeichen-Skript. 1.4.12 sorgt dafür, dass deine Seite das aushält: dass also nichts abgeschnitten wird, sich nichts überlappt und keine Schaltfläche ihre Beschriftung verliert, wenn jemand mehr Luft in den Text bringt. Die Forschungsgrundlage dafür (u. a. die von der WCAG zitierte McLeish-Studie) zeigt: Mehr Abstand steigert die Lesegeschwindigkeit bei Menschen mit Sehbehinderung messbar.

Enger Text gegen weit gesetzten Text, beide vollständig, nur unterschiedlich luftig Zwei Seitenausschnitte im Vergleich. Links, beschriftet „eng", liegen viele Textzeilen sehr dicht übereinander. Rechts, beschriftet „mehr Abstand", stehen dieselben Zeilen mit deutlich größerem Zeilen- und Wortabstand auseinander; der Block ist dadurch höher geworden, aber jede Zeile ist weiterhin vollständig vorhanden. Ein grünes Häkchen markiert, dass kein Inhalt verloren gegangen ist. MEHR LUFT IM TEXT: NICHTS GEHT VERLOREN ENG MEHR ABSTAND
Rechts stehen dieselben Zeilen mit mehr Zeilen- und Wortabstand. Der Block wird höher, der Inhalt bleibt vollständig: genau das verlangt 1.4.12.

Was 1.4.12 genau verlangt

Das Kriterium ist erstaunlich präzise. In Inhalten, die mit einer Auszeichnungssprache wie HTML umgesetzt sind, darf kein Inhalt und keine Funktion verloren gehen, wenn Nutzer:innen alle vier folgenden Abstände auf die genannten Werte setzen und sonst keine weitere Stil-Eigenschaft ändern:

  • Zeilenhöhe(Zeilenabstand) auf mindestens das 1,5-Fache der Schriftgröße,
  • Abstand nach Absätzen auf mindestens das 2-Fache der Schriftgröße,
  • Buchstabenabstand(Tracking) auf mindestens das 0,12-Fache der Schriftgröße,
  • Wortabstand auf mindestens das 0,16-Fache der Schriftgröße.

Es gibt eine Ausnahme: Sprachen und Schriftsysteme, die eine dieser Eigenschaften gar nicht verwenden, müssen sie auch nicht berücksichtigen. Im Japanischen etwa gibt es keine Wortabstände zwischen einzelnen Wörtern und keinen Absatzabstand im westlichen Sinn, dort greifen nur die anwendbaren Werte.

Textabstände 1.4.12 auf einen Blick
Abstand Mindestwert CSS-Eigenschaft
Zeilenhöhe 1,5 × Schriftgröße line-height: 1.5
Absatzabstand 2 × Schriftgröße margin-bottom: 2em
Buchstabenabstand 0,12 × Schriftgröße letter-spacing: 0.12em
Wortabstand 0,16 × Schriftgröße word-spacing: 0.16em

Die vier Werte im Detail

Alle vier Werte sind relativ zur Schriftgröße formuliert, deshalb taucht in der CSS-Umsetzung die Einheit em auf, die „so viel wie die aktuelle Schriftgröße" bedeutet. Bei einer Schriftgröße von 20 Pixeln heißt 0.12em Buchstabenabstand also rund 2,4 Pixel zusätzlich zwischen den Zeichen. Das folgende Schaubild zeigt, wo jeder der vier Werte ansetzt.

Wo die vier Abstandswerte von 1.4.12 ansetzen Ein schematischer Textblock mit zwei kurzen Absätzen. Vier beschriftete Markierungen zeigen die vier Abstände: die Zeilenhöhe als senkrechter Abstand zwischen zwei Zeilen mit dem Wert 1,5-fache Schriftgröße; der Absatzabstand als größerer senkrechter Abstand zwischen den beiden Absätzen mit dem Wert 2-fache Schriftgröße; der Buchstabenabstand als kleiner waagerechter Abstand zwischen zwei Buchstaben mit dem Wert 0,12-fache Schriftgröße; der Wortabstand als waagerechter Abstand zwischen zwei Wörtern mit dem Wert 0,16-fache Schriftgröße. DIE VIER ABSTÄNDE: ALLE RELATIV ZUR SCHRIFTGRÖSSE Zeilenhöhe ≥ 1,5 × Schriftgröße Absatzabstand ≥ 2 × Schriftgröße BUCHSTABENABSTAND ≥ 0,12 × Schriftgröße WORTABSTAND ≥ 0,16 × Schriftgröße
Zwei Werte wirken senkrecht (Zeilenhöhe, Absatzabstand), zwei waagerecht (Buchstaben-, Wortabstand). Alle sind als Vielfaches der Schriftgröße definiert, nicht als feste Pixelzahl.

Wichtig ist die Formulierung „auf mindestens ". Die Werte sind ein Boden, keine Decke. Eine Person darf die Abstände auch weiter erhöhen. Die WCAG ermutigt Autor:innen sogar ausdrücklich, mehr als das Minimum zuzulassen. Für die Prüfung zählt aber genau dieser definierte Satz an Werten: Hält die Seite ihn aus, ist 1.4.12 erfüllt.

Das Prinzip: zulassen, nicht vorschreiben

Der häufigste Denkfehler bei 1.4.12 ist, es als Gestaltungsvorgabe zu lesen. Das ist es nicht. Die WCAG stellt zwei Dinge klar:

  • Du musst diese Abstände nicht selbst setzen. Dein Text darf ruhig enger gesetzt sein, als die Werte vorgeben. Verlangt ist nur, dass nichts kaputtgeht, wenn jemand sie überschreibt.
  • Du musst auch keinen Knopf dafür einbauen. Es ist nicht deine Aufgabe, eine Bedienung zum Ändern der Abstände bereitzustellen, das übernehmen Browser-Erweiterung oder Benutzer-Stylesheet. Deine Aufgabe ist nur, ihnen nicht im Weg zu stehen.

Anders gesagt: 1.4.12 ist ein Robustheits-Test. Die einzige reale Pflicht ist, dass dein Layout flexibel genug bleibt. Konkret heißt das vor allem: keine fest gedeckelten Höhen für Textcontainer und Größen in relativen Einheiten, sodass Boxen mit dem Text mitwachsen können. Die WCAG nennt dafür die ausreichenden Techniken C36 (Überschreiben der Abstände zulassen) und C35 (Abstände ohne erzwungenen Umbruch ermöglichen).

layout.css: Container, die mitwachsen statt abzuschneiden

 /* Gut: Höhe darf wachsen, Maße relativ zur Schrift (Technik C28) */.karte {
  min-height: 3em 
; /* Mindesthöhe, kein festes Limit */ 
padding: 1rem 
;
  overflow: visible 
; /* nichts wird abgeschnitten */ 
} /* Vermeiden: feste Höhe schneidet weiter gesetzten Text ab */ 
 /* .karte { height: 80px; overflow: hidden; }  ← Failure F104 */

Selbst testen mit dem Abstands-CSS

Du musst 1.4.12 nicht im Kopf nachrechnen, du kannst es direkt sichtbar machen. Wende die vier Werte testweise auf die ganze Seite an (etwa über ein Benutzer-Stylesheet oder die Entwicklerwerkzeuge des Browsers) und sieh nach, ob etwas zerbricht. Genau diesen Satz an Regeln nutzen auch die bekannten Test-Lesezeichen:

text-spacing-test.css: die vier 1.4.12-Werte auf alles anwenden

 /* Setzt genau die vom Kriterium geforderten Mindestwerte */ 
* {
  line-height: 1.5 
!important;
  letter-spacing: 0.12em 
!important;
  word-spacing: 0.16em 
!important;
}
p {
  margin-bottom: 2em 
!important;
}

Die häufigsten Stolperfallen

Verstöße gegen 1.4.12 entstehen fast immer an derselben Stelle: Ein Element hat eine feste Höhe oder Breite, aus der der weiter gesetzte Text herausläuft. Die WCAG fasst das in einem einzigen Fehlerbild zusammen, Failure F104: abgeschnittener oder überlappender Inhalt, sobald die Abstände erhöht werden.

  • Fest gedeckelte Höhen. Eine Karte oder ein Banner mit height und overflow: hidden schneidet die unteren Zeilen ab, sobald die Zeilenhöhe steigt.
  • Schmale Spalten und Tab-Leisten. Überschriften in engen Containern (etwa einer Navigations-Spalte) überlappen bei mehr Buchstaben- und Wortabstand den Folgetext.
  • Knappe Schaltflächen. Buttons, deren Breite exakt auf die Beschriftung zugeschnitten ist, lassen den Text bei mehr Tracking aus dem Rahmen rutschen.
Eine fest gedeckelte Box schneidet weiter gesetzten Text ab, eine mitwachsende nicht Zwei Boxen im Vergleich, beide mit erhöhtem Zeilenabstand. Links, beschriftet „Verstoß", hat die Box eine feste Höhe; die unteren Zeilen werden am Rand abgeschnitten, ein rotes Kreuz markiert den Fehler. Rechts, beschriftet „Korrekt", ist die Box mit dem Text mitgewachsen; alle Zeilen sind vollständig sichtbar, ein grünes Häkchen markiert das. MEHR ZEILENABSTAND: SCHNEIDET DIE BOX AB ODER WÄCHST SIE MIT? VERSTOSS: feste Höhe (F104) KORREKT: mitwachsend
Links schneidet die feste Höhe die unteren Zeilen ab (Failure F104). Rechts wächst die Box mit, der gesamte Text bleibt erhalten.

1.4.12, Resize Text und Reflow

Drei WCAG-Kriterien drehen sich um Größe und Abstand von Text und werden gern verwechselt. Die Abgrenzung hilft, beim Testen das Richtige zu prüfen.

1.4.12 Textabstände betrifft den Abstand zwischen Zeilen, Wörtern, Buchstaben und Absätzen. 1.4.4 Text vergrößern betrifft dagegen die Größe der Schrift und endet bei 200 %. Und 1.4.10 Reflow verlangt, dass die gesamte Darstellung bei 400 % Zoom beziehungsweise 320 CSS-Pixel ohne zweidimensionales Scrollen auskommt. Alle drei sind Level AA.

Drei oft verwechselte Kriterien
Kriterium Worum es geht Schwelle
1.4.12 Textabstände Abstände erhöhbar, ohne Verlust. vier feste Werte · AA
1.4.4 Text vergrößern Schrift größer machen, ohne Verlust. bis 200 % · AA
1.4.10 Reflow Ganze Darstellung ohne 2D-Scrollen. 400 % / 320 px · AA

In der Praxis ziehen die drei oft an einem Strang: Wer Container mitwachsen lässt und relative Einheiten verwendet, erfüllt meist alle drei zugleich. Es gibt darüber hinaus noch das strengere 1.4.8 Visuelle Darstellung(Level AAA), das von der Seite selbst Einstellmöglichkeiten verlangt. Das geht über 1.4.12 hinaus und ist für die meisten Projekte keine Pflicht. Trotzdem lohnt es sich, die Kriterien getrennt zu testen: Eine Seite kann 1.4.4 bei 200 % bestehen und trotzdem bei erhöhten Abständen an 1.4.12 scheitern.

Mythen-Prüfung