Kontrast-Checker nach WCAG.
Wähle Text- und Hintergrundfarbe und sieh sofort, ob der Kontrast den WCAG-Anforderungen genügt – mit Live-Vorschau und einem Vorschlag für die nächste Farbe, die Stufe AA besteht.
Normaler Text (AA) – der gängige Mindestwert für Fließtext bis etwa 18 px. Stufe AAA verlangt 7:1.
Großer Text (AA) – ab ca. 24 px oder 18,7 px fett genügt 3:1.
UI-Elemente & Grafik – Bedienelemente, Icons, Diagramme und Fokus-Rahmen brauchen mind. 3:1 zum Umfeld.
WCAG legt Mindestkontraste fest – für die meisten gesetzlichen Anforderungen (über EN 301 549, BFSG und EAA) zählt Stufe AA.
Kontrast ist nur ein Kriterium von vielen.
Gute Kontraste sind wichtig – aber sie sind nur eines von Dutzenden WCAG-Erfolgskriterien. Fehlende Alt-Texte, nicht bedienbare Tastatursteuerung oder unbeschriftete Formulare bleiben Barrieren, selbst wenn jede Farbe perfekt sitzt.
Willst du das ganze Bild? Der kostenlose Welcoma-Scan prüft deine Seite gegen die maschinell testbaren WCAG-Kriterien – nicht nur Kontraste – und zeigt dir priorisiert, wo echte Probleme liegen. Wie der Standard aufgebaut ist, liest du im WCAG-2.2-Ratgeber.
Häufige Fragen
Welcher Kontrastwert ist vorgeschrieben?
Für normalen Text gilt auf Stufe AA ein Mindestkontrast von 4,5:1, für großen Text 3:1. Bedienelemente und Grafiken brauchen mindestens 3:1. Für die höchste Stufe AAA steigen die Werte auf 7:1 bzw. 4,5:1.
Was zählt als „großer Text"?
Großer Text ist Text ab etwa 24 px – oder ab 18,7 px, wenn er fett gesetzt ist. Für ihn genügt der niedrigere Kontrast von 3:1, weil größere Schrift auch mit weniger Kontrast gut lesbar bleibt.
Gilt der Kontrast auch für Buttons und Icons?
Ja. Das WCAG-Kriterium für Nicht-Text-Kontrast verlangt für Bedienelemente, aussagekräftige Grafiken und Fokus-Indikatoren mindestens 3:1 gegenüber ihrer Umgebung.
Reicht ein guter Kontrast für WCAG-Konformität?
Nein. Kontrast ist nur eines von vielen Kriterien. Für ein vollständiges Bild brauchst du eine Prüfung über alle relevanten Punkte – etwa mit dem kostenlosen Scan oder einem Blick in die WCAG 2.2.
Wie wird der Kontrast berechnet?
Nach der offiziellen WCAG-Formel: Aus den Farben wird jeweils die relative Helligkeit (Luminanz) bestimmt, dann das Verhältnis der helleren zur dunkleren Farbe gebildet, jeweils mit einem festen Offset. Genau das macht dieser Checker.
Prüfe nicht nur Farben – prüfe die ganze Seite.
Gib deine URL ein und erhalte einen ehrlichen Überblick über deine Barrierefreiheit – kostenlos und unverbindlich.