Zuerst muss das zu messende Objekt identifiziert werden.
Geben Sie die Textfarbe und die tatsächliche Hintergrundfarbe mit drei oder sechs Bit im Hexadezimalcode ein. Dieses Tool berechnet die Farbe auf Basis deckender sRGB-Farben. Bei transparenten Farben, Hintergrundbildern und Farbverläufen müssen Sie zunächst den tatsächlichen Hintergrund an der Textposition ermitteln und können nicht einfach einen der vorgegebenen Farbwerte als Ersatz verwenden.
Die Ergebnisse der Kontrastprüfung dieser Farbauswahl zeigen nicht, dass die gesamte Seite die WCAG-Kriterien erfüllt. Schriftgröße, Schriftart, interaktive Zustände und weitere Anforderungen an die Barrierefreiheit müssen auf der tatsächlichen Seite noch überprüft werden.
Wie berechnet man das Verhältnis?
Man teilt jeden 8-Bit-Farbkanal durch 255, um den Wert c zu erhalten. Ist c ≤ 0,04045, ergibt sich der lineare Wert zu c ÷ 12,92; andernfalls zu ((c + 0,055) ÷ 1,055) hoch 2,4. Die relative Helligkeit L beträgt 0,2126R + 0,7152G + 0,0722B, wobei R, G und B die oben genannten linearen Werte verwenden.
(höheres L + 0.05) ÷ (niedrigeres L + 0.05). Schwarz und Weiß ergeben 21:1; gleiche Farben ergeben 1:1. Das Vertauschen von Text und Hintergrund ändert das Kontrastverhältnis nicht, wohl aber das Erscheinungsbild.
Runden ist nicht gleichbedeutend mit Passen.
Normaler Text benötigt mindestens 4.5:1 für AA und 7:1 für AAA. Großer Text benötigt 3:1 beziehungsweise 4.5:1. Großer Text hat mindestens 18pt oder mindestens 14pt in Fettschrift. Diese niedrigeren Schwellen gelten nicht für kleinen Text.
Das Kontrastverhältnis von #777777 auf weißem Hintergrund beträgt etwa 4,478:1 und erfüllt damit nicht die Anforderung von 4,5:1 für normalen Text (AA). Selbst wenn eine Benutzeroberfläche den Wert 4,5 anzeigt, ist dieser für die Beurteilung ungeeignet. Diese Website zeigt drei Dezimalstellen an; für die bedingte Beurteilung wird der vollständige berechnete Wert verwendet.
Fügen Sie die Farbpaare wieder in die eigentliche Benutzeroberfläche ein.
Die Vorschau zeigt nur die Eingabefarben an, mit 16px für Fließtext und 24px für Überschriften. Überprüfen Sie zuerst die tatsächliche Textfarbe, den Hintergrund, die Schriftgröße und die Schriftstärke auf der Zielseite und anschließend die Darstellung im Normalzustand, beim Überfahren mit der Maus und im Fokuszustand. Verlassen Sie sich nicht nur auf die optisch ansprechendste Farbkombination im Designentwurf.
Nach schrittweiser Abdunklung des Textes bzw. Aufhellung des Hintergrunds wird die Berechnung wiederholt und anschließend Schriftart und Leseerlebnis auf einem realen Gerät überprüft. Der hier durchgeführte Farbkontrasttest misst weder die Farberkennung noch die Symbolsemantik oder die vollständige Seitendarstellung; Farbwerte und Prüfpositionen werden für eine spätere Auswertung gespeichert.