Großer Text, 24 px
Fließtext mit 15 px. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich.
Dieser Kontrast-Checker prüft eine Textfarbe gegen eine Hintergrundfarbe nach der Formel aus WCAG 2.1 und zeigt das Kontrastverhältnis live an, mit Bestanden oder Nicht bestanden für AA und AAA bei normalem und großem Text. Fällt ein Paar durch, schlägt er die nächstgelegene bestehende Farbe im selben Farbton vor – so lässt sich ein Design korrigieren, ohne seinen Charakter zu ändern.
Anleitung
- Tippe auf das große Farbfeld, um den Farbwähler zu öffnen, nimm mit der Pipette eine Farbe vom Bildschirm auf oder tippe in ein Feld.
- Füge eine beliebige CSS-Farbe (#hex, rgb(), hsl(), hwb(), oklch(), lab(), Farbnamen …) in ein Feld oder irgendwo auf der Seite ein.
- Tippe auf Kopieren neben einem Format. Mit Deckkraft fügst du Transparenz hinzu.
- In der Palette macht ein Tipp das Feld zur aktuellen Farbe; lange drücken (oder Rechtsklick) kopiert den HEX-Wert. Unter Kontrast Text- und Hintergrundfarbe setzen und einen Vorschlag antippen, um ein durchgefallenes Paar zu korrigieren.
- WCAG 2.1 verlangt 4,5:1 für normalen Text (AA) und 7:1 für AAA. Großer Text (24 px oder 18,66 px fett) braucht 3:1 für AA und 4,5:1 für AAA. UI-Elemente und Grafiken brauchen 3:1.
- Vorschläge behalten Farbton und Sättigung und ändern nur die Helligkeit (in OKLCH) bis zum nächsten passenden Wert.
- Halbtransparente Farben werden vor der Berechnung mit dem Hintergrund verrechnet.
- CMYK-Werte sind eine einfache Umrechnung; für den Druck das Farbprofil der Druckerei verwenden.
- Zuletzt verwendete Farben werden nur in diesem Browser gespeichert.
Die WCAG-Schwellenwerte
WCAG 2.1 verlangt für normalen Text ein Kontrastverhältnis von mindestens 4,5:1 (Stufe AA) und 7:1 für Stufe AAA. Großer Text, also ab 24 px oder ab 18,66 px fett, braucht 3:1 für AA und 4,5:1 für AAA. Bedienelemente und bedeutungstragende Grafiken wie Eingabefeld-Rahmen und Icons brauchen 3:1.
Das Verhältnis reicht von 1:1 (gleiche Farben) bis 21:1 (Schwarz auf Weiß).
So wird das Verhältnis berechnet
Jede Farbe wird in relative Leuchtdichte umgerechnet: Die sRGB-Kanäle werden linearisiert und mit 0,2126 für Rot, 0,7152 für Grün und 0,0722 für Blau gewichtet. Das Verhältnis ist (L1 + 0,05) / (L2 + 0,05), die hellere Farbe oben. Grau #767676 auf Weiß ergibt 4,54:1 und besteht AA knapp, #777777 ergibt 4,48:1 und fällt durch – so schmal kann die Grenze sein. Halbtransparente Farben werden zuerst mit dem Hintergrund verrechnet.
Ein Farbpaar reparieren
Die Vorschläge behalten Farbton und Sättigung und ändern nur die Helligkeit in OKLCH, bis zum nächsten Wert, der besteht. Text abzudunkeln ist meist die unauffälligste Änderung. Kontrast ist nur ein Teil der Barrierefreiheit: Schriftstärke, -größe und Abstände zählen ebenfalls.
Häufige Fragen
Welches Kontrastverhältnis brauche ich für WCAG AA?
4,5:1 für normalen Text und 3:1 für großen Text (24 px oder 18,66 px fett). Buttons, Eingabefeld-Rahmen und Icons brauchen 3:1 zur Umgebung.
Was ist der Unterschied zwischen AA und AAA?
AA ist die Stufe, die die meisten Gesetze und Richtlinien wie die BITV verlangen. AAA ist strenger: 7:1 für normalen und 4,5:1 für großen Text, empfohlen für lange Texte und Menschen mit Sehschwäche.
Besteht weißer Text auf einem blauen Button?
Das hängt vom Blau ab. Weiß auf #1E88E5 ergibt 3,68:1 und reicht nur für großen Text; für normal große Button-Beschriftungen braucht es ein dunkleres Blau.
Was gilt als großer Text?
Text ab 24 px (18 pt) in normaler Stärke oder ab 18,66 px (14 pt) fett. Alles Kleinere gilt als normaler Text.
Wie wählt das Tool die vorgeschlagene Farbe?
Es behält Farbton und Sättigung und passt nur die Helligkeit in OKLCH an, bis das Zielverhältnis erreicht ist. So bleibt die Farbe in derselben Familie.
Ist das dasselbe wie die APCA-Methode?
Nein. Dieser Checker nutzt das Kontrastverhältnis aus WCAG 2.1, auf das sich aktuelle Barrierefreiheitsnormen und Gesetze beziehen. APCA ist eine andere, neuere Methode.