Kontraste & Farbwahl. Gute Lesbarkeit ermöglichen

Kontrastreiche Farbkombinationen machen Texte einfacher lesbar. Das ist bei Sehschwäche wichtig, aber auch bei speziellen Lichtverhältnissen, z. B. unter freiem Himmel am Handy.

Gut lesbar:

  • Hell auf dunkel: ist perfekt.
  • Dunkel auf hell: ist perfekt.
  • Sehr großer Text auf einem Bild: unbedingt auf gute Lesbarkeit überprüfen!

Schlecht lesbar:

  • Grau auf Hellgrau: zu wenig Kontrast.
  • Rot auf Grün: flimmert oder wird gar nicht als Schrift erkannt.
  • Text auf buntem bzw. unruhigem Hintergrund: uneindeutiger Kontrast.

Tool-Tipps zur Überprüfung nach den internationalen Richtlinien (WCAG) findest Du auf der nächsten Seite!

💡 WCAG: Das sind die Web Content Accessibility Guidelines.

Schriftgrößen & Abstände

Auch für Schriftgrößen und Abstände gibt es Regeln. Damit wird eine bessere Verständlichkeit von Web-Content gewährleistet.

  • Die Schrift nicht zu klein wählen – ab 14–16 px für Fließtext.
  • Überschriften groß genug einstellen und eine gut lesbare Schriftart wählen.
  • Genügend Abstand zwischen den Zeilen im Textblock lassen.
  • Keinen zu engen Buchstabenabstand wählen.

Warum ist das wichtig?

→ Für Menschen mit Sehproblemen, Dyslexie oder Konzentrationsschwierigkeiten ist der Text sonst nur schwer zu erfassen.

Icons & Bilder: Barrierefrei einsetzen

Icons und Bilder gehören entweder zu den „dekorativen Bildern“ oder den „inhaltstragenden Bildern“ und müssen im Alt-Text entsprechend behandelt werden.

Auf Social-Media-Plattformen kannst Du eine Bildbeschreibung eingeben, die von Screenreadern vorgelesen wird. Die Bildbeschreibung sollte möglichst genau wiedergeben, was auf dem Bild zu sehen ist.

Besondere Herausforderung: Fokussiere die Inhalte, die für eine sehende Person direkt erkennbar sind. Dazu können z. B. die Namen bekannter Personen gehören oder visuelle Merkmale abgebildeter Personen (wie eine besondere Frisur, Kleidung oder auffällige Dekoration).

Wenn ein Icon eine besondere Aussage hat, die nicht im Text erklärt wird, sollte auch dieses Icon im Alt-Text beschrieben (nicht erklärt) werden.

Ganz wichtig: Bleib neutral in Deiner Beschreibung.