Barrierefreie Lesbarkeit bezeichnet die Gestaltung von Texten mit ausreichender Schriftgröße, geeignetem Zeilenabstand, skalierbarer Darstellung und angemessener Zeilenlänge, sodass Menschen mit Sehbeeinträchtigungen, Legasthenie oder kognitiven Einschränkungen Inhalte ohne Hilfsmittel oder mit minimaler Anpassung lesen können.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Accessibility · Niveau: Fortgeschritten
Was umfasst barrierefreie Schriftgestaltung?
Schrift und Lesbarkeit sind zentrale Bestandteile der visuellen Barrierefreiheit. Während Farbkontrast & Accessibility – AA vs. AAA-Standards das Helligkeitsverhältnis zwischen Text und Hintergrund regelt, befassen sich Schriftgrößen- und Lesbarkeitstandards mit den Eigenschaften des Textes selbst: Größe, Skalierbarkeit, Abstände und Schriftauswahl.
WCAG – Web Content Accessibility Guidelines im Überblick 2.2 enthalten mehrere direkt auf Lesbarkeit bezogene Erfolgskriterien, die unter dem Prinzip Wahrnehmbar (P) und Verständlich (U) zusammengefasst sind.
Erklärung
Mindestschriftgrößen
Die WCAG – Web Content Accessibility Guidelines im Überblick legen keine absolute Mindestschriftgröße in Pixeln fest. Stattdessen werden die Kontrastverhältnisse nach Schriftgröße differenziert:
- Normaltext (unter 18pt / 24px normale Schrift oder unter 14pt / ~18,67px fette Schrift): Kontrastverhältnis mindestens 4,5:1 (AA) bzw. 7:1 (AAA)
- Großer Text (ab 18pt / 24px oder 14pt fett): Kontrastverhältnis mindestens 3:1 (AA) bzw. 4,5:1 (AAA)
Die Schwelle bei 18pt (24px) für normalen Text und 14pt (~18,67px) für fetten Text basiert auf Studien zur Leseperformance bei verringerter Sehschärfe.
In der Praxis empfehlen Accessibility-Experten als Richtwert:
- Fließtext: Mindestens 16px (entspricht 1rem bei Standard-Browsereinstellungen)
- Sekundärer Text (Labels, Captions): Mindestens 12–14px, bei ausreichendem Kontrast
- Kleinstdruck (Legaltext): Möglichst vermeiden; wenn nötig, mindestens 12px mit maximalen Kontrastwerten
Skalierbarkeit: Das 200-%-Gebot
WCAG Kriterium 1.4.4 (Text Resize, Stufe AA) verlangt, dass Text ohne Verlust an Inhalt oder Funktion auf 200 % vergrößert werden kann. Kriterium 1.4.10 (Reflow, Stufe AA) ergänzt: Inhalte müssen bei einer Viewport-Breite von 320 CSS-Pixeln ohne horizontales Scrollen nutzbar sein – was dem 400%-Zoom auf einem 1280px-Breit-Monitor entspricht.
Wichtig für die Implementierung:
- Schriftgrößen in
remoderemstattpxdefinieren: Dann respektieren sie die Browser-Standardgröße des Nutzers. - Feste Höhen für Textcontainer vermeiden:
height: 100pxwird zum Problem, wenn der Text auf 200 % vergrößert wird und aus dem Container herausläuft. overflow: hiddenauf Textcontainern vermeiden.
```css / Empfohlen: / body { font-size: 1rem; } / = Browser-Standard (meist 16px) / h1 { font-size: 2rem; }
/ Problematisch: / body { font-size: 14px; } / ignoriert Nutzer-Browsereinstellungen / ```
Zeilenabstand und Textsatz
WCAG Kriterium 1.4.12 (Text Spacing, Stufe AA) definiert Mindestabstände, die Nutzer ohne Verlust an Inhalt oder Funktion anpassen können müssen. Die Anforderungen lauten, dass die Seite lesbar bleiben muss, wenn folgende Werte gesetzt werden:
- Zeilenhöhe (line-height): mindestens 1,5 × Schriftgröße
- Abstand nach Absätzen: mindestens 2 × Schriftgröße
- Buchstabenabstand (letter-spacing): mindestens 0,12 × Schriftgröße
- Wortabstand (word-spacing): mindestens 0,16 × Schriftgröße
Dies bedeutet nicht, dass diese Werte Standard sein müssen, sondern dass Nutzer sie anpassen können müssen, ohne dass der Inhalt bricht (z. B. durch Text-Clipping oder überlappende Elemente).
Empfehlungen für gute Standard-Werte:
- Zeilenhöhe für Fließtext: 1,5–1,8
- Zeilenlänge: 45–75 Zeichen pro Zeile (optimale Lesbarkeit); maximal 80 Zeichen
Schriftauswahl und Lesbarkeit
Die WCAG – Web Content Accessibility Guidelines im Überblick machen keine Vorgaben zu Schriftarten selbst. Dennoch gibt es klare Empfehlungen aus der Forschung:
Serifenlose Schriften vs. Serifenschriften: Für Bildschirme werden serifenlose Schriften (Sans-Serif) wie Inter, Roboto oder Open Sans häufig empfohlen, da sie bei niedrigen Auflösungen klarer lesbar sind. Bei hochauflösenden Displays (Retina) sind Serifenschriften wie Georgia ebenfalls gut lesbar.
Dyslexie-freundliche Schriften: Schriften wie OpenDyslexic (kostenlos) oder Lexie Readable wurden speziell für Menschen mit Legasthenie entwickelt, mit bewusst ungleichmäßigen Buchstabenformen zur besseren Unterscheidbarkeit. Der wissenschaftliche Nachweis ihrer Überlegenheit gegenüber gut gesetzten Standard-Schriften ist umstritten (Rello & Baeza-Yates, 2013), aber sie werden von betroffenen Nutzern positiv aufgenommen.
Abstände innerhalb von Wörtern: Zu enge Buchstabenabstände (tracking) erschweren das Lesen besonders bei Legasthenie und Sehschwäche. Negative Tracking ist für barrierefreie Texte zu vermeiden.
Textgestaltung für kognitive Accessibility
Über technische Standards hinaus empfehlen Inclusive Design – Microsofts 3 Prinzipien und das WCAG-Supplement Making Content Usable for People with Cognitive and Learning Disabilities (W3C, 2021):
- Kurze, klare Sätze (Flesch-Kincaid-Lesbarkeitsindex berücksichtigen)
- Absatzlänge auf 3–5 Sätze begrenzen
- Bullet-Points und Überschriften zur Gliederung nutzen
- Keine Texte in Großbuchstaben (Versalien) für längere Passagen – erschwert Lesbarkeit
- Ausgerichteten Text (Blocksatz) mit caution einsetzen: ungleichmäßige Wortabstände können Legasthenie-Symptome verstärken
Beispiele
Problematischer Code:
``css .card { height: 120px; overflow: hidden; } .card p { font-size: 13px; line-height: 1.2; } ``
Wenn ein Nutzer den Browser auf 200 % zoomt, wird der Text abgeschnitten und die Karte zeigt unvollständige Inhalte.
Barrierefrei:
``css .card { min-height: 120px; } /* min-height statt height */ .card p { font-size: 0.875rem; line-height: 1.6; } /* rem + großzügige Zeilenhöhe */ ``
In der Praxis
Im Mediendesign sollte das Design-System explizite Typografie-Token definieren, die WCAG-Konformität dokumentieren:
body-text: 16px/1rem, line-height: 1.6, #333 auf #fff → 12,6:1 Kontrast ✓caption: 14px/0.875rem, line-height: 1.5, #595959 auf #fff → 7:1 Kontrast ✓disclaimer: 12px/0.75rem, line-height: 1.5, #333 auf #fff → nur AA für Großtext
Vergleich & Abgrenzung
Schriftgröße vs. [Farbkontrast & Accessibility – AA vs. AAA-Standards](/wiki/mediendesign-digitale-medien/accessibility/farbkontrast-accessibility/): Kontrast und Schriftgröße sind beide für Lesbarkeit wichtig, aber unabhängige WCAG-Kriterien. Ein kleiner Text mit hohem Kontrast kann immer noch schlecht lesbar sein.
Lesbarkeit vs. Verständlichkeit (WCAG Kriterium 3.1): Verständlichkeit (WCAG 3.1) betrifft die sprachliche Komplexität des Textes; Lesbarkeit im hier behandelten Sinne betrifft die typografisch-visuelle Zugänglichkeit.
Häufige Fragen (FAQ)
Gilt die 200-%-Regel auch für responsive Designs? Ja. Browser-Zoom von 200 % und responsive Breakpoints sind unterschiedliche Mechanismen. Responsive Design allein erfüllt nicht das 200-%-Gebot, wenn Texte in px gesetzt sind.
Sind Icon-Fonts barrierefrei? Icon-Fonts haben bekannte Accessibility-Probleme: Sie werden von Screen Reader – Barrierefreiheit für blinde und sehbehinderte Nutzer oft als Buchstaben vorgelesen. SVG mit aria-hidden="true" und sichtbare Textbeschriftungen oder ARIA-Labels – Zugängliche Rich Internet Applications sind vorzuziehen.
Verwandte Einträge
- Farbkontrast & Accessibility – AA vs. AAA-Standards
- WCAG – Web Content Accessibility Guidelines im Überblick
- Accessibility – Grundlagen digitaler Barrierefreiheit
- Inclusive Design – Microsofts 3 Prinzipien
- Barrierefreie Formulare – Labels, Fehler & Bestätigung
Weiterführend
- W3C WAI: Understanding Success Criterion 1.4.4: Resize Text. WCAG 2.2, 2023.
- W3C WAI: Understanding Success Criterion 1.4.12: Text Spacing. WCAG 2.2, 2023.
- Rello, Luz / Baeza-Yates, Ricardo: Good Fonts for Dyslexia. ASSETS '13: Proceedings of the 15th International ACM SIGACCESS Conference, 2013.
- Seeman-Horwitz, Lisa et al.: Making Content Usable for People with Cognitive and Learning Disabilities. W3C Working Group Note, 2021.
- Tinker, Miles Albert: Legibility of Print. Iowa State University Press, 1963 (Klassiker der Lesbarkeitforschung).
