Ihr Text sollte für alle lesbar sein

Es ist wichtig, dass der Text sichtbar und lesbar ist. Wenn Sie möchten, dass die Besucher Ihren Text verstehen, dann müssen sie ihn lesen können.

Ein guter Textkontrast sorgt dafür, dass jeder den Text auf dem Hintergrund sehen kann.

Nicht jeder sieht die Farbe auf die gleiche Weise. WCAG definiert in den WCAG 2.1 AA-Richtlinien bestimmte Kontrastanforderungen, mit denen sichergestellt wird, dass der Text für alle lesbar ist. Befolgen Sie diese Anforderungen und unsere Best Practices für Kontrast, um Kontrastprobleme zu beheben oder zu vermeiden.

Ally verwendet die Kontrastanforderungen, um sicherzustellen, dass genügend Kontrast zwischen Textfarbe und Hintergrundfarbe vorhanden ist. Schlechter Textkontrast stellt ein erhebliches Problem dar. Erhebliche Probleme sind nicht schwerwiegend, sollten jedoch behoben werden.

Ally für die Suche nach Text mit schlechtem Kontrast verwenden

Nutzen Sie den Bericht zur Barrierefreiheit von Ally, um Probleme mit der Barrierefreiheit auf Ihrer Website zu erkennen und zu beheben. Verwenden Sie den für den Bericht bereitgestellten Link und melden Sie sich an. Öffnen Sie den Bericht und schauen Sie sich die Liste der Probleme in der Tabelle Probleme bei der Barrierefreiheit an.

Die Tabelle „Probleme bei der Barrierefreiheit“ befindet sowohl auf der Registerkarte „Übersicht“ als auch auf der Registerkarte „Domäne“. Beginnen Sie auf der Registerkarte „Domäne“, um Probleme für eine Domäne anzuzeigen. 

Text mit schlechtem Kontrast stellt ein erhebliches Problem dar. Verwenden Sie die Registerkarte Erheblich in der Tabelle Probleme bei der Barrierefreiheit, um die Liste der erheblichen Probleme anzuzeigen. Wählen Sie die Probleme aus, die den Kontrast betreffen.

Wenn Sie mit der Registerkarte Übersicht beginnen, wählen Sie das Problem und dann die Domäne mit dem Problem aus.

Kontrastprobleme können in der Liste mit Dokument oder HTML beginnen.

Wählen Sie in der Liste der Kontrastprobleme in der Domäne den Indikator für die Bewertung neben dem Element mit dem Problem aus. Das Feld für Inhaltseditor-Feedback wird geöffnet.

Vorschau des Texts mit schlechtem Kontrast anzeigen

Das Feedback-Feld von Ally zeigt Ihnen eine Vorschau der Inhalte sowie detailliertes Feedback und Hilfestellung für die Behebung von Problemen mit der Barrierefreiheit an. Mit der Vorschau können Sie den Text mit schlechtem Kontrast anzeigen.

In der Vorschau wird hervorgehoben, wo im Dokument spezifische Probleme mit der Barrierefreiheit vorliegen. Hervorhebungen zeigen jedes Vorkommnis eines bestimmten Problems einzeln an. Wenn Ihr Text beispielsweise einen schlechten Kontrast aufweist, zeigen Ihnen die Hervorhebungen jede Stelle mit diesem spezifischen Problem.

Vorschau-Tools

Verwenden Sie die Vorschau-Tools, um die Probleme in Ihrem Dokument zu untersuchen.

  • Navigieren Sie von Seite zu Seite durch die Vorschau.
  • Erfahren Sie, wie oft ein bestimmtes Problem vorkommt.
  • Springen Sie zwischen den Hervorhebungen von Problemen hin und her.
  • Zeigen Sie die Hervorhebungen an oder blenden Sie sie aus.
  • Vergrößern oder verkleinern Sie die Vorschauinhalte.
  • Wenn das Problem ein angehängtes Dokument betrifft, laden Sie die Originaldatei herunter.

Anweisungen von Ally zum Beheben von schlechtem Kontrast befolgen

Ally geht davon aus, dass Sie über Grundkenntnisse in HTML und der Verwendung Ihres Content Management Systems (CMS) verfügen. Um den Anweisungen zu folgen, müssen Sie wissen, wie eine Webseite im HTML- oder Quellcode in Ihrem CMS bearbeitet wird.

Ally geht zudem davon aus, dass Sie berechtigt sind, die Farbe auf Ihrer Website zu aktualisieren. Die Farbe ist oft in den Stilvorgaben einer Website definiert und kann das Branding widerspiegeln. Schauen Sie in Ihren Stilvorgaben nach, bevor Sie Änderungen daran vornehmen. 

