DE
English
Français
Español
ItalianoKostenloser Kontrast-Checker nach WCAG 2.2
Reicht Ihr Farbkontrast? In einer Sekunde geprüft.
Zu schwacher Kontrast ist der häufigste Barrierefreiheits-Fehler überhaupt. Prüfen Sie hier zwei Farben nach WCAG 2.2, oder scannen Sie gleich Ihre ganze Website auf Kontrastprobleme.
So sieht Ihre Überschrift aus
Und so liest sich normaler Fließtext in dieser Kombination. Können alle Ihre Besucher das mühelos lesen?
Automatische Messung nach der WCAG-Formel, ohne Gewähr. Sie ersetzt keine manuelle Prüfung durch Fachleute und keine Rechtsberatung.
Die ganze Website auf Kontrastfehler prüfen
Einzelne Farbpaare sind der Anfang. Der Scan findet jede Stelle mit zu schwachem Kontrast auf bis zu 10 Unterseiten, am Desktop und am Smartphone, mit den exakten Farbwerten.
Dauert rund zwei Minuten
Was Farbkontrast bedeutet und warum er so wichtig ist
Kontrast entscheidet darüber, ob Ihre Inhalte für alle Besucher lesbar sind. Und er ist einer der wenigen Aspekte der Barrierefreiheit, die sich exakt messen lassen.
Farbkontrast beschreibt den Helligkeitsunterschied zwischen zwei Farben, zum Beispiel zwischen Ihrem Text und dem Hintergrund dahinter. Die Web Content Accessibility Guidelines (WCAG) messen ihn als Kontrastverhältnis auf einer Skala von 1:1 (Farbe auf identischer Farbe) bis 21:1 (Schwarz auf Weiß). In die Berechnung fließt die relative Leuchtdichte beider Farben ein, also wie hell eine Farbe auf das menschliche Auge wirkt.
Warum das zählt: In Deutschland leben Millionen Menschen mit einer Sehbeeinträchtigung, und rund vier Prozent der Bevölkerung haben allein eine Farbsehschwäche. Dazu kommt der ganz normale Alltag, denn spätestens ab Mitte vierzig lässt die Kontrastempfindlichkeit des Auges messbar nach. Was für ein junges Auge am kalibrierten Monitor elegant wirkt, ist für viele Besucher schlicht nicht mehr zu entziffern.
Gleichzeitig ist zu schwacher Kontrast der häufigste Barrierefreiheits-Fehler im gesamten Web: Große Auswertungen wie die WebAIM-Million-Studie finden ihn Jahr für Jahr auf rund vier von fünf Startseiten. Der Grund ist meist kein böser Wille, sondern ein Design-Trend, denn hellgrauer Text auf weißem Grund wirkt modern und ruhig, scheitert aber regelmäßig an der WCAG-Messlatte.
Und schließlich ist Kontrast eine Rechtsfrage: Das Barrierefreiheitsstärkungsgesetz (BFSG) und der European Accessibility Act verlangen über die europäische Norm EN 301 549 die Einhaltung der WCAG auf Level AA, inklusive der Kontrastregeln. Für betroffene Unternehmen ist ein zu blasser Text damit kein Schönheitsfehler mehr, sondern ein messbarer Verstoß.
Was das Kontrastverhältnis bedeutet
Die WCAG messen Kontrast als Verhältnis zwischen der Leuchtdichte von Text- und Hintergrundfarbe, von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß).
4,5:1 für normalen Text (AA)
Das Pflicht-Level für Fließtext nach WCAG 1.4.3, und damit auch die Messlatte von BFSG und European Accessibility Act. Grauer Text auf Weiß scheitert hier am häufigsten.
3:1 für großen Text und UI (AA)
Ab 24 px (oder 18,5 px fett) reicht 3:1. Dasselbe Verhältnis gilt nach WCAG 1.4.11 für Bedien-Elemente wie Button-Ränder, Icons und Formularfelder.
7:1 für höchste Ansprüche (AAA)
Das Level für Menschen mit stärker eingeschränktem Sehen. Keine gesetzliche Pflicht, aber ein gutes Ziel für Texte mit hoher Bedeutung.
Was oft vergessen wird
Kontrast gilt auch für Text auf Bildern, Platzhalter in Formularen, Links im Fließtext und den Fokus-Rahmen. Genau solche Stellen findet der Website-Scan.
Wen schwacher Kontrast ausschließt
Kontrastfehler treffen nicht nur eine kleine Randgruppe. Sie machen Ihre Website für einen erstaunlich großen Teil Ihrer Besucher anstrengend oder unbenutzbar.
Menschen mit Sehschwäche
Grauer Star, Netzhauterkrankungen oder eine starke Fehlsichtigkeit senken die Kontrastempfindlichkeit deutlich. Blasser Text verschwimmt dann mit dem Hintergrund.
Menschen mit Farbsehschwäche
Rund jeder zwölfte Mann sieht Rot und Grün kaum auseinander. Unterscheidet sich ein Link nur durch den Farbton vom Fließtext, ist er für diese Besucher unsichtbar.
Ältere Besucher
Die Linse des Auges trübt mit den Jahren ein und lässt weniger Licht durch. Ab etwa 60 braucht das Auge ein Vielfaches an Kontrast im Vergleich zu einem Zwanzigjährigen.
Alle, die draußen surfen
Sonnenlicht auf dem Smartphone-Display verwandelt schwache Kontraste in einheitliches Grau. Wer unterwegs bestellen will und nichts lesen kann, bestellt woanders.
Nutzer einfacher Displays
Ältere Monitore, Beamer und günstige Panels stellen Farben flauer dar als das Designer-MacBook. Ein Kontrast an der Untergrenze kippt dort endgültig ins Unlesbare.
Jeder bei Müdigkeit
Abends, bei schummrigem Licht oder nach acht Stunden Bildschirmarbeit sinkt die Kontrastleistung jedes Auges. Guter Kontrast ist Komfort für alle, nicht nur Pflicht für wenige.
Die fünf häufigsten Kontrastfehler
In tausenden Scans sehen wir immer wieder dieselben Muster. Prüfen Sie Ihre Website gezielt auf diese fünf Klassiker.
- 1
Hellgrauer Text auf weißem Grund
Der Dauerbrenner: Fließtext in #999999 oder heller wirkt dezent, erreicht auf Weiß aber nur rund 2,8:1 statt der geforderten 4,5:1. Besonders oft betroffen sind Datumsangaben, Bildunterschriften und Footer-Texte.
- 2
Platzhalter-Text in Formularen
Der graue Beispieltext im Eingabefeld ist echter Inhalt, sobald er die einzige Beschriftung ist. Standard-Platzhalter vieler Frameworks liegen deutlich unter 4,5:1 und lassen Besucher raten, was ins Feld gehört.
- 3
Weiße Schrift auf Fotos und Verläufen
Auf dem dunklen Bereich des Bildes passt der Kontrast, auf dem hellen nicht mehr. Da sich Bilder je nach Bildschirmbreite verschieben, braucht Text auf Bildern eine Abdunkelung oder eine feste Farbfläche dahinter.
- 4
Links, die sich nur durch Farbe unterscheiden
Ein blassblauer Link im grauen Fließtext braucht 3:1 Kontrast zum umgebenden Text und zusätzlich eine zweite Kennzeichnung wie eine Unterstreichung. Sonst finden viele Besucher Ihre wichtigsten Klickziele nicht.
- 5
Blasse Buttons, Icons und Fokus-Rahmen
Seit WCAG 2.1 brauchen auch grafische Bedienelemente 3:1: Button-Ränder, Formularfeld-Konturen, Icons und der Rahmen, der beim Bedienen mit der Tastatur anzeigt, wo man gerade steht. Genau diese Stellen übersehen Design-Reviews am häufigsten.
Kontrast verbessern, ohne das Design zu opfern
Barrierefreier Kontrast heißt nicht Schwarz auf Weiß. Meist reichen kleine, gezielte Eingriffe.
Farben gezielt nachdunkeln
Oft fehlt nur eine Stufe: Aus einem zu hellen Grau wird ein #595959, aus dem blassen Markenblau eine dunklere Variante für Text. Der Charakter der Palette bleibt, der Checker oben zeigt sofort, wann es reicht.
Schriftgröße als Hebel nutzen
Großer Text ab 24 px (oder 18,5 px fett) braucht nur 3:1 statt 4,5:1. Eine etwas größere oder fettere Schrift kann eine hellere Farbe legal machen, gerade bei Überschriften auf Farbflächen.
Nie nur auf Farbe setzen
Links unterstreichen, Fehler zusätzlich mit Icon und Text markieren, Pflichtfelder nicht nur rot färben. Wo eine zweite Kennzeichnung existiert, hängt die Verständlichkeit nicht mehr am Farbsehen.
Alle Zustände mitprüfen
Hover, Fokus, besuchte Links und deaktivierte Elemente haben eigene Farben, die in Style-Guides gern vergessen werden. Prüfen Sie jede Zustandsfarbe einzeln, der Scan misst sie direkt im gerenderten Zustand.
So prüfen Sie Ihren Kontrast richtig
Vier Schritte von der einzelnen Farbe zur dauerhaft sauberen Website.
- 1
Farbpaar testen
Text- und Hintergrundfarbe oben eingeben. Das Verhältnis und alle WCAG-Level werden sofort berechnet, mit Live-Vorschau.
- 2
Website scannen
Der Scan prüft bis zu 10 Unterseiten und findet jede Stelle mit zu schwachem Kontrast, inklusive der gemessenen Farbwerte.
- 3
Nach Bericht beheben
Der Bericht zeigt jedes betroffene Element mit Ist-Wert und Soll-Wert. Farben anpassen, neu scannen, abhaken.
- 4
Dauerhaft absichern
Mit Monitoring wird Ihre Website regelmäßig neu geprüft. Rutscht bei einem Redesign ein blasses Grau rein, erfahren Sie es sofort.
Der rechtliche Rahmen: vom Standard zur Pflicht
Vier Regelwerke greifen ineinander und machen aus der Design-Empfehlung eine gesetzliche Anforderung.
WCAG 2.2
Der internationale Standard des W3C. Kriterium 1.4.3 verlangt 4,5:1 für normalen Text (Level AA), 1.4.6 verlangt 7:1 (Level AAA), 1.4.11 verlangt 3:1 für Bedienelemente und Grafiken.
EN 301 549
Die europäische Norm für barrierefreie IT. Sie übernimmt die WCAG auf Level AA als verbindliche Messlatte und ist der technische Maßstab hinter allen EU-Barrierefreiheitsgesetzen.
BFSG
Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025 für viele Websites, Shops und Apps in Deutschland. Verstöße können Bußgelder bis 100.000 Euro nach sich ziehen, und Kontrast ist der am leichtesten nachweisbare Verstoß.
European Accessibility Act
Die EU-Richtlinie 2019/882 hinter dem BFSG. Sie sorgt dafür, dass in allen EU-Ländern vergleichbare Anforderungen gelten, wer europaweit verkauft, kommt am Level AA nirgends vorbei.
Wo steht Ihre Website?
Der kostenlose Scan misst jeden Kontrast auf Ihrer Website und zeigt, wie weit Sie von Level AA entfernt sind.
Was automatische Messung kann und was nicht
Der Scan misst jeden maschinell prüfbaren Fall exakt: Text auf einfarbigen Hintergründen, Links, Buttons, Formularfelder und Icons, jeweils mit den tatsächlich gerenderten Farbwerten auf Desktop und Smartphone. Das deckt die große Mehrheit aller Kontrastfehler ab.
Text auf Fotos, Videos und Farbverläufen lässt sich nicht eindeutig automatisch bewerten, weil der Hintergrund an jeder Stelle anders ist. Solche Stellen markiert der Bericht zur manuellen Prüfung, damit nichts stillschweigend als bestanden gilt, was ein menschliches Auge noch ansehen sollte.
Und noch ein Hinweis: Die Einordnungen auf dieser Seite, etwa zu BFSG und European Accessibility Act, sind unverbindliche technische Ersteinschätzungen und keine Rechtsberatung. Für verbindliche Aussagen zu Ihren Pflichten wenden Sie sich bitte an eine Rechtsanwältin oder einen Rechtsanwalt.
Häufige Fragen zum Farbkontrast
Welches Kontrastverhältnis schreibt die WCAG vor?
Für normalen Text mindestens 4,5:1, für großen Text (ab 24 px oder 18,5 px fett) mindestens 3:1 (WCAG 1.4.3, Level AA). Grafische Bedienelemente brauchen ebenfalls 3:1 (WCAG 1.4.11). Level AAA verlangt 7:1 für normalen Text.
Ist der Kontrast-Check gesetzlich vorgeschrieben?
BFSG und European Accessibility Act verweisen über die EN 301 549 auf die WCAG-Kontrastregeln in Level AA. Zu schwacher Kontrast ist damit für betroffene Unternehmen ein echter Rechtsverstoß, und einer der am leichtesten messbaren.
Wie wird das Kontrastverhältnis berechnet?
Aus der relativen Leuchtdichte beider Farben nach der WCAG-Formel: (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe ist. Genau diese Berechnung nutzt der Checker oben, dieselbe wie Prüfwerkzeuge der Behörden.
Was zählt als großer Text?
Nach WCAG gilt Text ab 18 Punkt (rund 24 px) als groß, fetter Text schon ab 14 Punkt (rund 18,5 px). Für großen Text reicht ein Kontrast von 3:1 auf Level AA. Die beiden Chip-Reihen im Checker oben zeigen beide Bewertungen parallel an.
Gibt es Ausnahmen von der Kontrastpflicht?
Ja: Logos und Markennamen, rein dekorative Texte und Grafiken sowie deaktivierte Bedienelemente sind von den Kontrastanforderungen ausgenommen. Vorsicht aber bei Platzhalter-Texten in Formularen, die gelten als echter Inhalt und brauchen volle 4,5:1.
Mein Design sieht gut aus, reicht das nicht?
Was für normalsichtige Designer gut aussieht, kann für Menschen mit Sehschwäche unlesbar sein, rund vier Prozent der Bevölkerung haben allein eine Farbsehschwäche. Deshalb zählt das messbare Verhältnis, nicht der Eindruck.
Hilft ein Kontrast-Modus oder ein Overlay-Widget?
Ein zuschaltbarer Kontrast-Modus ist eine sinnvolle Ergänzung, ersetzt aber nicht die Pflicht, dass die Standard-Ansicht Level AA erfüllt. Die WCAG bewerten das, was alle Besucher ohne Zusatzklick sehen. Sauber gewählte Farben an der Quelle sind daher immer der erste Schritt.
Findet der Website-Scan alle Kontrastprobleme?
Er findet alle maschinell messbaren Fälle: Text auf einfarbigen Hintergründen, Links, Buttons, Formularfelder. Text auf Fotos oder Verläufen braucht zusätzlich ein menschliches Auge, solche Stellen markiert der Bericht zur manuellen Prüfung.
Prüfen Sie Ihren Kontrast, bevor es Ihre Kunden tun.
Farbpaar oben testen, Website scannen, Bericht mit exakten Farbwerten erhalten. Kostenlos und ohne Installation.
Zum Kontrast-Checker