WCAG und Schriftgröße: was die Richtlinien verlangen und was nicht

Viele suchen nach einer „WCAG-Mindestschriftgröße“, weil es sich anfühlt, als müsste es eine geben. Die WCAG 2.0, 2.1 und 2.2 legen keine Mindestschriftgröße fest. Kein Erfolgskriterium sagt „Fließtext muss mindestens 16 Pixel groß sein“. Was die WCAG verlangen: Menschen können Text vergrößern, das Layout hält das aus, und kleiner Text hat genug Kontrast. Diese Seite ordnet die vier Kriterien, auf die es ankommt, und – klar davon getrennt – die Empfehlungen, die wir zusätzlich geben.

Das ist eine allgemeine Information, keine Rechtsberatung.

Die kurze Antwort

1.4.4 Textgröße ändern: 200 % ohne Verlust

Text, außer Untertiteln und Bildern von Text, lässt sich ohne assistive Technologie und ohne Verlust von Inhalt oder Funktion auf 200 % vergrößern. Testen Sie in der Praxis mit dem Browser-Zoom (Strg/Cmd und +) oder mit der Einstellung für die Textgröße im Browser:

• kein Text wird abgeschnitten oder überlappt anderen Text;
• Buttons, Menüs und Formularfelder funktionieren weiter;
• nichts Wichtiges verschwindet hinter einem fixierten Header.

Typische Fehler: Text in Boxen mit fester Höhe, font-size nur in vw-Einheiten, und ein maximum-scale=1 oder user-scalable=no im Viewport-Meta-Tag, das Zoomen am Smartphone verhindert.

1.4.10 Umbruch: 320 CSS-Pixel

Inhalte müssen bei einer Breite von 320 CSS-Pixeln lesbar sein – das entspricht 400 % Zoom in einem 1280 Pixel breiten Fenster –, ohne dass man in zwei Richtungen scrollen muss. Lange Texte sollen umbrechen; um eine Zeile zu lesen, darf kein horizontales Scrollen nötig sein. Ausnahmen gibt es für Inhalte, die ein zweidimensionales Layout brauchen, etwa Karten, Datentabellen und komplexe Diagramme.

1.4.12 Textabstand

Menschen mit Sehschwäche oder Legasthenie ändern Abstände oft mit einer Browser-Erweiterung oder einem eigenen Stylesheet. Die WCAG verlangen, dass nichts verloren geht, wenn sie Folgendes einstellen:

• Zeilenhöhe mindestens das 1,5-Fache der Schriftgröße;
• Abstand nach Absätzen mindestens das 2-Fache der Schriftgröße;
• Zeichenabstand mindestens das 0,12-Fache der Schriftgröße;
• Wortabstand mindestens das 0,16-Fache der Schriftgröße.

Sie müssen diese Werte nicht in Ihrem Design verwenden. Ihr Design muss nur weiter funktionieren, wenn jemand sie anwendet. Die üblichen Fehler sind feste Höhen bei Buttons und Karten und Text, der mit overflow: hidden abgeschnitten wird.

1.4.3 und die Definition von großem Text

Die einzige Stelle, an der eine Schriftgröße in einem Kriterium der Stufe AA vorkommt, ist die Definition von großem Text, die die Kontrastregel nutzt:

• Großer Text: mindestens 18 Punkt (24 CSS-Pixel) in normaler Stärke oder mindestens 14 Punkt fett (etwa 18,66 CSS-Pixel).
• Großer Text braucht ein Kontrastverhältnis von mindestens 3:1, jeder andere Text 4,5:1.
• Auf Stufe AAA (1.4.6) gelten 7:1 und 4,5:1.

Die Größe ändert also den nötigen Kontrast, nicht, ob der Text erlaubt ist. Ein dünnes, graues 13-px-Preisetikett ist der klassische Fehler im Shop: klein, hell und kontrastarm zugleich. Farbpaare prüfen Sie mit unserem Kontrastrechner.

Verwandte Kriterien

• 1.4.5 Bilder von Text (AA): Nutzen Sie echten Text statt Text im Bild, damit er sich zoomen, umfärben und vorlesen lässt. Banner mit dem Rabatttext im Bild sind ein häufiger Fehler.
• 1.4.8 Visuelle Präsentation (AAA): verlangt unter anderem Textblöcke von höchstens 80 Zeichen Breite und Text, der sich ohne horizontales Scrollen auf 200 % vergrößern lässt. Das ist AAA und gesetzlich nicht verlangt, aber als Orientierung für lange Texte nützlich.
• 2.5.8 Zielgröße (AA): betrifft nicht den Text, aber kleine Textlinks in einem Menü verfehlen oft auch die Zielgröße von 24 × 24 Pixeln.

Blocksatz, zentrierter und fetter Text, Schriftarten und Zeilenlänge

Diese Fragen kommen oft. Die meisten Antworten stehen in einem Kriterium der Stufe AAA, 1.4.8 Visuelle Präsentation. AAA wird weder von Gesetzen noch von einer Konformitätsaussage auf Stufe AA verlangt; verstehen Sie alles ab 1.4.8 daher als Empfehlung.