Neben der Vorschau stellt Ally eine Schritt-für-Schritt-Anleitung zum Beheben des Problems bereit. Das Feedback wird in Ally in Form eines Entscheidungsbaums organisiert. Sie müssen also nur die Anweisungen lesen und die Fragen beantworten. Erfahren Sie, wo das Problem liegt, warum es wichtig ist und wie es angemessen korrigiert werden kann.

Wählen Sie Vorgehensweise zum Einstellen des Kontrasts und befolgen Sie die Anweisungen.

Möglichkeiten zum Heben von Kontrastproblemen

Wenn Text einen schlechten Kontrast aufweist, bedeutet dies, dass der Farbkontrast zwischen dem Text und dem Hintergrund nicht ausreichend ist.

In den Anweisungen von Ally wird beschrieben, wie Sie die Textfarbe ändern können. Sie können außerdem die Hintergrundfarbe ändern. 

Bevor Sie Änderungen vornehmen, überprüfen Sie den Website-Stilleitfaden. Farbe ist oft mit Branding verbunden und sollte mit Vorsicht geändert werden.

In den Anweisungen von Ally wird zudem beschrieben, wie Sie Aktualisierungen im HTML-Quellcode der einzelnen Webseiten vornehmen können. Bei CMS-Systemen kann dies variieren. Einige CMS-Systeme verfügen über einen Rich Text Editor (RTE), der eine benutzerfreundliche Anpassung des Textstils ermöglicht. Mit einem RTE können Sie den vordefinierten Stil für Überschriften, Farben, Schriftarten, Bilder usw. auswählen. Allerdings verfügen nicht alle CMS-Systeme über einen RTE. In diesen sind möglicherweise Änderungen des Quellcodes mit HTML erforderlich. Manchmal ist sowohl HTML als auch RTE verfügbar.

Bei wiederkehrenden Kontrastproblemen sollte möglicherweise die Vorlage aktualisiert werden. Für Vorlagenaktualisierungen sind Kenntnisse in HTML und CSS erforderlich. Die Aktualisierungen können von Ihrem Website-Branding abhängen. 

Weitere Informationen über HTML oder CSS finden Sie unter w3schools .

Farbe – HEX oder RGB

HEX und RGB sind unterschiedliche Arten der Farbdefinition.

  • RGB definiert Farbe anhand des Anteils dreier Farben: Rot (R), Grün (G) und Blau (B). Beispielsweise könnte ein Rotton als RGB definiert werden (253, 2, 2).
  • HEX ist ein Hexadezimalwert, der eine Farbe anhand von Werten für Rot, Grün und Blau als Kombination aus sechs Buchstaben und Zahlen definiert. Hexadezimalwerte beginnen mit der Zahl oder einem Hashtag (#). Derselbe Rotton wäre beispielweise als #fd0202 definiert.

Hexadezimalwerte stellen die am häufigsten verwendete Art der Definition von Farben auf Webseiten.

Best Practices für Textkontrast

Es gibt zahlreiche Anpassungsmöglichkeiten, die mit geringem Aufwand die Lesbarkeit des Textes verbessern.

  • Verwenden Sie Schriftarten mit breiten Zeichenstrichen.
  • Verwenden Sie einen Schriftgrad von mindestens 12 px. Bei Schriftarten mit dünnen Zeichenstrichen, verwenden Sie mindestens 16 px.
  • Verwenden Sie „dünne“ Schriftarten nur auf dunklem Hintergrund.
  • Verwenden Sie hellen Text auf dunklem Hintergrund.
  • Verwenden Sie dunklen Text auf hellem Hintergrund.
  • Vermeiden Sie diese Farbkombinationen:
    • Grün und rot
    • Grün und braun
    • Blau und lila
    • Grün und blau
    • Hellgrün und gelb
    • Blau und grau
    • Grün und grau
    • Grün und schwarz

Sie wissen nicht genau, ob Ihr Text ausreichend Kontrast hat?  Verwenden Sie den Colour Contrast Analyser von der Paciello Group, um Ihre Inhalte zu überprüfen.

Warum ist Textkontrast wichtig?

Text mit niedrigem Kontrast kann in vielen Situationen schwer lesbar sein.

  • Bei der Projektion im Kurs
  • Für Teilnehmer mit Farbblindheit
  • Auf einem Mobilgerät bei hellem Licht oder Blendung auf dem Display
  • Auf qualitativ minderwertigen Monitoren

Niedriger Kontrast kann die Augen stark belasten, verursachen, dass Inhalte schwer erkannt und durchsucht werden können, und zu Frustrationen führen.

Guter Kontrast bedeutet, dass jeder den Text deutlich sehen kann und eine bessere Gesamterfahrung beim Lesen Ihrer Inhalte erlebt.