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. Du bekommst eine klare Übersicht, welche Farbpaare bestehen, welche durchfallen – und konkrete Farbvorschläge, mit denen du die Probleme behebst, ohne dein Design neu zu erfinden.

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).

Ehrlicherweise gehört dazu, 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.

„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-Check; 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. Wie es danach weitergeht, zeigen Farbkontraste richtig einstellen, die WCAG-Kriterien-Referenz und die weiteren Tools.