Prüfen Sie das Kontrastverhältnis zwischen zwei Farben und sehen Sie live im Browser, ob es WCAG AA und AAA erfüllt.
Das Kontrastverhältnis ist die Zahl, mit der WCAG entscheidet, ob Text lesbar ist. Sie vergleicht die relative Leuchtdichte zweier Farben auf einer Skala von 1:1 (identisch) bis 21:1 (reines Schwarz auf reinem Weiß). Auf Stufe AA verlangt WCAG mindestens 4,5:1 für normalen Text und 3:1 für großen Text; Stufe AAA hebt das auf 7:1 und 4,5:1 an. Oberflächenelemente — Icon-Schaltflächen, Eingaberahmen, Fokusringe — brauchen 3:1 gegenüber dem, was direkt daneben liegt.
Die Rechnung ist keine einfache Helligkeitsdifferenz. Jeder sRGB-Kanal wird zuerst linearisiert: unterhalb der Schwelle 0,03928 durch 12,92 geteilt, andernfalls normalisiert und mit 2,4 potenziert. Dieser Schritt ist nötig, weil Bildschirmwerte gammakodiert und nicht proportional zum abgestrahlten Licht sind. Die linearen Kanäle werden dann mit 0,2126 für Rot, 0,7152 für Grün und 0,0722 für Blau gewichtet — entsprechend dem Beitrag jeder Grundfarbe zur wahrgenommenen Helligkeit, wobei Grün mit weitem Abstand dominiert. Zuletzt gehen die beiden Leuchtdichten in (L1 + 0,05) / (L2 + 0,05) ein, wobei der Term 0,05 das Licht abbildet, das ein echter Bildschirm selbst bei der Anzeige von Schwarz reflektiert. Wegen dieser Konstante ist Schwarz auf Weiß genau 21:1 und nicht unendlich.
Prüfen Sie vor dem Launch, denn Markenpaletten fallen häufiger durch, als man denkt. Ein mittleres Grau wie #777777 auf Weiß landet bei 4,48:1 — auf einem hellen Monitor angenehm, um ein Hundertstel unter der AA-Schwelle und auf dem Handy in der Sonne ein echtes Problem. Genau dafür gibt es die Vorschlags-Schaltfläche: Sie verschiebt die HSL-Helligkeit der Textfarbe in Schritten von einem halben Prozent nach oben und unten und hält beim ersten Wert an, der 4,5:1 erreicht — Farbton und Sättigung Ihrer Wahl bleiben erhalten. Eine ehrliche Einschränkung: Das Verhältnis misst nur die Leuchtdichte und sagt daher nichts über Farbtonverwechslungen bei Farbsehschwäche und nichts über die Schriftstärke jenseits der Regel für großen Text. Alles läuft lokal in Ihrem Browser.
Relative Leuchtdichte: Für jeden auf 0–1 normalisierten sRGB-Kanal c gilt c / 12,92 bei c ≤ 0,03928 und sonst ((c + 0,055) / 1,055)^2,4; danach L = 0,2126·R + 0,7152·G + 0,0722·B. Kontrastverhältnis = (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere der beiden Farben ist. Schwellen: 4,5:1 normaler Text AA, 7:1 normaler Text AAA, 3:1 großer Text AA und UI-Komponenten, 4,5:1 großer Text AAA.
Text ab 18 pt (24 px) oder ab 14 pt (etwa 18,7 px) in Fettschrift. Großer Text braucht bei AA nur 3:1 und bei AAA 4,5:1, weil dickere, größere Buchstabenformen auch bei geringerem Kontrast lesbar bleiben.
Weil die Schwelle eine harte Grenze ist. #777777 auf Weiß ergibt 4,48:1, AA verlangt 4,5:1 — es fehlen also zwei Hundertstel. Eine Stufe dunkler auf #767676 erreicht 4,54:1 und besteht; genau das macht die Vorschlags-Schaltfläche.
Ja. Das WCAG-Erfolgskriterium 1.4.11 verlangt 3:1 zwischen einer Bedienoberflächen-Komponente oder einer bedeutungstragenden Grafik und den angrenzenden Farben. Eingaberahmen, Schalterzustände, Fokusanzeigen und Schaltflächen mit reinen Icons fallen alle darunter.
Dieses Tool setzt das WCAG-2.x-Verhältnis um — darauf beziehen sich derzeit Barrierefreiheitsgesetze, Audits und Designsysteme. APCA ist der wahrnehmungsbasierte Algorithmus, der für WCAG 3 vorgeschlagen ist; er liefert andere Zahlen und ist noch keine Konformitätsanforderung.
Nein. Leuchtdichte und Verhältnis werden in JavaScript auf Ihrem Gerät berechnet. Nichts wird an einen Server gesendet oder irgendwo gespeichert.
Vai.la verwandelt jede URL in einen Kurzlink mit Klick-Statistiken, QR-Code und Ihrem eigenen Biolink.
Vai.la übernimmt keine Verantwortung für die Nutzung der Tools oder für Entscheidungen, die auf ihren Ergebnissen basieren.