Blocksatz

1.4.8 verlangt, dass es einen Mechanismus gibt, mit dem Textblöcke nicht im Blocksatz stehen (also nicht am linken und am rechten Rand ausgerichtet sind). Das W3C begründet es so: Der Blocksatz dehnt die Wortabstände ungleichmäßig und kann „Lücken-Flüsse“ („rivers of white“) erzeugen, die sich über die Seite ziehen und das Lesen für manche Menschen mit kognitiven Einschränkungen erschweren, manchmal unmöglich machen. Auf Stufe AA ist Blocksatz kein Fehler. Unsere Empfehlung: Richten Sie Fließtext linksbündig aus (in Sprachen mit Schreibrichtung von rechts nach links rechtsbündig), besonders auf schmalen Bildschirmen, wo der Blocksatz die größten Lücken erzeugt.

Zeilenlänge

1.4.8 verlangt außerdem, dass sich die Breite von Textblöcken auf höchstens 80 Zeichen oder Glyphen begrenzen lässt (40 bei Chinesisch, Japanisch und Koreanisch). Dasselbe Kriterium verlangt einen Zeilenabstand von mindestens eineinhalb Zeilen innerhalb von Absätzen, einen Absatzabstand von mindestens dem 1,5-Fachen des Zeilenabstands, vom Nutzer wählbare Vorder- und Hintergrundfarben und Text, der sich in einem Vollbildfenster ohne horizontales Scrollen auf 200 % vergrößern lässt. Den Mechanismus kann der Browser bereitstellen; die Seite muss keine eigenen Bedienelemente bauen.

Zentrierter Text

Kein WCAG-Kriterium erwähnt zentrierten Text. Unsere Empfehlung: Zentrieren Sie ruhig kurze Überschriften und Buttons, aber lassen Sie Absätze, Listen und Formularbeschriftungen linksbündig. Langer zentrierter Text hat einen ausgefransten linken Rand, sodass Lesende den Anfang jeder Zeile suchen müssen, was bei 200 % Zoom und für Menschen mit Legasthenie schwerer fällt.

Fetter Text

Fettschrift kommt in den WCAG an zwei Stellen vor:

• Großer Text: 14 Punkt fett (etwa 18,66 CSS-Pixel) gilt bereits als großer Text und braucht auf Stufe AA nur 3:1 Kontrast statt 4,5:1 (1.4.3).
• Bedeutung: Trägt Fettschrift oder ein anderer Textstil Bedeutung – „fett gesetzte Felder sind Pflichtfelder“, ein fett gesetztes Wort als Warnung –, muss diese Bedeutung auch im Markup oder im Text verfügbar sein. Das W3C führt die Verwendung von Änderungen der Textdarstellung zur Vermittlung von Informationen ohne passendes Markup oder passenden Text als Fehler F2 von 1.3.1 Info und Beziehungen auf. Verwenden Sie <strong> oder <em> für Hervorhebungen und schreiben Sie „Pflichtfeld“ in Worten.

Die WCAG begrenzen nicht, wie viel Fettschrift Sie einsetzen. Lange fett gesetzte Passagen sind schwerer zu überfliegen; sparen Sie sie für Hervorhebungen auf.

„Normale“ Textgröße

Die WCAG definieren „normalen Text“ nicht. Sie definieren großen Text (large scale text), und alles Kleinere nennen Prüfwerkzeuge normalen Text: alles unter 18 Punkt (24 CSS-Pixel) in normaler Stärke oder unter 14 Punkt fett. Normaler Text braucht auf Stufe AA ein Kontrastverhältnis von mindestens 4,5:1, großer Text 3:1. Eine Mindestgröße für normalen Text gibt es weiterhin nicht; siehe die Tabelle oben.

Schriftarten und Schriftart-Prüfer

Die WCAG nennen oder verbieten keine Schriftart und stellen keine Anforderung an die Schriftfamilie. Entscheidend ist, dass Ihre Schrift mit den obigen Kriterien funktioniert: Sie lässt sich auf 200 % zoomen, funktioniert weiter, wenn die Abstände vergrößert werden (1.4.12), und hat in ihrer Stärke genug Kontrast – dünne Schriften können blasser wirken, als ihre Farbe vermuten lässt, was das W3C in Understanding 1.4.3 anmerkt. Unsere Empfehlung: Wählen Sie eine Familie mit deutlich unterscheidbaren Zeichen (I, l und 1; O und 0), einer normalen Stärke, die nicht haardünn ist, und voller Unterstützung für die Sprachen Ihrer Website.

Ein „WCAG-Schriftart-Prüfer“ kann eine Schrift nicht freigeben, weil es keine Liste erlaubter Schriften gibt. Was eine automatische Prüfung kann – und was unser WCAG-Checker tut –, ist, den Kontrast jedes Textes gegen die Regel für großen Text zu testen und einen Viewport zu melden, der das Zoomen blockiert. Zeilenlänge, Blocksatz und das Verhalten von Text bei 200 % muss sich ein Mensch ansehen.

