Farbkontrast-Prüfer

Der Color-Contrast-Prüfer misst das Kontrastverhältnis zwischen zwei Hex-Farben und meldet, ob das Paar die WCAG-Schwellen AA und AAA besteht. Er zeigt das exakte Verhältnis von 1:1 bis 21:1, getrennte Urteile für normalen und großen Text, eine Live-Vorschau sowie die relative Leuchtdichte jeder Farbe. Designer und Entwickler nutzen ihn, um Barrierefreiheitsfragen mit einer Zahl statt mit einer Meinung zu klären.

Verwendung

• Geben Sie eine Vordergrundfarbe (Text) und eine Hintergrundfarbe ein, entweder durch Eintippen eines Hex-Werts oder über die Farbauswähler.
• Das Verhältnis aktualisiert sich während der Eingabe; die Ergebnisanzeige zeigt es mit zwei Nachkommastellen.
• Lesen Sie die vier Konformitätsabzeichen: AA normal, AA groß, AAA normal, AAA groß.
• Mit der Tausch-Schaltfläche kehren Sie die beiden Farben um und prüfen die inverse Kombination.
• Passen Sie eine der Farben an und beobachten Sie, wie sich das Verhältnis in Echtzeit bewegt.

Die WCAG-Formel Schritt für Schritt

Das Verhältnis stammt aus der Definition der relativen Leuchtdichte nach WCAG 2.1. Für jede Farbe:

1. Den sRGB-Kanal in den Bereich 0–1 umrechnen: s = Kanal / 255.
2. Linearisieren: Falls s <= 0.04045, s / 12.92 verwenden; andernfalls ((s + 0.055) / 1.055) ^ 2.4.
3. Die drei linearen Kanäle gewichten: L = 0.2126 × R + 0.7152 × G + 0.0722 × B.

Dann gilt mit L1 als hellerer und L2 als dunklerer Leuchtdichte:

ratio = (L1 + 0.05) / (L2 + 0.05)

Weiß hat die Leuchtdichte 1, Schwarz die Leuchtdichte 0, und die Konstante 0.05 hält das Ergebnis endlich. Deshalb ist das maximal mögliche Verhältnis (1 + 0.05) / (0 + 0.05) = 21.

Die Kanalgewichte sind nicht willkürlich. Grün liegt bei 0.7152, weil das Auge weit empfindlicher darauf reagiert als auf Rot oder Blau, während die 0.0722 für Blau widerspiegeln, wie wenig es zur wahrgenommenen Helligkeit beiträgt. Der Exponent 2.4 bildet zusammen mit dem linearen Segment unterhalb von 0.04045 die Gamma-Antwort eines Monitors nach. Eine nützliche Folge: Zwei Farben mit derselben RGB-Summe können unterschiedlich abschneiden, denn Grün ist bei gleichem Zahlenwert wahrnehmbar viel heller als Blau.

Praxisbeispiele

Vordergrund	Hintergrund	Verhältnis	AA normal	AA groß	AAA normal
#333333	#FFFFFF	12,63:1	Besteht	Besteht	Besteht
#595959	#FFFFFF	7,00:1	Besteht	Besteht	Besteht (knapp)
#767676	#FFFFFF	4,54:1	Besteht	Besteht	Fällt durch
#777777	#FFFFFF	4,48:1	Fällt durch	Besteht	Fällt durch

Die letzten beiden Zeilen unterscheiden sich um eine einzige Hex-Stufe und landen doch auf entgegengesetzten Seiten der AA-Schwelle für normalen Text. Genau darin liegt der Wert des Nachprüfens statt Schätzens, denn die menschliche Wahrnehmung ist nahe einer Grenze ein schlechter Maßstab. Die Zeile #595959 ist das bekannte Grau mit sieben zu eins für AAA-Fließtext auf Weiß, und die Voreinstellung #333333 liegt komfortabel bei AAA. Wenn eine Farbe nahe an einer Schwelle liegt, ändern Sie jeweils einen Kanal und beobachten das Verhältnis, bis es die Latte mit etwas Abstand überschreitet.

Was AA und AAA verlangen

Text	AA-Minimum	AAA-Minimum
Normal (unter 18pt / 24px)	4,5:1	7:1
Groß (18pt+, oder 14pt+ fett)	3:1	4,5:1

UI-Komponenten und grafische Objekte haben eine separate Anforderung von 3:1, die dieses Tool nicht bewertet, da es nur zwei flache Farben vergleicht.

Häufige Fehler

• Platzhaltertext oder deaktivierte Zustände mit derselben Schwelle wie Fließtext prüfen; deaktivierte Elemente sind ausgenommen, aber der Text bleibt schwer lesbar.
• Text gegen einen Verlauf oder ein Foto prüfen, indem die Durchschnittsfarbe abgetastet wird, was die schlimmste Stelle verdeckt.
• Vergessen, dass Deckkraft und Overlays die effektive Farbe verändern. Ein 50-prozentiges Schwarz-Overlay über Weiß ist Mittelgrau, nicht Schwarz.
• Annehmen, eine Markenfarbe bestehe, weil sie auf dem Monitor eines Designers gut aussieht. Helle Umgebungen und günstige Panels verzeihen weniger.
• Nur das Standard-Theme prüfen. Dunkelmodus, kontrastreicher Modus und erzwungene Farben können Ihre Palette neu zuweisen; prüfen Sie die Kombinationen, die Nutzer tatsächlich sehen.
• Fokusringe und Rahmen ignorieren. Eine Kontur braucht 3:1 gegenüber ihrer Umgebung, selbst wenn der Beschriftungstext bereits besteht.

Genauigkeit und Grenzen

Der Prüfer ist exakt für massive sRGB-Hex-Farben nach der WCAG-2.1-Formel und akzeptiert 3- oder 6-stellige Werte mit oder ohne führendes #. Er ignoriert Alphakanäle, Verläufe, Bilder sowie die tatsächliche Pixelgröße oder Schriftstärke Ihrer Typografie. Ebenso prüft er nicht, welche Textgrößen eine Website wirklich verwendet, weshalb Sie die Regel für groß und normal selbst anwenden müssen. Die Leuchtdichte wird mit vier Nachkommastellen angezeigt, doch das Verhältnis ist die Zahl, auf die es ankommt; ungültige Eingaben lassen das Ergebnis leer, statt zu raten. Betrachten Sie das Urteil als notwendige Prüfung, nicht als vollständiges Audit – es ersetzt weder einen Screenreader-Test noch einen Tastatur-Durchlauf oder Rückmeldungen von Menschen, die assistive Technologie nutzen. Für Konformitätsnachweise notieren Sie das Hex-Paar und das Verhältnis gemeinsam, weil eine spätere Farbanpassung ein bestehendes Paar stillschweigend wieder unter die Grenze drücken kann.

Verwandte Tools

• Color Picker – exakte Hex-Werte aus einer Palette entnehmen.
• Color Palette Generator – von vornherein barrierefreie Paletten aufbauen.
• Color Name Finder – den nächstgelegenen benannten Farbnamen zu einem Hex-Wert finden.