Kontrast-Checker
Zwei Farben eingeben, Verhältnis ablesen: Der Rechner prüft AA und AAA für normalen und großen Text und schlägt bei Bedarf eine lesbare Variante vor.
Farben
Unbekanntes Farbformat — erwartet wird z. B. #2596BE oder rgb(37, 150, 190).
Unbekanntes Farbformat — erwartet wird z. B. #2596BE oder rgb(37, 150, 190).
Korrekturvorschlag
Beide Farben erfüllen bereits AA für normalen Text.
Kontrastverhältnis nach WCAG 2.1
- AA · normaler Text—
- AA · großer Text—
- AAA · normaler Text—
- AAA · großer Text—
- Bedienelemente & Grafiken—
14 px — Fließtext: Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
24 px — Große Überschrift
18,66 px fett — Zwischenzeile
Beispiel-ButtonWie das Verhältnis berechnet wird
Die WCAG definiert Kontrast als Verhältnis der relativen Leuchtdichte beider Farben:(L_hell + 0,05) / (L_dunkel + 0,05). Die Leuchtdichte entsteht aus den linearisierten sRGB-Kanälen, gewichtet mit 0,2126 (Rot), 0,7152 (Grün) und 0,0722 (Blau). Der kleinste mögliche Wert ist 1:1 (identische Farben), der größte 21:1 (Schwarz auf Weiß).
Welche Schwelle gilt wofür
- 4,5:1 — normaler Text, Stufe AA. Das ist die Schwelle, an der sich die meisten Projekte messen lassen müssen.
- 3:1 — großer Text (ab 24 px regulär oder 18,66 px fett) sowie Icons, Rahmen von Eingabefeldern und andere Bedienelemente, Stufe AA.
- 7:1 — normaler Text, Stufe AAA. Sinnvoll für Fließtext, der lange gelesen wird.
- 4,5:1 — großer Text, Stufe AAA.
Grenzen der Prüfung
Das Verhältnis ist eine rein rechnerische Größe. Es sagt nichts über Schriftstärke, Laufweite oder darüber, ob ein dünner Grotesk-Schnitt bei 12 px tatsächlich angenehm lesbar ist. Bestandene Werte sind eine Untergrenze, kein Qualitätsnachweis.
Welches Kontrastverhältnis fordert die WCAG?
Für normalen Text mindestens 4,5:1 auf Stufe AA und 7:1 auf Stufe AAA. Großer Text ab 18,66 px fett oder 24 px regulär braucht 3:1 (AA) beziehungsweise 4,5:1 (AAA). Bedienelemente und grafische Objekte benötigen 3:1.
Zählt Transparenz mit?
Nein. Die Berechnung setzt zwei deckende Farben voraus. Bei halbtransparentem Text rechne die Farbe zuerst gegen den tatsächlichen Hintergrund aus und prüfe das Ergebnis.
Wie funktioniert der Korrekturvorschlag?
Der Vorschlag behält Farbton und Sättigung bei und verschiebt nur die HSL-Helligkeit so weit, bis das Ziel-Verhältnis erreicht ist. So bleibt die Farbe erkennbar und wird trotzdem lesbar.