Interaktive Mathe- und Wissenschafts-Lektionen

Farbkontrast-Prüfer (WCAG-Leuchtdichte)

Gib 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.

Interaktive Simulation wird geladen...

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 du tatsächlich erfüllen musst.

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.

Aufgabe vollständig gelöst

  1. Kontrastverhältnis zwischen #e2e6f0-Text und einem #1a1d27-Hintergrund 5 Schritte

    Bestimmen Sie das Kontrastverhältnis zwischen Text in #e2e6f0 und einem Hintergrund in #1a1d27 – den eigenen Farben dieser Seite. Die Mittelung der Kanäle ergibt 5,55. WCAG ergibt 13,46. Finden Sie heraus, woher der Faktor von zweieinhalb kommt.

    1. Die Definition sieht harmlos aus: ein Verhältnis zweier Leuchtdichten, die jeweils um 0,05 angepasst werden, damit bei reinem Schwarz nicht durch Null geteilt wird. Die Gewichtungen sind nicht gleich, und das ist die erste Überraschung – Grün wird zehnmal mehr Leuchtdichte zugeschrieben als Blau.

    2. Die zweite Überraschung ist, dass die Kanalwerte nicht unverändert verwendet werden können. Ein Byte in einer Bilddatei ist gammacodiert: 128 bedeutet nicht die Hälfte des Lichts, sondern etwa ein Fünftel davon. Der abschnittsweise definierte Ausdruck macht diese Codierung rückgängig – und das ist genau der Schritt, den jeder vergisst, der seine eigene Kontrastprüfung schreibt.

    3. Wendet man dies auf beide Farben an, liegt die helle bei 0,79 und die dunkle bei 0,0124 – ein Faktor von 63 Unterschied beim physikalischen Licht aus Bytes, die sich nur um einen Faktor von etwa 7 unterscheiden.

    4. Die Offset-Werte von 0,05 komprimieren diese 63 dann auf 13,46 – das ist die Zahl, die das Feld anzeigt. Dieser Offset ist nicht kosmetisch: Er modelliert das Licht, das Ihr Bildschirm selbst bei der Darstellung von Schwarz reflektiert. Deshalb kann ein dunkles Design in einem beleuchteten Raum keinen unbegrenzten Kontrast erreichen.

    5. Die Gewichtungen erklären die häufigste Beschwerde von Designern. Reines Grün und reines Blau bestehen beide aus einem einzigen Kanal bei voller Stärke, dennoch trägt Grün 0,7152 der Leuchtdichte bei und Blau nur 0,0722.

    Antwort

    Das Werkzeug gibt 13,46 : 1 aus, deutlich über den 4,5 von AA und den 7 von AAA. Der Grund, dies von Hand zu berechnen, ist der Gamma-Schritt: Lässt man ihn weg und mittelt stattdessen die Kanäle, kommt dieses Paar auf 5,55 – immer noch bestanden, aber um den Faktor 2,4 falsch. Bei einem knapperen Paar macht dieser Fehler den Unterschied zwischen Bestanden und Nichtbestehen aus. Die Gewichtungen bilden die andere Hälfte. Grün ist 9,9-mal heller als Blau beim gleichen Kanalwert, weshalb blauer Text auf Schwarz weit schlechter ist, als es in einer Farbauswahl aussieht, und Gelb auf Weiß weit besser, als Designer erwarten. Probieren Sie #0000ff gegen #000000 aus und lesen Sie das Verhältnis ab.

Quellen (2)

· Aktualisiert

Anhand veröffentlichter Quellen geprüft. Korrekturen willkommen. Redaktionsrichtlinie · Korrekturen

Alle Lektionen: Informatik →

Beispielaufgaben