Farbkontrast-Prüfer
Überprüfen Sie das Farbkontrastverhältnis für WCAG-Barrierefreiheit. Testen Sie Vorder- und Hintergrundfarben.
The quick brown fox jumps over the lazy dog
Fließtext in 16px – genau das lesen Ihre Besucher später wirklich.
WCAG-Barrierefreiheitsrichtlinien
AA Normal (4.5:1): Mindestkontrast für normalen Text. Erforderlich für die meisten Webinhalte.
AA Large (3:1): Mindestkontrast für großen Text (18pt+ oder 14pt+ fett).
AAA Normal (7:1): Erhöhter Kontrast für normalen Text. Höchster Barrierefreiheitsstandard.
AAA Large (4.5:1): Erhöhter Kontrast für großen Text. Empfohlen für kritische Inhalte.
Voreinstellungen
Verlauf
WCAG-Barrierefreiheitsrichtlinien
Der Farbkontrast-Prüfer hilft Ihnen sicherzustellen, dass Ihre Website die WCAG-Barrierefreiheitsstandards erfüllt.
Beliebte Werkzeuge
Über Farbkontrast-Prüfer
Legen Sie Vorder- und Hintergrundfarbe per Hex-Code oder Farbwähler fest, und dieser Checker nennt das Kontrastverhältnis nach WCAG 2.1, mit Bestanden- oder Nicht-bestanden-Markierungen für AA bei normalem Text (4,5:1), AA bei großem Text (3:1), AAA normal (7:1) und AAA groß (4,5:1). Eine Live-Probe zeigt das Paar in Überschriften- und Fließtextgröße – genau das, was Designteams brauchen, bevor sie eine Palette freigeben. Die Berechnung der relativen Leuchtdichte läuft in Ihrem Browser, gespeicherte Paare bleiben im lokalen Speicher.
Anwendungsfälle
Anleitung
Legen Sie Ihre Textfarbe im Feld „Vordergrund“ fest – entweder über das Farbfeld oder indem Sie einen Hex-Wert wie #4f46e5 in das Feld daneben eintippen.
Legen Sie die Seitenfarbe im Feld „Hintergrund“ genauso fest; die große Aa-Vorschau färbt sich sofort neu und das Kontrast-Badge oben rechts darin wird aktualisiert.
Lesen Sie die vier WCAG-Karten unter der Vorschau – AA Normal, AA Groß, AAA Normal und AAA Groß – jede zeigt zu ihrem Grenzwert ein grünes Häkchen oder ein rotes Kreuz.
Drücken Sie die Tauschpfeile zwischen den beiden Farbfeldern, um die umgekehrte Kombination zu testen, oder klicken Sie eine Vorlage wie „Weiß auf Dunkel“ oder „GitHub Dark“ an, um eine bekannte Kombination zu laden.
Drücken Sie unter der großen Kontrastzahl auf „Kopieren“, um das Verhältnis und alle vier Bestanden-/Nicht-bestanden-Ergebnisse in die Zwischenablage zu legen, oder auf „Speichern“, um das Farbpaar im Verlauf abzulegen.
Profi-Tipps
- Fügen Sie Ihre Inhalte direkt ein – der Farbkontrast-Checker erkennt gängige Eingabemuster und wendet automatisch sinnvolle Standardwerte an.
- Nutzen Sie Tastenkürzel (Strg/Cmd+A zum Markieren, Strg/Cmd+C zum Kopieren), um schneller mit dem Farbkontrast-Checker zu arbeiten.
- Teilen Sie sehr große Eingaben in Blöcke auf – die meisten Browser-Tabs verkraften zwar megabyteweise Text, das Parsen riesiger Payloads kann die Oberfläche aber kurz einfrieren lassen.
- Der Farbkontrast-Checker protokolliert und speichert Ihre Eingaben nicht. Wenn Sie einen Verlauf brauchen, kopieren Sie wichtige Ergebnisse in eine lokale Datei oder eine Notiz-App.
- Kombinieren Sie den Farbkontrast-Checker mit anderen Tools auf dieser Seite (Formatierern, Konvertern, Encodern), um komplette Daten-Workflows aufzubauen, ohne den Browser zu verlassen.
Häufig gestellte Fragen
Ja, vollständig kostenlos – ohne Anmeldung, ohne API-Schlüssel, ohne Wasserzeichen und ohne Nutzungslimits.
Nein. Der Farbkontrast-Checker läuft vollständig clientseitig in Ihrem Browser. Ihre Eingaben erreichen unsere Server nie.
Es gibt keine feste Obergrenze, aber ab einigen Megabyte Eingabe müssen Sie je nach Arbeitsspeicher Ihres Geräts mit Verzögerungen rechnen.
Ja. Ergebnisse, die Sie mit dem Farbkontrast-Checker erzeugen, dürfen Sie frei in privaten wie kommerziellen Projekten verwenden.
Der Großteil der Logik läuft in clientseitigem JavaScript, sodass Sie nach dem ersten Laden oft auch ohne Netzwerkverbindung weiterarbeiten können.
Keine. Da der Farbkontrast-Checker in Ihrem Browser läuft, können Sie so viele Eingaben verarbeiten, wie Ihre Hardware zulässt – ohne API-Schlüssel und ohne Drosselung.