accessonaut.

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.

Zum Beispiel #0f172a oder #fff. Berechnung lokal im Browser.

So sehen deine Farben aus.

Ein gut lesbarer Text hilft Menschen, Inhalte leichter zu verstehen.

Kontrastverhältnis

17,8525:1

Die Bewertung verwendet den ungerundeten Wert.

  • Normaler Text · AA ab 4,5:1Erfüllt
  • Großer Text · AA ab 3:1Erfüllt
  • Normaler Text · AAA ab 7:1Erfüllt
  • Großer Text · AAA ab 4,5:1Erfüllt
  • Relevante Bedienelemente und Grafiken ab 3:1Erfüllt

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.

Praxiswissen für deine nächsten Schritte

Alle Artikel im Wissensbereich