Farbkontrast-Prüfer (WCAG-Leuchtdichte)
Geben Sie eine Vordergrund- und eine Hintergrundfarbe ein, um unten die heutige relative WCAG-Leuchtdichte und das Kontrastverhältnis (AA/AAA) zu berechnen. Die rechten Farbfelder unter der Vorschau zeigen, was die moderne WCAG-Formel für jede Farbe „sieht“; die linken Farbfelder zeigen, was die Luma-Formel eines Übertragungstechnikers von 1953 für genau dieselben Farben ergeben hätte — ein direkter Vergleich von alt und neu.
Warum Grün mehr zählt als Rot und Blau — und warum das Gesetz noch die Mathematik von 1953 verwendet 🖖
Die Gewichte in der Leuchtdichteformel (heute grünlastige 0,2126; 1953 waren es 0,299/0,587/0,114) sind nicht willkürlich: Sie gehen auf den CIE-1931-Normalbeobachter zurück, der zeigte, dass die Zapfenantwort und die Hellempfindlichkeitskurve des menschlichen Auges uns für grünes Licht weitaus empfindlicher machen als für rotes oder blaues. Genau eine solche gewichtete Summe brauchte NTSC 1953, damit eine neue Farbübertragung auf den Millionen bereits in Wohnzimmern stehenden Schwarzweißgeräten weiterhin ein korrektes Graustufenbild ergab — 'Luma' wurde als Kompatibilitäts-Hack erfunden, nicht als Wahrnehmungsideal. Diese Geschichte ist heute relevant, weil das oben geprüfte WCAG-2-Kontrastverhältnis rechtlich bindend ist (referenziert von der ADA und EN 301549), obwohl Sehforscher es als fehlerhaft betrachten: Es überschätzt bekanntermaßen den Kontrast von dunklem Text auf hellem Grund und unterschätzt hellen Text auf dunklem Grund — direkt relevant, da diese Seite standardmäßig ein dunkles Theme verwendet. APCA, der Entwurfsersatz von WCAG 3, modelliert diese Asymmetrie korrekt; bis es erscheint, bleibt die obige Formel diejenige, die Sie tatsächlich erfüllen müssen.
Was ein Kontrastverhältnis wirklich misst 🖖
Die Zahl, die dieses Werkzeug ausgibt, ist ein Verhältnis relativer Leuchtdichten: (L1 + 0.05) / (L2 + 0.05), wobei L1 die hellere und L2 die dunklere Farbe ist. Sie reicht von 1:1 (identische, unsichtbare Farben) bis 21:1 (reines Schwarz auf reinem Weiß). Die zu beiden addierte 0.05 ist keine Rundung, sondern modelliert das schwache Streulicht, das echte Bildschirme aus dem Raum reflektieren — selbst 'reines Schwarz' ist also nie wirklich null. Für WCAG AA sollte Fließtext 4.5:1 und großer Text 3:1 erreichen.
Ein Tippfehler, eingefroren im Gesetz 🖖
Die Formel linearisiert jeden sRGB-Kanal mit einer stückweisen Kurve, die an einem Schwellenwert von einem linearen Anfangsstück zu einem Gamma-Exponenten wechselt. WCAG 2 setzt diesen Wechsel bei 0.03928 — der eigentliche sRGB-Standard jedoch bei 0.04045. Der WCAG-Wert ist ein Tippfehler, übernommen aus einem frühen sRGB-Entwurf, bevor die Zahl korrigiert wurde, und seither in einem international zitierten Barrierefreiheitsgesetz festgeschrieben. Der Fehler verschiebt die Ergebnisse um weniger als 10⁻⁴, weshalb sich niemand die Mühe gemacht hat, den Wortlaut zu berichtigen.
Beispielaufgaben
- Das eigene Theme dieser Seite - Das eigene dunkle Theme dieser Seite: 13,46:1, besteht AAA
- Schwarz auf Weiß (Maximum) - Schwarz auf Weiß: 21:1, das theoretische Maximalverhältnis
- Das berühmte AA-Grau - #767676 auf Weiß: 4,54:1, das bekannte Grau, das AA 'gerade so' besteht
- Nur großer Text - 3,96:1 — besteht AA für großen Text (≥3), scheitert aber an AA für normalen Text (≥4,5)
- Rot auf Blau (altes TV) - Rot auf Blau: 2,15:1, scheitert klar an AA, obwohl es kräftig wirkt