Textkontrast lässt sich berechnen. Für normalen Text verlangt WCAG 2.2 auf Stufe AA grundsätzlich mindestens 4,5:1, für großen Text 3:1. Damit ist aber noch nicht die gesamte Lesbarkeit geprüft: Größe, Schriftform, Hintergrund und tatsächlicher Darstellungszustand bleiben relevant.
Was das USWDS-Farbsystem zeigt
Die USWDS-Dokumentation zu Farben ordnet Farbstufen so, dass geeignete Kombinationen systematisch gewählt werden können. Der Abschnitt zu zugänglichen Farbpaaren erläutert diese Zuordnung. Die dort beschriebenen Stufen beziehen sich auf dieses gepflegte System. Eine Differenz zwischen beliebigen selbst vergebenen Farbnamen hat dieselbe Bedeutung nicht.
Für deine Website ist die nützliche Idee eine Liste geprüfter Kombinationen: Welcher Text darf auf welcher Fläche stehen? Ein einzelner freigegebener Markenfarbton reicht nicht. Erst das Paar aus Vorder- und Hintergrund entscheidet über das Verhältnis.
Den richtigen Schwellenwert verwenden
Als großer Text gelten nach W3C SC 1.4.3 mindestens 18 Punkt oder 14 Punkt bei fetter Schrift, ungefähr 24 beziehungsweise 18,7 CSS-Pixel. Die Anforderung kennt Ausnahmen, etwa für Logos und rein dekorative Inhalte. Verwende sie nicht als Begründung, wesentliche Informationen blass darzustellen.
Das Kontrastlabor unten berechnet die relative Leuchtdichte zweier deckender sRGB-Farben und daraus (heller + 0,05) / (dunkler + 0,05). Schwarz auf Weiß ergibt 21:1. Diese Berechnung ist reproduzierbar; sie ist keine Befragung zur subjektiven Lesbarkeit und kein Nachweis vollständiger Barrierefreiheit.
Warum der Screenshot allein nicht genügt
Ein Screenshot kann zeigen, dass ein Text auf einer farbigen Fläche steht. Für eine verlässliche Prüfung brauchst du die tatsächlich gerenderten Farben. Transparenz, Hintergrundbilder und Verläufe können innerhalb desselben Textes unterschiedliche Kontraste erzeugen. Ein aus einem geglätteten Buchstaben gepickter Randpixel ist außerdem nicht unbedingt die definierte Textfarbe.
Prüfe deshalb nach Möglichkeit die CSS-Werte und den resultierenden Hintergrund. Bei einem Foto untersuchst du die ungünstigen Stellen unter dem Text und alle relevanten Zuschnitte. Eine ausreichend deckende Fläche hinter der Schrift ist oft leichter zuverlässig zu gestalten als ein empfindliches Zusammenspiel aus Foto und Schatten.
Aus einer Einzelprüfung wird ein Arbeitsmittel
Dokumentiere für jede freigegebene Kombination die beiden Werte, den berechneten Kontrast und den zulässigen Einsatz. Kennzeichne, wenn eine Kombination nur für große Schrift genügt. Wiederhole die Prüfung, sobald sich Farbe, Transparenz oder Hintergrund ändern.
Kontrolliere zusätzlich Fokus, Fehler und ausgewählte Zustände. Der Beitrag über sichtbaren Tastaturfokus zeigt, warum eine Oberfläche mehr als ihren Ruhezustand braucht. Für die Verständlichkeit von Zuständen ist außerdem wichtig, dass Farbe eine eindeutige Rolle bekommt.
Wenn ein Farbpaar den Schwellenwert knapp verfehlt, runde es nicht auf. Und wenn es besteht, betrachte die vollständige Seite trotzdem unter Vergrößerung und auf einem kleinen Bildschirm. Die Zahl beantwortet eine wichtige, aber begrenzte Frage.
Ein Farbpaar braucht einen benannten Einsatz
Notiere beim Prüfen nicht nur zwei Farbwerte, sondern auch ihre Verwendung. Ein kleiner ergänzender Text stellt andere Anforderungen als eine große Überschrift. Ein Symbol oder eine Eingabekontur ist wiederum kein Fließtext. Wenn ein Werkzeug für eine Kombination einen Wert ausgibt, musst du deshalb noch entscheiden, welches Kriterium für das konkrete Element gilt. Ein grünes Prüfergebnis ohne diesen Zusammenhang kann irreführend sein.
Die eigene Grafik vergleicht zwei Textfarben auf Weiß. Das Grau #777777 liegt mit ungefähr 4,48 zu 1 knapp unter 4,5 zu 1. Ein knapp verfehlter Grenzwert wird nicht durch Aufrunden bestanden. Die große Darstellung der Buchstaben dient nur dem Vergleich; ob eine Farbe für deinen normalen Absatztext geeignet ist, wird anhand dessen tatsächlicher Verwendung beurteilt.
Prüfe die ungünstigste relevante Kombination
Ein Text auf einem Foto kann auf der einen Seite gut erkennbar sein und wenige Zentimeter daneben verschwinden. Auch ein transparenter Hintergrund verändert seine resultierende Farbe abhängig vom Inhalt dahinter. Wenn du solche Darstellungen verwendest, brauchst du eine verlässliche Lösung für alle vorgesehenen Bilder und Ausschnitte. Eine ausreichend deckende Fläche hinter dem Text kann einfacher zu pflegen sein als immer neue Einzelkorrekturen.
Beziehe die tatsächlichen Zustände ein. Ein Link kann nach dem Besuch eine andere Farbe haben, eine Fehlermeldung in einem farbigen Bereich erscheinen und ein ausgewähltes Element seine Fläche wechseln. Lege für diese Kombinationen feste Paare fest. So lässt sich eine spätere Farbänderung gezielt überprüfen, statt nur die Startseite erneut anzusehen.
Messergebnis und Lesbarkeit zusammen betrachten
Ein bestandener Kontrasttest bedeutet nicht, dass eine Schrift angenehm zu lesen ist. Sehr dünne Striche, eine kleine Darstellung oder unruhige Hintergründe können weiterhin Probleme verursachen. Der Messwert ist ein notwendiger Teil der Prüfung für den jeweiligen Anwendungsfall, aber keine vollständige Bewertung der Typografie. Beurteile deshalb zusätzlich Größe, Zeilenlänge und die tatsächliche Darstellung auf unterschiedlichen Bildschirmen.
Dokumentiere die überprüften Paare mit ihrem Einsatzzweck und Datum. Bei einer neuen Komponente kannst du dann zunächst auf bekannte Kombinationen zurückgreifen. Für individuelle Einstellungen wie einen dunklen Modus entstehen neue Kombinationen, die ebenfalls geprüft werden müssen. Eine invertierte Palette übernimmt die Ergebnisse der hellen Gestaltung nicht automatisch.
