Kontrast-Prüfer
Geben Sie eine Textfarbe und eine Hintergrundfarbe ein, um das WCAG-Kontrastverhältnis mit Bestehen/Nicht-Bestehen für AA und AAA und einer Live-Vorschau zu berechnen.
🔒 Lokal in Ihrem Browser verarbeitet
Loading…
So funktioniert's
- Geben Sie im ersten Feld eine Textfarbe (Vordergrund) ein oder wählen Sie sie über den Farbwähler.
- Geben Sie im zweiten Feld eine Hintergrundfarbe ein oder wählen Sie sie über den Farbwähler.
- Kontrastverhältnis und Live-Vorschau der tatsächlichen Farbkombination werden sofort aktualisiert.
- Prüfen Sie die vier Badges, um zu sehen, ob die Kombination WCAG AA und AAA für normalen und großen Text besteht.
Funktionen
- Unterstützt die Farbformate hex, rgb() und hsl()
- Berechnet das WCAG-2.x-Kontrastverhältnis anhand der relativen Leuchtdichte exakt
- Zeigt Bestehen/Nicht-Bestehen-Badges für AA und AAA bei normalem und großem Text
- Live-Vorschau der tatsächlichen Text-auf-Hintergrund-Farbkombination
- 100% clientseitig — Ihre Farben verlassen niemals Ihren Browser
Häufig gestellte Fragen
Wie wird das Kontrastverhältnis berechnet?
Das Verhältnis wird nach der WCAG-2.x-Formel berechnet: Die sRGB-Kanäle jeder Farbe werden linearisiert und zu einem Wert der relativen Leuchtdichte kombiniert. Das Verhältnis ist (L1 + 0.05) / (L2 + 0.05), wobei L1 die Leuchtdichte der helleren Farbe ist. Die Werte reichen von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß).
Was ist der Unterschied zwischen AA und AAA?
AA ist die Standard-Konformitätsstufe, die die meisten Websites anstreben; AAA ist eine strengere, erweiterte Stufe. AA verlangt 4,5:1 bei normalem Text und 3:1 bei großem Text, AAA verlangt 7:1 bzw. 4,5:1.
Was gilt laut WCAG als großer Text?
Großer Text ist definiert als mindestens 18pt (24px) in normaler Stärke oder mindestens 14pt (18,66px) in Fettschrift. Größere, kräftigere Striche bleiben auch bei geringerem Kontrast lesbar, daher ist die Anforderung niedriger.
Welche Farbformate kann ich eingeben?
Sie können hex-Codes (#000 oder #000000), rgb()/rgba()- oder hsl()/hsla()-Strings eingeben oder die Farbwähler neben jedem Feld verwenden.
Speichert oder überträgt dieses Tool meine Farben?
Nein. Die gesamte Analyse und Kontrastberechnung erfolgt lokal in Ihrem Browser mit reinem JavaScript. Es wird nichts an einen Server gesendet oder gespeichert.