webmaster.de
SEO & WEBSITES

Farb- und Kontrast-Checker

Den Helligkeitskontrast zweier Farben berechnen und gegen WCAG AA sowie AAA einordnen.

Keine DatenübertragungKostenlosOhne Anmeldung
#
Lesbarer TextVorschau für Fließtext und UI-Beschriftungen
BereitDein Ergebnis erscheint hier.

Lokal im Browser · Deine Eingaben werden nicht übertragen oder gespeichert.

ANWENDUNG & EINORDNUNG

Kontrast prüfen: Das solltest du wissen

Den Helligkeitskontrast zweier Farben berechnen und gegen WCAG AA sowie AAA einordnen. Das Werkzeug setzt die eigentliche Aufgabe an die erste Stelle; die folgenden Hinweise helfen dir, das Ergebnis korrekt zu verwenden und typische Fehlentscheidungen zu vermeiden.

SCHRITT FÜR SCHRITT

So erhältst du ein nachvollziehbares Ergebnis

  1. Ziel festlegen: Entscheide vor der Eingabe, welche konkrete Frage der Farb- und Kontrast-Checker beantworten soll. So verwechselst du einen Messwert oder erzeugten Wert nicht mit einer vollständigen fachlichen Bewertung.
  2. Eingabe kontrollieren: Prüfe Schreibweise, Format und Ausgangsdaten. Schon ein zusätzliches Zeichen, eine falsche Einheit oder eine abweichende URL kann das Ergebnis verändern.
  3. Ausgabe einordnen: Vergleiche das Resultat mit den Hinweisen und Grenzen auf dieser Seite. Bei wichtigen Änderungen solltest du mindestens eine zweite Prüfung oder eine offizielle Dokumentation heranziehen.
  4. Änderung verifizieren: Teste nach der Übernahme erneut unter realen Bedingungen. Dokumentiere bei Website-, Netzwerk- oder Sicherheitsaufgaben Ausgangszustand und Ergebnis, damit du Änderungen zurücknehmen kannst.

Die Verarbeitung erfolgt lokal in deinem Browser. Trotzdem solltest du vertrauliche Werte nur so lange geöffnet lassen, wie du sie für die konkrete Aufgabe brauchst.

TYPISCHE ANWENDUNGEN

Wann dir dieses Werkzeug hilft

1

Text- und Hintergrundfarben vor einem Relaunch prüfen.

2

Button-Beschriftungen barrierefrei gestalten.

3

Design-Tokens für helle und dunkle Oberflächen testen.

KONKRETES BEISPIEL

Vom Eingabewert zum Ergebnis

Eingabe: #1A1A1A als Text auf #FFFFFF.

Ergebnis: Das Kontrastverhältnis erfüllt die Anforderungen für normalen Text deutlich.

ERGEBNIS VERSTEHEN

So liest du die Ausgabe richtig

  • Normalen und großen Text getrennt bewerten.
  • Hover-, Fokus- und deaktivierte Zustände mitprüfen.
  • Kontrast ersetzt keine Prüfung von Schriftgröße und Lesbarkeit.
GRENZEN & SICHERHEIT

Was das Ergebnis nicht beweist

Der Checker bewertet zwei feste Farben, nicht transparente Ebenen oder Bildhintergründe.

Eine bestandene Kontrastprüfung allein macht eine Oberfläche noch nicht vollständig barrierefrei.

Häufige Fragen zum Farb- und Kontrast-Checker

Wofür eignet sich der Farb- und Kontrast-Checker?

Den Helligkeitskontrast zweier Farben berechnen und gegen WCAG AA sowie AAA einordnen. Typische Einsätze sind Text- und Hintergrundfarben vor einem Relaunch prüfen und Button-Beschriftungen barrierefrei gestalten.

Wie ist das Ergebnis beim Farb- und Kontrast-Checker zu bewerten?

normalen und großen Text getrennt bewerten. Hover-, Fokus- und deaktivierte Zustände mitprüfen.

Welche Grenzen hat der Farb- und Kontrast-Checker?

Der Checker bewertet zwei feste Farben, nicht transparente Ebenen oder Bildhintergründe. Eine bestandene Kontrastprüfung allein macht eine Oberfläche noch nicht vollständig barrierefrei.