Textfarbkontrast aktualisieren
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.
Tipp
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.
Tipp
Wenn Sie mit der Registerkarte Übersicht beginnen, wählen Sie das Problem und dann die Domäne mit dem Problem aus.
Tipp
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
Wichtig
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.
Wichtig
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.
Wichtig
Schauen Sie in Ihren Stilvorgaben nach, bevor Sie Änderungen daran vornehmen. Die Farbe hängt oft mit dem Branding zusammen 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.
Tipp
Weitere Informationen über HTML und 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
Tipp
Sie sind sich nicht sicher, ob Ihr Text genügend Kontrast hat? Verwenden Sie den Farbkontrast-Analyser von The 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 klar sehen kann und ein besseres Gesamterlebnis beim Lesen Ihrer Inhalte hat.