Ressourcen · Werkzeuge
Kontrast-Check: Farbkontraste deiner Website prüfen
Zu schwacher Farbkontrast ist der häufigste messbare Barrierefreiheits-Mangel im Web – und zugleich der am leichtesten behebbare. Dieser Kontrast-Check nimmt dir das Nachmessen ab: URL eingeben, und das Tool prüft jede Text-Hintergrund-Kombination deiner Seite gegen die Mindestwerte der WCAG – mit Bewertung und konkreten Farbvorschlägen.
Kostenloses Tool · Ergebnis in Sekunden
Der Kontrast-Check: URL eingeben, Farbkontraste prüfen
Das Tool lädt deine Seite, liest die tatsächlich gerenderten Text- und Hintergrundfarben aus und bewertet jede Kombination nach den WCAG-Mindestwerten – mit konkreten Farbvorschlägen zum Nachbessern.
Zwei Farben direkt prüfen
Für einzelne Farbpaare, z. B. aus deinem Styleguide: Farbe wählen oder Hex-Wert eintippen – das Verhältnis wird sofort berechnet.
Normaler Text: Die Barrierefreiheit beginnt beim Lesen.
Großer Text ab 24 px
Kontrastverhältnis
–
Ganze Farbpalette vergleichen
Alle Farben deines Designs auf einen Blick gegeneinander: Hex-Werte eintragen (durch Leerzeichen, Komma oder Zeilenumbruch getrennt, bis zu zehn Farben) – die Tabelle zeigt jede Kombination aus Text- und Hintergrundfarbe mit Verhältnis und Bewertung.
Lesart: AA = für jeden Text geeignet (ab 4,5:1), nur große Schrift = ab 3:1 (ab 24 px bzw. 18,66 px fett, auch für Bedienelemente nach 1.4.11), fällt durch = unter 3:1.
Das Wichtigste in Kürze
- Der Check misst die tatsächlich gerenderten Farben: Er lädt die Seite, lässt den Browser das komplette CSS auflösen und liest Text- und Hintergrundfarbe inklusive Vererbung und Transparenzen aus – nicht die Werte aus dem Designentwurf.
- Bewertet wird nach WCAG-Stufe AA: 4,5:1 für normalen Text, 3:1 für großen Text ab 24 px beziehungsweise 18,66 px fett, 3:1 für Bedienelemente und aussagekräftige Grafiken.
- Entscheidend ist der Helligkeitsunterschied, nicht der Farbton. Deshalb fallen Rot und Grün nebeneinander durch, obwohl sie gut unterscheidbar aussehen.
- Vier Dinge kann kein automatischer Check sehen: Text auf Bildern und Verläufen, Zustände wie Hover und Fokus, den Dark Mode und Inhalte, die erst JavaScript erzeugt.
- Stand Februar 2026 fand die WebAIM Million auf 83,9 % von einer Million Startseiten zu geringen Textkontrast – der mit Abstand häufigste messbare Verstoß, und meist mit einer geänderten Farbvariablen behoben.
- Die Auswertung läuft in deinem Browser; der Server ruft die eingegebene Seite nur einmal ab. Weder die URL noch das Ergebnis werden gespeichert, eine E-Mail-Adresse braucht es nicht (Datenschutzhinweis).
- Kontrast ist ein Kriterium von 55. Wie der Check in einen vollständigen Prüfablauf passt, steht unter Barrierefreiheit selbst testen.
Was dieser Kontrast-Check prüft – und was nicht
Der Check lädt deine Seite, lässt den Browser das komplette CSS auflösen und liest für jedes Textelement die tatsächlich gerenderte Text- und Hintergrundfarbe aus – inklusive Vererbung, Transparenzen und übereinanderliegender Flächen. Bewertet wird nach WCAG 1.4.3 „Kontrast (Minimum)“ auf Stufe AA: mindestens 4,5:1 für normalen Text, 3:1 für großen Text (ab 24 px bzw. 18,66 px fett).
Dazu gehört, was ein automatischer Check nicht sehen kann:
- Text auf Bildern und Verläufen – der Hintergrund ist dort keine einzelne Farbe. Das Tool zählt diese Stellen und weist sie zum manuellen Nachmessen aus.
- Zustände wie Hover, Fokus oder geöffnete Menüs sowie Dark Mode und mobile Ansichten – geprüft wird der Ausgangszustand in Desktop-Breite.
- Bedienelemente und Grafiken: Rahmen, Icons und Fokus-Indikatoren brauchen nach 1.4.11 „Nicht-Text-Kontrast“ 3:1 – das misst du gezielt mit dem Zwei-Farben-Checker nach.
- Inhalte, die erst JavaScript erzeugt – der Check sieht das ausgelieferte HTML.
Automatische Prüfungen finden ohnehin nur rund ein Drittel aller Barrierefreiheits-Probleme. Wie der Kontrast-Check in einen vollständigen Prüfablauf passt, zeigt Barrierefreiheit selbst testen.
Wie das Kontrastverhältnis funktioniert
Hinter dem Wert steckt keine Geschmacksfrage, sondern eine Formel: Aus beiden Farben wird die relative Leuchtdichte berechnet – vereinfacht gesagt, wie hell eine Farbe auf das Auge wirkt. Das Verhältnis der beiden Helligkeiten ergibt eine Zahl zwischen 1:1 (identische Farben) und 21:1 (Schwarz auf Weiß). Deshalb können zwei Farben, die nebeneinander gut unterscheidbar aussehen (etwa Rot und Grün), trotzdem durchfallen: Für den Kontrast zählt der Helligkeitsunterschied, nicht der Farbton.
| Anwendungsfall | AA (Pflicht) | AAA |
|---|---|---|
| Normaler Text | 4,5:1 | 7:1 |
| Großer Text | 3:1 | 4,5:1 |
| Bedienelemente & Grafiken | 3:1 | – |
„Großer Text“ meint Schrift ab 24 px bzw. ab 18,66 px in fett. Ausgenommen von der Kontrastpflicht sind Logos, rein dekorativer Text und inaktive (disabled) Bedienelemente. Alle Werte, Fallen und Praxis-Tipps im Detail: Farbkontraste richtig einstellen.
Wen schwache Kontraste ausschließen
Kontrast ist kein Nischenthema: Millionen Menschen in Deutschland leben mit einer Sehbehinderung, dazu kommen Farbsinnstörungen (rund 8 % der Männer) und die ganz normale altersbedingte Abnahme der Kontrastempfindlichkeit – ab etwa 50 braucht das Auge deutlich mehr Helligkeitsunterschied für dieselbe Lesbarkeit. Und situativ betrifft es alle: Sonne auf dem Display, ein schlechter Beamer, der Blaulichtfilter am Abend. Guter Kontrast ist damit ein Paradebeispiel für den Curb-Cut-Effekt – was für einige notwendig ist, hilft allen.
Kontrast ist Pflicht: BFSG, EN 301 549 und WCAG
Die Kontrast-Mindestwerte sind keine Empfehlung. Für private Unternehmen macht das BFSG sie über die EN 301 549 verbindlich, für öffentliche Stellen gilt dasselbe über die BITV 2.0 – in beiden Fällen ist WCAG-Stufe AA der Maßstab, und dazu gehören 1.4.3 und 1.4.11. Ein durchgefallener Kontrast ist also nicht nur ein UX-Problem, sondern ein rechtliches Risiko. Ob dein Angebot unter das Gesetz fällt, klärt der BFSG-Schnelltest; den Gesamtzustand deiner Website bewertet die BFSG-Prüfung.
Mehr als Kontrast: Farbe nie als einziges Signal
Wer alle Kontrastwerte erfüllt, kann trotzdem Menschen aussperren – nämlich dann, wenn eine Information nur über Farbe transportiert wird. Kriterium 1.4.1 „Benutzung von Farbe“ verlangt ein zweites Merkmal: die Unterstreichung beim Link, Text oder Symbol bei Fehlermeldungen, Beschriftungen oder Muster in Diagrammen. Der schnelle Selbsttest: Seite gedanklich in Graustufen schalten – geht dabei eine Information verloren, fehlt das zweite Signal.
Häufige Fragen zum Kontrast-Check
Warum weicht das Ergebnis von axe oder Lighthouse ab?
Alle seriösen Tools rechnen mit derselben WCAG-Formel – Unterschiede entstehen dadurch, welche Elemente geprüft werden. Dieser Check bewertet das ausgelieferte HTML in Desktop-Breite; axe & Co. laufen im Browser und sehen auch Inhalte, die JavaScript nachlädt. Für die verbindliche Aussage zählt immer die gerenderte Seite im echten Browser – der Check ist die schnelle, gründliche Erstdiagnose.
Werden meine Daten oder die geprüfte Seite gespeichert?
Nein. Die eingegebene Adresse wird nur verwendet, um die Seite einmalig abzurufen, die Analyse läuft direkt in deinem Browser. Es werden weder URL noch Ergebnisse gespeichert – Details im Datenschutzhinweis.
Warum kann das Tool manche Seiten nicht prüfen?
Manche Websites blockieren automatisierte Abrufe (Bot-Schutz, Firewalls) oder bauen ihre Inhalte komplett per JavaScript auf – dann kommt beim Check nichts Prüfbares an. In dem Fall hilft der Zwei-Farben-Checker mit den Werten aus deinem Styleguide oder ein Browser-Tool wie axe DevTools direkt auf der Seite.
Reicht ein bestandener Kontrast-Check für die Barrierefreiheit?
Nein – Kontrast ist ein Kriterium von rund fünfzig. Er ist aber ein guter Start, weil er messbar ist und viele Menschen betrifft. Die nächsten Schritte: Barrierefreiheit selbst testen und die BFSG-Checkliste durchgehen.
Fazit
Kontrast ist das dankbarste Barrierefreiheits-Thema: klar messbar, schnell geprüft, meist mit einer kleinen Farbanpassung behoben – und der Effekt kommt sofort bei allen an. Nutze den Check als Einstieg, miss Sonderfälle mit dem Zwei-Farben-Checker nach und verankere die geprüften Werte fest in deiner Palette. Farbe geprüft – jetzt die Auszeichnung: Dieselbe URL nimmt auch der Struktur-Check entgegen und prüft sie gegen zwölf weitere Punkte. Wie es danach weitergeht, zeigen Farbkontraste richtig einstellen, die WCAG-Kriterien-Referenz und die weiteren Tools.