Barrierefreie Textgestaltung: WCAG und Empfehlungen

Das BFSG gilt seit dem 28. Juni 2025 für bestimmte Produkte und Dienstleistungen für Verbraucher. Ob Dein Angebot erfasst ist, erklärt die BFSG-Check-Lösung. Die folgenden Prüfungen helfen Dir, technische Barrieren auf Deiner Website zu finden.

Lesbare Texte helfen Menschen, Inhalte zu verstehen und sich auf Deiner Website zurechtzufinden.

Barrierefreiheit ist kein direkter Google-Rankingfaktor (Google Search Central). Klare Überschriften helfen Menschen bei der Orientierung und Suchmaschinen beim Einordnen der Inhalte.

1. Einfache Sprache & klare Ausdrucksweise für bessere Barrierefreiheit

Vermeide zu viel Fachsprache für das breite Publikum. Klare, einfache Sprache ist das Fundament barrierefreier Kommunikation.

• Kurze Sätze: Maximal 15-20 Wörter pro Satz für bessere Verständlichkeit.

• Einfache Begriffe: Fachbegriffe vermeiden oder direkt erklären.

• Direkte Ansprache: Sprich Deine Leser direkt an, statt unpersönliche Formulierungen zu verwenden.

Beispiel für einfache Sprache & klare Ausdrucksweise:

• Komplex: "Unsere innovative Weblösung ermöglicht eine holistische Implementierung barrierefreier Standards."

• Barrierefrei: "Unsere Lösung hilft Dir, Deine Website einfach barrierefrei zu machen."

2. Barrierefreie Schriftgröße & lesefreundliches Layout

Texte müssen visuell zugänglich sein – unabhängig vom Endgerät oder der Sehkraft.

WCAG legt keine Mindestschriftgröße fest. Nach 1.4.4 muss sich Text bis auf 200 % vergrößern lassen, ohne dass Inhalt oder Funktionen verloren gehen; Untertitel und Bilder von Text sind ausgenommen. 16 px für Fließtext ist eine Gestaltungsempfehlung, keine WCAG-Vorgabe.

Serifenlose Schriftarten wie Arial, Verdana oder Roboto verbessern die Lesbarkeit.

Ein Zeilenabstand von 1,5 kann ein sinnvoller Ausgangspunkt sein. WCAG 1.4.12 verlangt, dass benutzerdefinierte Textabstände ohne Inhalts- oder Funktionsverlust möglich sind; diese Werte sind keine vorgeschriebenen Standardabstände.

Beispiel für optimale Textgestaltung:

• Schlecht: Lange, unstrukturierte Absätze ohne Zwischenüberschriften.

• Gut: Übersichtlich gegliederte Absätze mit Bullet Points und Hervorhebungen.

3. Farbkontraste & visuelle Zugänglichkeit nach WCAG 2.1

Ein schlechter Kontrast macht Inhalte unlesbar – besonders für Menschen mit Sehschwäche oder Farbfehlsichtigkeit.

• Hohes Kontrastverhältnis (mind. 4,5:1 gemäß WCAG 2.1) für gute Lesbarkeit.

Keine alleinige Farbkennzeichnung (z. B. Rot/Grün) für farbenblinde Nutzer – Symbole & Text ergänzen.

Hintergrundfarben vermeiden, die das Lesen erschweren (z. B. hellgrauer Text auf weißem Hintergrund).

Beispiel für barrierefreie Farbgestaltung:

• Schlecht: Hellgrauer Text auf weißem Hintergrund → schwer lesbar.

• Gut: Dunkelblauer Text auf weißem Hintergrund → hoher Kontrast, leicht lesbar.

4. Strukturierte Inhalte & visuelle Gliederung für bessere Orientierung

Struktur bringt Übersicht – für Leser:innen und Suchmaschinen.

Hierarchische Überschriften (H1-H3) für bessere Navigation.

Listen & Absätze statt langer Textblöcke für einfache Erfassung.

Alternativtexte (Alt-Tags) für Bilder & Infografiken, damit Screenreader sie auslesen können.

Beispiel für strukturierte Inhalte & visuelle Gliederung:

• Schlecht: "Hier sind unsere Produkte. Sie sind modern, flexibel und helfen Dir."

• Gut:

  • Unsere Produkte
    • Modern: Immer auf dem neuesten Stand.
    • Flexibel: Anpassbar an Deine Bedürfnisse.
    • Barrierefrei: Konform mit den WCAG 2.1 Standards.

Checkliste: Barrierefreie Lesbarkeit & Textgestaltung

• Schriftgröße: 16 px Fließtext als Empfehlung; Vergrößerung auf 200 % prüfen.

• Schriftart: Gut lesbare, serifenlose Schriftarten bevorzugen (z.B. Arial, Verdana, Lato).

• Textabstände: Überschreiben mit Zeilenhöhe 1,5, Absatzabstand 2em, Zeichenabstand 0,12em und Wortabstand 0,16em darf keine Inhalte oder Funktionen verlieren (1.4.12).

• Absatzabstand: Deutlich größer als der Zeilenabstand (mind. 2x Schriftgröße empfohlen).

• Zeilenlänge: Ideal sind 50–75 Zeichen pro Zeile.

• Textausrichtung: Linksbündiger Flattersatz ist am besten lesbar.

• Kontrast: Mindestkontrast von 4,5:1 für normalen Text (WCAG AA).

• Kein reiner Blocksatz: Erzeugt unregelmäßige Wortabstände.

• Hervorhebungen: Sparsam einsetzen, primär fett statt kursiv oder GROSSBUCHSTABEN.

• Verständliche Sprache: Klare Formulierungen, kurze Sätze, Vermeidung von Fachjargon.

Weitere Kriterien findest Du im WCAG-Hub. Nutze das Accessibility Audit für maschinell prüfbare Befunde und ergänze manuelle Tests.