Prüfpunkt 1.4.3Stufe AAFarbe und Kontrast
Kontrast prüfen: welche Werkzeuge gibt es?
Für zwei Farbwerte genügt ein kostenloses Werkzeug im Browser: Der Contrast Checker von WebAIM nennt das Verhältnis und sagt je Schwelle, ob es reicht. Für eine ganze Seite zeigen die Entwicklerwerkzeuge von Chrome den Wert direkt am Text und schlagen eine passende Farbe vor. Nur Text auf Fotos und Farbverläufen misst keines von beiden; dort hilft ein Werkzeug, das den Hintergrund Bildpunkt für Bildpunkt liest.
WebAIM Contrast Checker: zwei Farben, ein Urteil
Sie geben Vordergrund und Hintergrund als Hex-Wert ein, wahlweise mit Transparenz, oder nehmen die Farbe mit der Pipette vom Bildschirm; ein Regler hellt jede Farbe auf oder dunkelt sie ab. Das Werkzeug zeigt das Kontrastverhältnis und daneben, ob es die Stufe AA und AAA für normalen Text, für großen Text und für Grafiken und Bedienelemente erreicht. Die Schwellen nennt die Seite selbst: 4,5:1 und 3:1 für AA, 7:1 und 4,5:1 für AAA, 3:1 für Grafiken und Formularränder. Jedes Ergebnis hat einen festen Link, den Sie Ihrer Agentur schicken können; mit dem Zusatz &api liefert derselbe Link das Ergebnis als Datensatz. Ein Lesezeichen-Skript bringt den Checker auf jede Seite.
Chrome: der Wert steht am Text
In den Entwicklerwerkzeugen von Chrome zeigt der Auswahlmodus beim Überfahren eines Textes das Kontrastverhältnis an, mit einem Warnzeichen, wenn es die Schwelle nicht erreicht. Klicken Sie im Bereich Styles auf die Textfarbe, öffnet sich die Farbauswahl mit dem Verhältnis und der Angabe, ob AA und AAA erreicht sind. Zwei Linien in der Farbfläche markieren die Grenzen; eine Farbe unterhalb der Linie erfüllt die jeweilige Stufe. Der Knopf „Use suggested color“ übernimmt eine Farbe, die die Schwelle erreicht. So prüfen Sie eine Seite Text für Text, ohne einen Wert abzutippen.
Sehen, wie Ihre Besucher sehen
Im Reiter Rendering derselben Entwicklerwerkzeuge täuscht Chrome Sehschwächen vor; die Dokumentation beschreibt es als Blick auf die Seite, wie Ihre Nutzer sie sehen. Dort lässt sich auch die Systemeinstellung für mehr oder weniger Kontrast vortäuschen (prefers-contrast). Wer die Seite so betrachtet, erkennt, welche Stellen zuerst verschwimmen, bevor ein Werkzeug sie meldet.
Was kein Werkzeug sieht
Alle genannten Werkzeuge rechnen mit den Farbwerten aus dem Stylesheet. Liegt Text auf einem Foto oder einem Farbverlauf, gibt es keinen einzelnen Hintergrundwert, und das Werkzeug meldet nichts oder etwas Falsches. Der Artikel zum Farbkontrast beschreibt, wie die Messung des Prüfservice solche Stellen fotografiert und den Hintergrund Bildpunkt für Bildpunkt auswertet. Ob Text als groß gilt, entscheiden Schriftgröße und Schriftstärke; der Checker von WebAIM zeigt beide Schwellen und überlässt Ihnen die Einordnung.
Mehr zu diesem Thema
- Welcher Farbkontrast ist für Text auf Websites vorgeschrieben?Normaler Text braucht mindestens 4,5:1 Kontrast zum Hintergrund, großer Text 3:1. Hellgrau auf Weiß fällt fast immer durch und bleibt unlesbar.
- Warum verlangt WCAG genau 4,5:1 Kontrast?4,5:1 ist eine Rechnung: 3:1 aus Normen für Bildschirmarbeit, mal 1,5 für eine Sehschärfe von 20/40, die das W3C als typisch für Menschen um 80 nennt.
- Markenfarbe zu hell für Text: was tun?Eine helle Markenfarbe bleibt: auf Flächen, Rahmen und Symbolen. Der Text darauf wird dunkel, und für Text in Markenfarbe gibt es eine dunklere Schwester.
Weiter im Prüfbereich Barrierefreiheit
- Wie stelle ich meine Website auf barrierefrei um?Was WordPress, TYPO3, Drupal, Joomla, Shopify und Wix zur Barrierefreiheit zusagen und was Vorlage, Erweiterungen und Redaktion selbst leisten.
- Wie viele meiner Besucher erreicht meine Website nicht?Fast ein Viertel der Erwachsenen in der EU ist im Alltag eingeschränkt. Die Zahlen für Österreich, Deutschland und die EU und was sie für Ihre Website heißen.
- Muss sich Text auf einer Website auf 200 Prozent vergrößern lassen?Ja. Besucher müssen Text per Browser-Zoom verdoppeln können, ohne dass Inhalte verloren gehen. Zoom-Sperren am Handy erfüllen die Regel nicht.
- Warum ist echter Text auf Websites besser als Text im Bild?Text als Bild lässt sich weder vorlesen noch vergrößern noch von Google durchsuchen. Echter Text kann alles davon und ist leichter zu pflegen.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
