Kontrast-Checker: So prüfen Sie Farben nach WCAG-Richtlinien

Im Kern ist die Sache simpel: Ein Kontrast-Checker vergleicht zwei Farben miteinander und berechnet das sogenannte Kontrastverhältnis. Dieses Verhältnis wird als Zahlenwert ausgedrückt – zum Beispiel 4,5:1 oder 7:1. Je höher die Zahl, desto stärker heben sich Vorder- und Hintergrund voneinander ab. Schwarz auf Weiß erreicht den Maximalwert von 21:1, während Weiß auf Weiß logischerweise bei 1:1 liegt. Zwischen diesen Extremen bewegt sich die gesamte Farbwelt.

Aber warum reicht das eigene Auge nicht aus? Ganz einfach: Weil unsere Wahrnehmung subjektiv ist. Was auf Ihrem kalibrierten Monitor gut aussieht, kann auf einem älteren Laptop oder einem Smartphone in der Sonne völlig anders wirken. Dazu kommt, dass rund 8 Prozent aller Männer und etwa 0,5 Prozent der Frauen eine Form von Farbsehschwäche haben. Diese Menschen sehen Ihre sorgfältig ausgewählte Farbpalette unter Umständen komplett anders.

Ein Kontrast-Checker nimmt die Subjektivität aus der Gleichung. Er rechnet nach einer festgelegten Formel, die auf der relativen Luminanz der Farben basiert. Das klingt technisch, ist aber im Grunde nichts anderes als eine standardisierte Methode, um Helligkeit zu messen. Sie geben zwei Farbwerte ein – als HEX, RGB oder HSL – und bekommen sofort ein Ergebnis. Bestanden oder durchgefallen, so direkt ist das.

Was viele nicht wissen: Die Berechnung berücksichtigt, wie das menschliche Auge verschiedene Wellenlängen unterschiedlich stark wahrnimmt. Grün erscheint uns heller als Blau, selbst bei identischem technischen Helligkeitswert. Die Formel hinter dem Kontrastverhältnis gleicht solche Eigenheiten aus. Deshalb liefert ein guter Checker verlässlichere Ergebnisse als jede Daumenregel.

WCAG steht für „Web Content Accessibility Guidelines" – die internationalen Richtlinien für barrierefreie Webinhalte. Herausgegeben vom W3C, dem Gremium, das auch HTML und CSS standardisiert. Klingt bürokratisch? Ist es teilweise auch. Aber die Kernaussagen sind erstaunlich praxisnah.

Beim Farbkontrast unterscheidet die WCAG zwei Konformitätsstufen. Stufe AA gilt als Mindestanforderung und verlangt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text. Große Schrift – ab 18 Punkt regulär oder 14 Punkt fett – darf mit 3:1 auskommen, weil sie durch ihre Größe ohnehin besser lesbar ist. Das ist der Standard, den die meisten Unternehmen und öffentliche Einrichtungen anstreben sollten.

Stufe AAA geht einen Schritt weiter: Hier brauchen Sie 7:1 für normalen Text und 4,5:1 für große Schrift. Das klingt nach viel, und ja, es schränkt die Farbauswahl spürbar ein. Komplett schwarze Schrift auf weißem Grund erfüllt AAA locker, aber bei farbigen Designs wird es anspruchsvoll. Trotzdem lohnt sich der Blick auf diese Stufe, zumindest für besonders wichtige Inhalte wie Navigationen oder Fehlermeldungen.

Kennen Sie das? Man liest „4,5:1" und denkt sich: Okay, merk ich mir. Aber im Arbeitsalltag vergisst man es dann doch und verlässt sich aufs Bauchgefühl. Genau deshalb ist ein Kontrast-Checker so praktisch – er übernimmt das Erinnern und Rechnen. Sie müssen nur noch die Farben eingeben. Seit 2023 gibt es übrigens auch die WCAG 2.2, die an einigen Stellen nachgeschärft hat, beim Kontrast selbst aber weitgehend bei den bekannten Werten geblieben ist.

Noch vor ein paar Jahren galt Barrierefreiheit im Web als Kür – nett, wenn man es macht, aber kein Muss. Das hat sich grundlegend geändert. In der EU greift seit Juni 2025 das Barrierefreiheitsstärkungsgesetz, kurz BFSG. Es verpflichtet viele Unternehmen dazu, ihre digitalen Angebote barrierefrei zu gestalten. Wer das ignoriert, riskiert nicht nur Abmahnungen, sondern schließt auch potenzielle Kunden aus.

Aber lassen wir die Paragraphen mal beiseite. Es gibt einen viel einfacheren Grund, sich mit Kontrasten zu beschäftigen: Lesbarkeit betrifft alle. Jeder, der schon mal bei Sonnenlicht auf sein Handy geschaut hat, kennt das Problem. Plötzlich ist der elegante hellgraue Text auf weißem Hintergrund nicht mehr lesbar. Oder denken Sie an ältere Menschen, deren Sehkraft naturgemäß nachlässt. Die Weltgesundheitsorganisation schätzt, dass weltweit über 2 Milliarden Menschen eine Sehbeeinträchtigung haben. Das ist keine kleine Randgruppe.