Empfehlungen, keine Anforderungen

Die folgenden Werte sind unsere Empfehlungen für gut lesbare Shops und Dienstleistungs-Websites. Sie sind keine WCAG-Anforderungen, und eine Seite fällt nicht durch, weil sie andere Werte nutzt.

• Fließtext um 16 px. Das ist die Standardschriftgröße gängiger Browser. Deutlich kleinerer Fließtext lässt den 200-%-Zoom mehr Arbeit machen.
• Relative Einheiten (rem, em) für Schriftgrößen und Zeilenhöhen, damit die im Browser eingestellte Textgröße respektiert wird.
• Zeilenhöhe von 1,4–1,6 für Fließtext und eine Zeilenlänge von etwa 50–80 Zeichen.
• Keine festen Höhen bei Elementen, die Text enthalten; lassen Sie sie wachsen.
• Zoom nicht blockieren im Viewport-Meta-Tag.
• Kleingedrucktes mit Sorgfalt. Rechtliche Hinweise, Grundpreise und Formularhinweise liest jeder; geben Sie ihnen denselben Kontrast wie dem Fließtext.

So prüfen Sie Schriftgröße und Zoom

1. Automatische Prüfung. Unser kostenloser WCAG-Check findet zu geringen Kontrast, einschließlich der Regel für großen Text, und einen Viewport, der Zoomen blockiert. Ob ein gezoomtes Layout noch funktioniert, kann er nicht beurteilen.
2. Auf 200 % zoomen. Nutzen Sie den Browser-Zoom und gehen Sie Startseite, Produktseite, Warenkorb und Kasse durch.
3. Schmales Fenster oder 400 % Zoom. Prüfen Sie, ob Text umbricht und nichts horizontales Scrollen braucht.
4. Textabstand. Wenden Sie die Werte aus 1.4.12 mit einem Bookmarklet oder mit dem Textabstand-Werkzeug unserer Browser-Erweiterung an und suchen Sie nach abgeschnittenem Text.

Den vollständigen Ablauf beschreibt Barrierefreiheit testen. Unsere Prüfungen sind eine automatische Prüfung, kein vollständiges Audit, und keine Rechtsberatung.

Häufige Fragen

Welche Mindestschriftgröße schreiben die WCAG vor?

Keine. Kein Erfolgskriterium der WCAG 2.0, 2.1 oder 2.2 legt eine Mindestschriftgröße fest. Die WCAG verlangen stattdessen, dass sich Text auf 200 % vergrößern lässt (1.4.4), sich auf schmalen Bildschirmen umbricht (1.4.10), größere Abstände verträgt (1.4.12) und genug Kontrast hat (1.4.3).

Welche Schriftgröße gilt in den WCAG als großer Text?

Mindestens 18 Punkt, also 24 CSS-Pixel, in normaler Stärke, oder mindestens 14 Punkt fett, etwa 18,66 CSS-Pixel. Großer Text braucht auf Stufe AA ein Kontrastverhältnis von 3:1 statt 4,5:1.

Schreiben die WCAG 16 px vor?

Nein. 16 Pixel sind die Standardschriftgröße gängiger Browser und eine sinnvolle Empfehlung für Fließtext, aber keine WCAG-Anforderung. Ein 16-px-Text, der sich nicht zoomen lässt, fällt durch; ein kleinerer Text, der sich gut zoomen lässt, kann bestehen.

Welche Zoomstufe verlangen die WCAG?

Text muss sich ohne Verlust von Inhalt oder Funktion auf 200 % vergrößern lassen (1.4.4). Außerdem müssen sich Inhalte bei einer Breite von 320 CSS-Pixeln – das entspricht 400 % Zoom in einem 1280 Pixel breiten Fenster – ohne Scrollen in zwei Richtungen anpassen (1.4.10).

Soll ich px, em oder rem für Schriftgrößen nutzen?

Die WCAG schreiben keine Einheiten vor. Relative Einheiten wie rem und em machen es leichter, die im Browser eingestellte Textgröße zu respektieren, deshalb empfehlen wir sie; px allein ist aber kein Fehler.

Erlauben die WCAG Blocksatz?

Auf Stufe AA ja. Nur das AAA-Kriterium 1.4.8 Visuelle Präsentation verlangt, dass es einen Mechanismus gibt, mit dem Textblöcke nicht im Blocksatz stehen, weil ungleichmäßige Wortabstände „Lücken-Flüsse“ im Text erzeugen. AAA ist eine Empfehlung, keine gesetzliche Anforderung.

Quellen

• W3C, WCAG 2.2 (1.4.3, 1.4.4, 1.4.10, 1.4.12 und die Definition von großem Text): https://www.w3.org/TR/WCAG22/
• W3C, Understanding 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html
• W3C, Understanding 1.4.10 Reflow: https://www.w3.org/WAI/WCAG22/Understanding/reflow.html
• W3C, Understanding 1.4.8 Visual Presentation: https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html
• W3C, Understanding 1.3.1 Info and Relationships: https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html
• W3C, Understanding 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html