Visuelle Hierarchie
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Lesbarkeit ist entscheidend.
Ein Kontrastprüfer ist ein Barrierefreiheitstool, das den Helligkeitsunterschied zwischen Vorder- und Hintergrundfarben misst. Es berechnet das Kontrastverhältnis und bewertet, ob Ihre Farbkombination den WCAG 2.1-Standards entspricht. Der Kontrastprüfer von Color Taste liefert sofortige Bestehen/Nichtbestehen-Ergebnisse für AA- und AAA-Stufen sowie automatische Korrekturvorschläge, wenn Ihre Farben die Anforderungen nicht erfüllen.
Überprüfen Sie, ob Ihre Farben den WCAG-AA-Standards entsprechen: 4,5:1 für normalen Text und 3:1 für großen Text und UI-Komponenten.
Prüfen Sie gegen den strengeren AAA-Standard: 7:1 für normalen Text und 4,5:1 für großen Text.
Testen Sie den Kontrast für normalen Text, großen Text (18pt+), Schaltflächen, Eingaberahmen, Symbole und andere UI-Elemente.
Geben Sie Ihre Text-/Vordergrundfarbe im HEX-, RGB- oder HSL-Format in das erste Eingabefeld ein oder fügen Sie sie ein.
Geben Sie Ihre Hintergrundfarbe in das zweite Feld ein. Sehen Sie die Live-Vorschau in Echtzeit aktualisiert.
Das Kontrastverhältnis wird automatisch berechnet. Grüne Häkchen zeigen Bestehen, rote Kreuze zeigen Nichtbestehen der WCAG-Stufen an.
Wenn Ihre Kombination nicht besteht, klicken Sie auf den automatischen Korrekturvorschlag, um Ihre Farben anzupassen, während die Designabsicht erhalten bleibt.
Erhalten Sie Echtzeit-Berechnungen des Kontrastverhältnisses mit Bestehen/Nichtbestehen-Ergebnissen für beide AA- und AAA-Standards.
Wenn der Kontrast nicht ausreicht, erhalten Sie intelligente Vorschläge, die Ihre Farben minimal anpassen, um die Barrierefreiheitsanforderungen zu erfüllen.
Sehen Sie genau, wie Ihr Text auf Ihrer Hintergrundfarbe aussieht, mit Echtzeit-Vorschauen für verschiedene Textgrößen.
Arbeiten Sie in Ihrem bevorzugten Farbformat. Der Prüfer übernimmt alle Konvertierungen automatisch.
Überprüfen Sie die Barrierefreiheit während des Designprozesses.
Validieren Sie den Kontrast im Code vor der Veröffentlichung.
Stellen Sie sicher, dass Token-Paletten den WCAG-Standards entsprechen.
Prüfen und beheben Sie Kontrastprobleme im großen Maßstab.
WCAG 2.1 definiert Mindestkontrastverhältnisse für verschiedene Inhaltstypen und Konformitätsstufen:
4,5:1 für normalen Text, 3:1 für großen Text (18pt oder 14pt fett). Dies ist das häufigste Konformitätsziel.
7:1 für normalen Text, 4,5:1 für großen Text. Der Goldstandard für maximale Barrierefreiheit.
Mindestens 3:1 für Schaltflächen, Eingaberahmen, Symbole und jedes grafische Element, das eine Bedeutung vermittelt.
Für WCAG AA: Normaler Text benötigt mindestens 4,5:1, großer Text (18pt oder 14pt fett) benötigt mindestens 3:1 und Nicht-Text-UI-Komponenten benötigen mindestens 3:1.
AAA ist ein strengerer Standard: 7:1 für normalen Text und 4,5:1 für großen Text. Die meisten Designsysteme zielen auf AA als Minimum ab, mit AAA als erstrebenswertem Ziel für kritische Inhalte.
Ja. Der Kontrastprüfer von Color Taste akzeptiert HEX-, RGB- und HSL-Farbformate. Geben Sie Ihre Farben in einem beliebigen Format ein, und das Tool übernimmt die Konvertierung automatisch.
Wenn Ihre Farbkombination nicht besteht, schlägt Color Taste angepasste Farben vor, die die WCAG-Anforderungen erfüllen und gleichzeitig so nah wie möglich an Ihrer ursprünglichen Designabsicht bleiben. Klicken Sie auf den Vorschlag, um ihn sofort anzuwenden.
Ja, der Kontrastprüfer von Color Taste ist völlig kostenlos. Keine Anmeldung, keine Wasserzeichen, keine Nutzungsbeschränkungen. Überprüfen Sie so viele Farbkombinationen, wie Sie möchten.