Schriftgröße barrierefrei: lesbar auch mit Zoom

Kleine, graue Schrift sieht elegant aus und wird trotzdem überlesen. So wählst du eine Schriftgröße, die lesbar bleibt, auch wenn jemand die Seite auf 200 Prozent Zoom stellt.

Zum Vergleich Prüfung für deine Website

Selbst vergleichen

Schriftgröße und Abstände: vorher und nachher

Vorher: 11 Pixel, Zeilenabstand 1,1, feste Breite Nachher: 18 Pixel, Zeilenabstand 1,6, passt sich an

Vergleiche denselben Absatz in winziger und in lesbarer Schriftgröße. Den Regler bedienst du mit der Maus, mit dem Finger oder mit den Pfeiltasten.

Warum es zählt

Warum die Schriftgröße über die Lesbarkeit entscheidet

Die WCAG schreiben keine feste Schriftgröße vor. Sie verlangen, dass sich Text ohne Verlust von Inhalt und Funktion auf 200 Prozent vergrößern lässt und dass die Seite bei einer Breite von 320 Pixeln ohne seitliches Scrollen funktioniert. In der Praxis klappt das fast nur, wenn die Schrift schon in der Grundeinstellung lesbar ist und das Layout sich der Größe anpasst.

Viele Menschen ab Mitte vierzig lesen kleine Schrift schlechter, weil die Linse an Elastizität verliert. Hinzu kommen Menschen mit Sehbehinderung, die ihre Seiten stark vergrößern, und alle, die am Handy unterwegs sind. Wer hier mit 12 oder 13 Pixeln arbeitet, zwingt einen großen Teil seiner Besucher zum Zoomen, und viele brechen dann einfach ab.

Schriftgröße ist dabei nur ein Teil. Genauso wichtig sind Zeilenabstand, Zeilenlänge und die Frage, ob Text bei Vergrößerung abgeschnitten wird. Eine Schrift mit großer Mittellänge und klar unterscheidbaren Buchstaben hilft zusätzlich. Diese Website ist zum Beispiel in Atkinson Hyperlegible gesetzt, die für Menschen mit Sehschwäche entwickelt wurde.

WCAG 2.2

Was die WCAG hier verlangen

1.4.4 Stufe AA

Größe von Text ändern

Text lässt sich ohne Hilfsmittel auf 200 Prozent vergrößern, ohne dass Inhalte oder Funktionen verloren gehen.
1.4.10 Stufe AA

Umbruch (Reflow)

Bei 320 Pixeln Breite, also 400 Prozent Zoom am Computer, ist kein waagerechtes Scrollen nötig.
1.4.12 Stufe AA

Textabstand

Wer Zeilen-, Absatz-, Wort- und Buchstabenabstand vergrößert, verliert keine Inhalte. Nichts darf überlappen oder abgeschnitten werden.
1.4.8 Stufe AAA

Visuelle Darstellung

Zeilen nicht länger als 80 Zeichen, Zeilenabstand mindestens das Anderthalbfache, kein Blocksatz.

Lösung

So wird die Schriftgröße barrierefrei und bleibt bei Zoom lesbar

Mindestens 16 Pixel für Fließtext

Setze den Fließtext auf mindestens 16 Pixel, besser 17 oder 18. Kleinere Größen nur für kurze Nebeninformationen, nie für Texte, die gelesen werden müssen.
Relative Einheiten verwenden

Größen in rem und em folgen der Einstellung des Browsers. Wer dort eine größere Grundschrift gewählt hat, bekommt sie dann auch auf deiner Seite, statt fest verbauter Pixelwerte.
Zeilenabstand und Zeilenlänge

Ein Zeilenabstand von etwa 1,5 und Zeilen mit 60 bis 80 Zeichen lesen sich am leichtesten. Absätze brauchen sichtbaren Abstand zueinander, damit das Auge Halt findet.
Mit 200 und 400 Prozent testen

Zoome deine Seite im Browser auf 200 und auf 400 Prozent. Nichts darf abgeschnitten werden, Menüs müssen erreichbar bleiben, und Spalten sollen untereinander rutschen statt seitlich hinauszulaufen.

Vorher

body {
  font-size: 11px;
  line-height: 1.1;
  width: 1200px;
}

Nachher

body {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 70ch;
}

Feste Pixel und feste Breiten brechen bei Zoom. Relative Einheiten, ein großzügiger Zeilenabstand und eine begrenzte Zeilenlänge halten den Text lesbar.

Fragen

Fragen zu Schriftgröße und Abstände

Welche Schriftgröße ist barrierefrei?

Eine feste Mindestgröße gibt es in den WCAG nicht. Für Fließtext haben sich 16 Pixel als Untergrenze bewährt, wichtiger ist aber, dass sich die Schrift auf 200 Prozent vergrößern lässt, ohne dass etwas verloren geht.

Darf ich das Zoomen am Handy sperren?

Nein. Eine Einstellung wie user-scalable=no oder maximum-scale=1 verhindert das Vergrößern und verstößt gegen die Barrierefreiheit. Lass das Zoomen immer zu.

Ist Großschreibung besser lesbar?

Nein, ganze Sätze in Großbuchstaben lesen sich schlechter, weil die Wortbilder fehlen. Für kurze Etiketten ist sie in Ordnung, für Fließtext nicht.

Weitere Ratgeber zur Barrierefreiheit

Wie steht deine Website da?

Wir prüfen deine Seite auf diese und alle anderen Barrieren und schicken dir einen Bericht, der sagt, was zuerst dran ist.

Anfrage für eine Prüfung senden Zum Schnelltest

Schriftgröße barriere­frei: lesbar auch mit Zoom