Was ist ein Kontrast-Checker und warum ist das WCAG-Verhältnis wichtig?

Ein Kontrast-Checker vergleicht zwei Farben und meldet das WCAG-Kontrastverhältnis zwischen ihnen, das vorhersagt, wie lesbar Text sein wird. Der ArrayKit Kontrast-Checker zeigt das genaue Verhältnis plus AA- und AAA-Urteile, sodass du bestätigen kannst, dass Text für sehbehinderte Nutzer lesbar ist.

Welches Kontrastverhältnis brauche ich, um WCAG zu bestehen?

WCAG AA erfordert mindestens 4,5:1 für normalen Text und 3:1 für großen Text, während AAA 7:1 für normalen Text und 4,5:1 für großen Text erfordert. Der Kontrast-Checker zeigt alle vier Urteile auf einmal.

Wie prüfe ich das Kontrastverhältnis für meinen Text und Hintergrund?

Gib deine Textfarbe in das Feld Vordergrund und deine Hintergrundfarbe in das Feld Hintergrund ein (Hex, rgb oder rgba) oder nutze die Farbfelder. Der Kontrast-Checker aktualisiert das Verhältnis und die AA/AAA-Abzeichen live beim Tippen.

Was zählt als großer Text für die 3:1-Schwelle?

Großer Text ist im Allgemeinen etwa 18pt und größer oder 14pt und größer, wenn fett. Alles Kleinere wird als normaler Text behandelt und muss das höhere 4,5:1-Verhältnis erreichen.

Berücksichtigt das Kontrastverhältnis Deckkraft?

Nein. Das Verhältnis basiert auf den massiven RGB-Werten, also flache jede halbtransparente Farbe gegen ihren tatsächlichen Hintergrund ab, bevor du sie im Kontrast-Checker prüfst.

Werden die Farben, die ich im Kontrast-Checker eingebe, irgendwohin gesendet?

Nein. Der Kontrast-Checker läuft vollständig in deinem Browser, sodass die eingegebenen Farben auf deinem Gerät bleiben und nichts auf einen Server hochgeladen wird.

Kontrast-Checker

Prüfe das WCAG-Kontrastverhältnis und ob AA/AAA zwischen zwei Farben bestanden wird.

Die eingegebenen Farbwerte werden lokal in deinem Browser verarbeitet und nichts wird auf einen Server hochgeladen.

Arbeitest du mit Farbcodes? Probiere den CSS-Farbkonverter.

Über Kontrast-Checker

Dieser Kontrast-Checker misst das WCAG-Farbkontrastverhältnis zwischen zwei Farben und sagt dir sofort, ob sie die Barrierefreiheitsstufen AA oder AAA bestehen. Gib eine Vordergrund- (Text-) Farbe und eine Hintergrundfarbe als Hex oder rgb/rgba ein oder wähle sie mit den integrierten Farbfeldern, und das Tool berechnet das genaue Verhältnis plus Bestanden/Fehlgeschlagen-Urteile für normalen und großen Text. Es ist für Entwickler, Designer und QA-Ingenieure gebaut, die eine schnelle Farbkontrastverhältnis-Prüfung beim Erstellen barrierefreier Oberflächen, Designsysteme oder Marketingseiten brauchen. Eine Live-Vorschau rendert Beispieltext in deinen gewählten Farben, sodass du die Lesbarkeit auf einen Blick beurteilen und Barrierefreiheits-Kontrastprobleme früh erkennen kannst. Alles läuft lokal in deinem Browser, sodass deine Farbwerte auf deinem Gerät verarbeitet werden und nichts auf einen Server hochgeladen wird.

Funktionen

Berechnet das genaue WCAG-2.x-Kontrastverhältnis zwischen zwei Farben
Akzeptiert Hex- (3 oder 6 Stellen), rgb()- und rgba()-Farbformate
Zeigt AA-Bestanden/Fehlgeschlagen für normalen Text (4,5:1) und großen Text (3:1)
Zeigt AAA-Bestanden/Fehlgeschlagen für normalen Text (7:1) und großen Text (4,5:1)
Native Farbwähler-Felder für Vordergrund und Hintergrund
Live-Vorschau, die Beispieltext in deinen gewählten Farben rendert
Klare Validierungsmeldung, wenn ein Farbwert nicht geparst werden kann