Aus meiner Erfahrung unterschätzen viele Designer, wie stark schlechter Kontrast die Nutzung beeinträchtigt. Ich habe Projekte gesehen, bei denen die Absprungrate um fast 20 Prozent sank, nachdem die Textkontraste verbessert wurden. Kein Redesign, keine neuen Features – nur lesbarere Farben. Das zeigt, wie direkt sich solche vermeintlichen Details auf den Erfolg einer Website auswirken.

Und noch ein Gedanke: Barrierefreiheit und gutes Design schließen sich nicht aus. Im Gegenteil. Klare Kontraste wirken oft professioneller und aufgeräumter als der pastellfarbene Einheitsbrei, der jahrelang im Trend lag. Gute Lesbarkeit ist gutes Design.

Die Bedienung eines Kontrast-Checkers ist denkbar einfach, aber es gibt ein paar Punkte, die den Unterschied zwischen „schnell mal getestet" und „wirklich sinnvoll geprüft" ausmachen. Zunächst: Testen Sie nicht nur Schwarz auf Weiß. Das besteht immer. Interessant wird es bei Ihren tatsächlichen Farbkombinationen – der Linkfarbe auf dem Hintergrund, dem Placeholder-Text in Eingabefeldern, der Beschriftung auf farbigen Buttons.

Mein Tipp aus der Praxis: Erstellen Sie eine Liste aller Farbkombinationen, die auf Ihrer Website vorkommen. Das sind meistens mehr, als man denkt. Bodytext auf Hintergrund, Überschriften, Links in verschiedenen Zuständen, Fehlermeldungen, Hinweistexte, Navigationseinträge – schnell kommen 15 bis 20 Kombinationen zusammen. Prüfen Sie jede einzelne. Ja, das dauert eine Weile. Aber es ist eine einmalige Investition, die sich auszahlt.

Ein häufiger Fehler: Man testet die Farben isoliert, vergisst aber den Kontext. Ein mittelgrauer Text auf weißem Grund mag knapp die 4,5:1 schaffen. Aber wenn daneben ein Bild mit hellen Bereichen liegt oder der Hintergrund einen leichten Farbverlauf hat, kann die tatsächliche Lesbarkeit trotzdem leiden. Der Checker gibt Ihnen den technischen Wert – die Einschätzung im Gesamtkontext bleibt bei Ihnen.

Noch etwas, das gerne übersehen wird: Auch nicht-textliche Elemente brauchen ausreichend Kontrast. Icons, Formularrahmen, Fokus-Indikatoren – die WCAG fordert hier mindestens 3:1 gegen den angrenzenden Hintergrund. Ein Kontrast-Checker hilft auch bei diesen Elementen, Sie müssen nur daran denken, sie zu testen. Wenn Sie gleich eine ganze Farbpalette generator ausprobieren möchten, können Sie vorab prüfen, welche Kombinationen überhaupt funktionieren.

Der Klassiker unter den Kontrast-Sünden: hellgrauer Text auf weißem Grund. Designer lieben es, weil es „clean" aussieht. Nutzer hassen es, weil sie die Augen zusammenkneifen müssen. Besonders perfide ist dieser Fehler bei Formularfeldern, wo Placeholder-Texte oft in einem blassen Grau daherkommen, das kaum vom Hintergrund zu unterscheiden ist. Die Ironie: Gerade dort, wo Nutzer Orientierung brauchen, fehlt sie dann.

Fehler Nummer zwei: sich auf Farbe als einziges Unterscheidungsmerkmal verlassen. Stellen Sie sich eine Grafik vor, in der Erfolg grün und Fehler rot dargestellt werden. Für Menschen mit Rot-Grün-Schwäche ist das praktisch unsichtbar. Farbe darf ein zusätzliches Signal sein, aber nie das einzige. Ergänzen Sie Symbole, Muster oder Textlabels. Das steht übrigens explizit so in den WCAG unter dem Kriterium 1.4.1.

Ein Fehler, den ich selbst lange gemacht habe: nur die Standardansicht testen. Im Dark Mode, im High-Contrast-Modus des Betriebssystems oder bei aktiviertem Nachtmodus ändern sich die Verhältnisse komplett. Wenn Ihre Website einen eigenen Dunkelmodus anbietet, müssen Sie sämtliche Farbkombinationen doppelt prüfen. Das ist aufwendig, keine Frage. Aber alles andere ist halbe Arbeit.

Und dann gibt es noch den Trugschluss „großer Text braucht keinen Kontrast". Ja, die Anforderungen sind bei großer Schrift etwas geringer. Aber 3:1 ist trotzdem 3:1 – und hellblau auf weiß schafft das meistens nicht, egal wie groß die Buchstaben sind. Nutzen Sie den Kontrast Checker ausprobieren, bevor Sie sich auf Ihr Gefühl verlassen.

