Kostenloses Werkzeug · Ohne Anmeldung

WCAG-Kontrast-Checker für Text- und Hintergrundfarben

Dieser kostenlose Kontrast-Checker berechnet das Verhältnis von Text- und Hintergrundfarbe und vergleicht es mit den WCAG-AA- und AAA-Grenzwerten. Ändere die Hex-Werte oder wähle Farben aus. Die Berechnung erfolgt direkt in deinem Browser.

Farben prüfen

Gib Text- und Hintergrundfarbe ein. Vorschau und Ergebnisse aktualisieren sich sofort.

Vorschau mit deinen Farben

Großer Text

Normaler Fließtext zur Vorschau.

Kontrastverhältnis 5,47 zu 1

  • AA · normaler TextBestanden · mind. 4,5 : 1
  • AA · großer TextBestanden · mind. 3 : 1
  • AAA · normaler TextNicht bestanden · mind. 7 : 1
  • AAA · großer TextBestanden · mind. 4,5 : 1
  • AA · Bedienelemente und GrafikenBestanden · mind. 3 : 1

3 oder 6 Hex-Ziffern, zum Beispiel #0F766E oder #FFF. Bewertet wird der ungerundete Wert.

Welche Werte brauchst du?

Für Text in normaler Größe verlangt WCAG 2.2 AA in der Regel mindestens 4,5:1. Großer Text benötigt 3:1. Groß bedeutet mindestens 18 pt oder 14 pt bei fetter Schrift, entsprechend etwa 24 beziehungsweise 18,67 CSS-Pixeln. AAA verlangt 7:1 für normalen und 4,5:1 für großen Text.

Für visuelle Informationen zur Erkennung wichtiger Bedienelemente und Grafiken gilt unter den Voraussetzungen von Kriterium 1.4.11 ein Verhältnis von mindestens 3:1 zu angrenzenden Farben. Die Kriterien enthalten definierte Ausnahmen.

Was dieser Test abdeckt

Der Rechner vergleicht zwei deckende sRGB-Farben nach der WCAG-Formel für relative Leuchtdichte. Bei Verläufen, Bildern oder Transparenz musst du zuerst die tatsächlich sichtbaren Farben an der ungünstigsten Stelle bestimmen.

Ein bestandenes Farbpaar bewertet diesen Kontrast. Es weist keine vollständige Barrierefreiheit einer Website nach. Prüfe auch Fokuszustände, Fehlermeldungen, Hover-Zustände und die Bedeutung von Farbe ohne zusätzliche Kennzeichnung.

Originalquellen zur Berechnung

Mehr praktische Prüfungen findest du in der WCAG-Checkliste.

Bereit für den ersten Schritt?

Der Scanner funktioniert auch ohne eingebautes Widget. Prüfe zuerst eine wichtige Seite deiner Website.

Kostenlos scannenKostenloses Projekt anlegen

Praxiswissen für deine nächsten Schritte

Alle Artikel im Wissensbereich

Dein nächster Schritt

Was braucht deine Website?

Prüfe eine öffentliche Seite auf automatisch erkennbare Barrieren. Die Ergebnisse zeigen konkrete Fundstellen und helfen dir beim Priorisieren.

Kostenloser Website-Check

Ein sinnvoller Prüfablauf

  • Automatisch erkennbare Probleme finden
  • Tastatur und reale Abläufe manuell testen
  • Beheben, erneut prüfen und dokumentieren
Anleitung zum Website-Test