So verwendest du Kontrast-Checker

Gib deine Textfarbe in das Feld Vordergrund (Text) ein oder wähle sie mit dem Farbfeld.
Gib deine Hintergrundfarbe in das Feld Hintergrund ein oder nutze dessen Farbfeld.
Lies das Kontrastverhältnis, das über den Urteils-Abzeichen angezeigt wird.
Prüfe die AA- und AAA-Bestanden/Fehlgeschlagen-Abzeichen für normalen und großen Text.

Beispiel

Eingabe

Vordergrund (Text): #777777
Hintergrund: #ffffff

Ausgabe

Kontrastverhältnis: 4,48
AA · normaler Text (4,5:1): Fehlgeschlagen
AA · großer Text (3:1): Bestanden
AAA · normaler Text (7:1): Fehlgeschlagen
AAA · großer Text (4,5:1): Fehlgeschlagen

Mittelgrau auf Weiß verfehlt AA für Fließtext in Normalgröße knapp.

Häufige Fehler & Fehlerbehebung

Das Einfügen eines CSS-Farbnamens wie "red" oder "rebeccapurple" gibt einen Fehler ungültiger Farbe zurück. — Nutze einen Hex-Wert (z. B. #ff0000) oder rgb()/rgba() statt benannter Farben.
Ein 8-stelliges Hex mit Alpha (#rrggbbaa) wird als ungültige Farbe abgelehnt. — Lasse den Alphakanal weg und gib ein 6-stelliges Hex an; der Checker liest nur deckende Farben.
Text besteht AA groß, aber verfehlt AA normal, und du bist unsicher, welches gilt. — Großer Text bedeutet etwa 18pt+ (oder 14pt+ fett); Fließtext muss die strengere 4,5:1-Normalschwelle erreichen.
Ein rgba()-Alphawert ändert das Kontrastverhältnis nicht. — Das Verhältnis wird nur auf den RGB-Kanälen berechnet, also flache Transparenz gegen die tatsächliche Hintergrundfarbe ab, bevor du prüfst.

Häufig gestellte Fragen

Was ist ein Kontrast-Checker und warum ist das WCAG-Verhältnis wichtig?: Ein Kontrast-Checker vergleicht zwei Farben und meldet das WCAG-Kontrastverhältnis zwischen ihnen, das vorhersagt, wie lesbar Text sein wird. Der ArrayKit Kontrast-Checker zeigt das genaue Verhältnis plus AA- und AAA-Urteile, sodass du bestätigen kannst, dass Text für sehbehinderte Nutzer lesbar ist.
Welches Kontrastverhältnis brauche ich, um WCAG zu bestehen?: WCAG AA erfordert mindestens 4,5:1 für normalen Text und 3:1 für großen Text, während AAA 7:1 für normalen Text und 4,5:1 für großen Text erfordert. Der Kontrast-Checker zeigt alle vier Urteile auf einmal.
Wie prüfe ich das Kontrastverhältnis für meinen Text und Hintergrund?: Gib deine Textfarbe in das Feld Vordergrund und deine Hintergrundfarbe in das Feld Hintergrund ein (Hex, rgb oder rgba) oder nutze die Farbfelder. Der Kontrast-Checker aktualisiert das Verhältnis und die AA/AAA-Abzeichen live beim Tippen.
Was zählt als großer Text für die 3:1-Schwelle?: Großer Text ist im Allgemeinen etwa 18pt und größer oder 14pt und größer, wenn fett. Alles Kleinere wird als normaler Text behandelt und muss das höhere 4,5:1-Verhältnis erreichen.
Berücksichtigt das Kontrastverhältnis Deckkraft?: Nein. Das Verhältnis basiert auf den massiven RGB-Werten, also flache jede halbtransparente Farbe gegen ihren tatsächlichen Hintergrund ab, bevor du sie im Kontrast-Checker prüfst.
Werden die Farben, die ich im Kontrast-Checker eingebe, irgendwohin gesendet?: Nein. Der Kontrast-Checker läuft vollständig in deinem Browser, sodass die eingegebenen Farben auf deinem Gerät bleiben und nichts auf einen Server hochgeladen wird.