Die tatsächlichen Vorder- und Hintergrundfarben prüfen
Tragen Sie einen HEX-Wert für den Text und einen weiteren für dessen Hintergrund ein. Der Prüfer wandelt die sRGB-Kanäle in relative Leuchtdichte um und berechnet den Kontrast zwischen der helleren und dunkleren Farbe. Das Verhältnis reicht von 1:1 bei identischen Farben bis 21:1 für Schwarz auf Weiß. Diese Zahl ist zuverlässiger als eine Einschätzung nach Farbnamen, denn verschiedene Farbtöne können eine ähnliche Leuchtdichte besitzen. Die Vorschau zeigt die gewählte Kombination als Text auf einem wirklichen Hintergrund. Verwenden Sie die Farben, die auf der fertigen Seite tatsächlich zusammenkommen. Verlauf, Überlagerung und transparente Fläche können die Farbe hinter den Buchstaben ändern. Bei Transparenz bestimmen Sie zuerst die sichtbare Mischfarbe und prüfen diese als deckenden Wert.
AA und AAA richtig unterscheiden
WCAG 2.2 verlangt für normalen Text auf Stufe AA mindestens 4,5:1. Für ausreichend großen Text gilt unter den passenden Bedingungen 3:1. Die strengeren AAA-Ziele liegen bei 7:1 beziehungsweise 4,5:1. Die Seite zeigt vier einzelne Bestehen-oder-Nichtbestehen-Ergebnisse an. Ein Paar kann für große AA-Schrift geeignet und für normalen Fließtext ungeeignet sein. Entscheidend sind die tatsächlich gerenderte Schriftgröße und -stärke, nicht der Name einer CSS-Klasse. Dunkelblau #1A365D auf Weiß #FFFFFF liefert beispielsweise ungefähr 12,14:1 und erfüllt alle vier dargestellten Schwellen. Wenn der Vordergrund heller wird, beobachten Sie, wann ein Grenzwert unterschritten wird.
Den Messwert im Designprozess verwenden
Beginnen Sie mit gewöhnlichem Fließtext, da dort meist die strengere AA-Schwelle für normale Schrift gilt. Prüfen Sie anschließend Überschriften, Formularbeschriftungen, Navigation, Links und Texte in Schaltflächen einschließlich ihrer Zustände. Halten Sie das exakt getestete Farbpaar fest, damit ein späterer Themewechsel erneut kontrolliert werden kann. Die Vorschau erleichtert den Vergleich von Paletten; der Zahlenwert verhindert eine rein ästhetische Vermutung. Nichttextuelle Bedienelemente unterliegen einem anderen WCAG-Kriterium. Ein bestandenes Textverhältnis zertifiziert weder Symbole noch Umrandungen, Fokusmarkierungen oder die gesamte Seite. Größe und Schriftgewicht bestimmen, ob die Ausnahme für großen Text überhaupt anwendbar ist. Eine vollständige Prüfung umfasst außerdem Tastaturbedienung und Vergrößerung.
Typische Messfehler vermeiden
Vergleichen Sie Text nicht einfach mit Weiß, nur weil die allgemeine Seitenfläche weiß ist, wenn er tatsächlich auf einer farbigen Karte steht. Testen Sie die Fläche direkt hinter dem Text. Runden Sie das Verhältnis nicht vor der Grenzwertprüfung auf: Das Werkzeug vergleicht den ungerundeten Wert und kürzt ihn erst für die Anzeige. Ein sichtbares 4,50:1 nahe der Schwelle verlangt einen Blick auf die genauen Farbwerte und die fertige Darstellung. WCAG rechnet mit den angegebenen sRGB-Werten, auch wenn Bildschirm oder Screenshot anders wirken. Prüfen Sie überlagernde Ebenen und Zustandswechsel in der Umsetzung. Scheitert die Kombination, ändern Sie Vordergrund, Hintergrund oder beide und messen erneut. Eine größere Schrift allein begründet noch keine Ausnahme.