Der beste Zeitpunkt, Kontraste zu prüfen, ist nicht am Ende eines Projekts. Es ist am Anfang. Wenn Sie Ihre Farbpalette festlegen, sollte der Kontrast-Check fester Bestandteil dieses Prozesses sein. Denn nichts ist frustrierender, als ein fast fertiges Design umzubauen, weil die Primärfarbe gegen den Hintergrund zu wenig Kontrast bietet. Ich spreche da aus leidvoller Erfahrung.

In der Praxis bewährt sich ein dreistufiger Ansatz. Erstens: Beim Erstellen des Farbsystems jede Kombination prüfen und dokumentieren. Legen Sie eine einfache Tabelle an – Vordergrund, Hintergrund, Verhältnis, Bewertung. Das dauert vielleicht eine Stunde, spart aber Tage an späteren Korrekturen. Zweitens: Während des Designs stichprobenartig testen, besonders bei neuen Komponenten oder Zuständen. Drittens: Vor dem Launch einen vollständigen Audit machen.

Tools gibt es mittlerweile für jeden Geschmack. Browser-Erweiterungen prüfen Kontraste direkt auf der fertigen Seite. Figma-Plugins machen es schon im Entwurf möglich. Und unser Online-Checker ist ideal für schnelle Einzelprüfungen, wenn Sie gerade zwei Farben vergleichen wollen, ohne ein ganzes Programm zu starten. Wer seine Farben auch umrechnen muss, findet im Farb Konverter ausprobieren eine praktische Ergänzung.

Was ich besonders empfehle: Machen Sie Kontrast-Checks zur Gewohnheit. So wie Sie Code reviewen oder Texte Korrektur lesen, sollte auch der visuelle Kontrast regelmäßig auf dem Prüfstand stehen. Es klingt nach Mehraufwand, wird aber schnell zur Routine. Und die Ergebnisse sprechen für sich – bessere Lesbarkeit, weniger Support-Anfragen, zufriedenere Nutzer.

Mal ehrlich: Barrierefreiheit nur auf Zahlen zu reduzieren, greift zu kurz. Ein Kontrastverhältnis von 4,51:1 ist technisch AA-konform – aber ob der Text damit wirklich angenehm lesbar ist, steht auf einem anderen Blatt. Kontrast ist ein Zusammenspiel aus Schriftgröße, Schriftart, Zeilenabstand, Textmenge und ja, auch dem Kontrastverhältnis. Eine dünne Light-Schrift bei 14 Pixeln braucht deutlich mehr Kontrast als eine kräftige Slab-Serif bei 20 Pixeln, selbst wenn die WCAG für beide denselben Schwellenwert ansetzt.

Es gibt inzwischen Ansätze, die das differenzierter betrachten. Der APCA-Algorithmus (Accessible Perceptual Contrast Algorithm) berücksichtigt zum Beispiel die Schriftgröße und -stärke direkt in der Berechnung. Er ist noch nicht offiziell Teil der WCAG, könnte aber in Version 3.0 eine Rolle spielen. Bis dahin bleibt die klassische Kontrastberechnung der verbindliche Standard – und ein solider Ausgangspunkt.

Was mir am Herzen liegt: Verstehen Sie den Kontrast-Checker als Werkzeug, nicht als Richter. Er sagt Ihnen, ob Sie die Mindestanforderung erfüllen. Er sagt Ihnen nicht, ob Ihr Design gut ist. Ein knallgelber Text auf schwarzem Grund hat ein hervorragendes Kontrastverhältnis, wirkt aber auf die meisten Menschen aggressiv und ist bei längeren Texten anstrengend zu lesen. Umgekehrt kann ein knapp bestandener Wert in der Praxis völlig ausreichen, wenn die übrigen Bedingungen stimmen.

Der beste Rat, den ich geben kann: Nutzen Sie den Checker als Sicherheitsnetz. Prüfen Sie Ihre Farben, nehmen Sie das Ergebnis ernst, aber verlieren Sie darüber nicht den Blick für das Gesamtbild. Gutes Design entsteht, wenn Technik und Ästhetik zusammenwirken. Und ausreichender Kontrast ist dabei kein Hindernis, sondern eine Grundlage, auf der alles andere aufbaut. Wer seine Palette systematisch aufbauen will, sollte den Farbpalette Generator ausprobieren – das spart Zeit und liefert harmonische Ergebnisse gleich mit.

Ein Kontrast-Checker gehört in die Werkzeugkiste jedes Webdesigners, Entwicklers und Content-Erstellers. Er macht aus einer subjektiven Einschätzung eine messbare Größe und hilft, Websites für alle Menschen zugänglicher zu gestalten. Die WCAG-Richtlinien geben klare Orientierung, und mit den richtigen Gewohnheiten wird die Kontrastprüfung schnell zum selbstverständlichen Teil des Workflows. Am Ende profitieren davon nicht nur Menschen mit Seheinschränkungen – sondern jeder, der Ihre Inhalte lesen möchte.