Globales Tool Hub
Aktuelle Sprache: German

Contrast Checker

Vergleiche Text- und Hintergrundfarbe, um Kontrast und WCAG-Zugänglichkeit zu prüfen.

So funktioniert's

  1. Gib HEX-Werte für Vorder- und Hintergrund ein oder nutze die Farbwähler.
  2. Mit der Tauschen-Schaltfläche kannst du die Farben schnell wechseln.
  3. Prüfe unten das Kontrastverhältnis und die WCAG-Ergebnisse.

Nutze 6-stellige HEX-Werte (z. B. #111827).

Nutze 6-stellige HEX-Werte (z. B. #111827).

Kontrast-Kurzleitfaden

Prüfe hier schnell die Lesbarkeit und springe bei Bedarf in passende Leitfäden für konkrete Korrekturen.

Wann du dieses Tool nutzt

  • Vor dem Veröffentlichen neuer Farben für Buttons, Links oder Fließtext.
  • Wenn im Review Text als schwer lesbar auffällt.
  • Wenn Brandfarben auf hellen und dunklen Flächen geprüft werden sollen.

Schnelle Schritte

  1. HEX-Werte für Text (Vordergrund) und Hintergrund eingeben.
  2. Kontrastverhältnis und WCAG AA/AAA prüfen.
  3. Farben anpassen und erneut testen, bis wichtige Texte bestehen.

Häufige Fehler

  • Nur Überschriften prüfen und kleinen Fließtext auslassen.
  • Nur den Standardzustand prüfen statt auch Hover/Focus/Disabled.
  • Nach Gefühl entscheiden statt nach gemessenem Verhältnis.

Verwandte Contrast-Checker-Guides

Lies kurze Praxis-Guides zu niedrigem Kontrast und barrierefreien UI-Farbentscheidungen.