Kontrast-Prüfer 2026

So funktioniert der Kontrast-Prüfer

Der Prüfer berechnet das Kontrastverhältnis zweier Farben nach der WCAG-2.1-Formel. Zunächst werden beide HEX-Werte in linearisierte sRGB-Komponenten zerlegt. Daraus ergibt sich die relative Luminanz, gewichtet nach der Empfindlichkeit des menschlichen Auges (Grün am stärksten, Blau am schwächsten). Schließlich liefert die Formel (L_hell + 0,05) ÷ (L_dunkel + 0,05) das Verhältnis.

Werte zwischen 1:1 (identisch) und 21:1 (Schwarz auf Weiß) sind möglich. Der Browser zeigt zusätzlich eine Live-Vorschau Ihres Texts auf gewähltem Hintergrund – der wichtigste Praxistest neben dem mathematischen Wert.

WCAG-Spezifikation

WCAG 2.1 (W3C-Empfehlung, Juni 2018) definiert in Kriterium 1.4.3 die Mindestkontrastwerte. Das deutsche BFSG (in Kraft seit 28. Juni 2025) und die EU-Webaccessibility-Richtlinie verweisen auf WCAG 2.1 Level AA als Mindeststandard. Die BITV 2.0 erweitert dies für öffentliche Stellen.

WCAG 3.0 wird mittelfristig die kontrastrelevanten Kriterien überarbeiten – mit dem APCA-Algorithmus (Advanced Perceptual Contrast Algorithm), der Farbverhältnisse präziser an die menschliche Wahrnehmung anpasst. Bis WCAG 3.0 finalisiert ist, gilt jedoch weiterhin WCAG 2.1.

Anwendungsfälle

Webdesign: Vor jeder Farbentscheidung Kontrast prüfen, um spätere Re-Designs zu vermeiden.
Audit: Bestehende Sites systematisch auf WCAG-Verstöße durchsuchen.
Brand-Guidelines: Kontrastregeln in Designsysteme aufnehmen, um konsistente Barrierefreiheit zu sichern.
BFSG-Konformität: Ab Juni 2025 sind viele B2C-Sites gesetzlich verpflichtet, mindestens AA zu erfüllen.
Print: Auch Druckmaterial profitiert – PDF-Berichte, Plakate, Verpackungen.

Datenschutz: Client-Side

Die Kontrastberechnung passiert vollständig im Browser. Es werden keine Farbwerte übertragen, keine Logs erfasst, keine Cookies gesetzt. Sie können das Tool ohne Bedenken auch für vertrauliche Markenfarben nutzen, die noch nicht öffentlich sind.

Damit erfüllt der Prüfer die DSGVO-Anforderungen ohne weitere Maßnahmen wie Einwilligungen oder Datenschutzerklärungen für die Tool-Nutzung.

Typische Fehler

Hellgrau auf Weiß: #aaaaaa auf Weiß ergibt nur 2,3:1 – unter AA. Sehr verbreitet, aber unzulässig.
Markenfarbe blind übernehmen: Viele Brand-Blautöne haben gegen Weiß zu wenig Kontrast. Lösung: dunklere Variante für Text, helle für Akzente.
Hover-States vergessen: Auch :hover und :focus müssen WCAG-konform sein – oft übersehen.
Text auf Bild ohne Overlay: Variabler Hintergrund braucht halbtransparente Schicht für gleichmäßigen Kontrast.
Zu viel auf Großtext setzen: 24 px ist nicht selbstverständlich groß – Mengentext ist meistens 14–16 px und damit Normaltext.

Häufige Fragen

Das Kontrastverhältnis nach WCAG (Web Content Accessibility Guidelines) misst den Helligkeitsunterschied zwischen Text und Hintergrund. Es wird als Verhältnis ausgedrückt – von 1:1 (kein Kontrast) bis 21:1 (maximaler Kontrast: Schwarz auf Weiß). Die Formel basiert auf der relativen Luminanz beider Farben unter Berücksichtigung der menschlichen Augenempfindlichkeit. WCAG 2.1 fordert für barrierefreien Web-Inhalt mindestens 4,5:1 für Normaltext (AA-Level).

AA ist die Standard-Konformitätsstufe für barrierefreie Websites: 4,5:1 für Normaltext, 3:1 für Großtext (≥ 18 pt oder 14 pt fett). AAA ist die strengste Stufe: 7:1 für Normaltext, 4,5:1 für Großtext. EU-Recht und das deutsche BFSG (Barrierefreiheitsstärkungsgesetz, ab Juni 2025) verlangen mindestens AA. AAA empfiehlt sich für Texte mit hoher Bedeutung wie medizinische Informationen oder Behörden.

WCAG definiert Großtext als mindestens 18 Punkt (24 px) oder 14 Punkt (18,66 px) bei fettem Schriftschnitt. Großtext ist leichter lesbar, daher reicht ein geringerer Kontrast. Bei Mengentext, Formularbeschriftungen und Buttons gilt aber meistens der strengere Normaltext-Wert von 4,5:1 (AA).

Reine Dekoration (Hintergrundbilder ohne Text), inaktive UI-Elemente, Logos und Markennamen sowie Texte in Bildern mit ausreichend hohem visuellen Kontrast sind ausgenommen. Trotzdem sollten alle wesentlichen UI-Komponenten und Zustandsindikatoren (Focus, Error) mindestens 3:1 zu ihrer Umgebung haben (WCAG 1.4.11 Non-Text Contrast).

Menschen mit Sehbeeinträchtigung (rund 8 % der männlichen Bevölkerung haben Farbsehschwäche, viele Senioren reduzierte Sehschärfe) können den Text nicht lesen. Auch normale Nutzer im Sonnenlicht oder auf schlechten Displays kämpfen. Praktisch: höhere Bounce-Rates, schlechtere Conversion. Rechtlich: Verstoß gegen BITV 2.0, BFSG, EU-Webaccessibility-Richtlinie – Bußgelder möglich.

Schatten und Outlines sind keine WCAG-konforme Lösung – das Verfahren misst nur den Direktkontrast Text/Hintergrund. Für Texte über Bildern müssen Sie einen halbtransparenten Overlay-Layer einfügen, der den effektiven Hintergrund auf einen ausreichend kontrastierenden Wert bringt. Alternativ den Text auf einen festen farbigen Streifen setzen.

Verbreitet sind WebAIM Contrast Checker, Stark (Figma-Plugin), axe DevTools und Lighthouse (in Chrome integriert). Designer arbeiten oft mit Tokens-Systemen, die WCAG-Kontrast bereits in der Definition prüfen. Unser Tool entspricht den gleichen Algorithmen und liefert identische Ergebnisse.

Die relative Luminanz wird aus den linearisierten sRGB-Komponenten gewichtet: 0,2126·R + 0,7152·G + 0,0722·B. Grün hat den größten Anteil, weil das menschliche Auge dafür am empfindlichsten ist. Anschließend ergibt sich das Kontrastverhältnis als (L_hell + 0,05) ÷ (L_dunkel + 0,05). Diese Formel ist in WCAG 2.x exakt vorgeschrieben.

Gelb hat einen sehr hohen Grünanteil und damit eine hohe Luminanz – fast wie Weiß. Schwarz hat minimale Luminanz. Das ergibt ein Verhältnis von ca. 19,5:1 – nahe am Maximum. Deshalb sind Warnschilder oft schwarz auf gelb. Andere starke Kombinationen: dunkles Blau auf Weiß, Schwarz auf Hellblau.