So funktioniert die Kontrastprüfung
Nutze sie für zwei deckende Farben, die sich im Entwurf direkt berühren. Sie prüft Textkontrast, nicht die ganze Seite.
- Textfarbe als 3- oder 6-stelliges HEX eingeben.
- Die feste Hintergrundfarbe eingeben.
- Kontrast prüfen wählen.
- Verhältnis sowie jedes ausgeschriebene Ergebnis lesen.
- Weitere echte Zustände einzeln prüfen.
Offizielle Berechnung
sRGB-Kanäle werden normalisiert und am Wert 0,04045 linearisiert. Die relative Leuchtdichte ist 0,2126R + 0,7152G + 0,0722B; das Verhältnis lautet (L1 + 0,05) / (L2 + 0,05).
AA- und AAA-Grenzen
AA verlangt 4,5:1 für normalen und 3:1 für großen Text. AAA verlangt 7:1 beziehungsweise 4,5:1. Groß bedeutet mindestens 18 pt normal oder 14 pt fett, mit entsprechenden Größen für CJK.
Rundung und Umfang
Bewertet wird der volle interne Wert: 4,499:1 verfehlt 4,5:1 trotz Anzeige 4,50. Unterstützt werden nur zwei deckende HEX-Farben, nicht Alpha, Verläufe, Bilder oder Website-Scans.
Zusätzlich prüfen
- Link-, Fokus-, Fehler- und deaktivierte Zustände.
- Text auf Bildern und alternative Themes.
- Tatsächliche Schriftgröße, -stärke und -form.
- Tastatur, Zoom, Semantik und weitere Anforderungen.
Beispiele
#000000 auf #FFFFFF ergibt 21,00:1 und besteht alle vier Prüfungen.
#767676 auf Weiß liegt über 4,5:1; #777777 liegt darunter.
Häufige Fragen
Darf ich # weglassen?
Ja, 3 oder 6 Stellen sind mit und ohne # gültig.
Warum keine Transparenz?
Die wirksame Farbe hängt von der Überlagerung ab; hier werden zwei deckende Farben verglichen.
Bedeutet Bestanden vollständige WCAG-Konformität?
Nein, nur dieses Farbpaar wird numerisch geprüft.
Welcher Wert gilt für 16-px-Text?
Normaler Text: mindestens 4,5:1 für AA.