Farbkontrast nach WCAG prüfen
Trag Text- und Hintergrundfarbe ein und du siehst sofort das Kontrastverhältnis nach WCAG 2.1 samt Ampel für AA und AAA, getrennt nach normalem Text, großem Text und Bedienelementen. Die Vorschau zeigt echten Text in drei Größen, und wenn es nicht reicht, schlägt das Tool die nächste bestehende Farbe vor. Alles rechnet dein Browser.
Welche Werte verlangt die WCAG?
| Erfolgskriterium | Gilt für | Stufe AA | Stufe AAA |
|---|---|---|---|
| 1.4.3 / 1.4.6 Kontrast | normaler Text | 4,5:1 | 7:1 |
| 1.4.3 / 1.4.6 Kontrast | großer Text | 3:1 | 4,5:1 |
| 1.4.11 Nicht-Text-Kontrast | Bedienelemente, Grafiken | 3:1 | nicht definiert |
Als großer Text gilt Text ab 18 pt oder ab 14 pt fett. Umgerechnet mit 1 pt = 4/3 px sind das 24 px beziehungsweise 18,66 px, genau die Größen, die in der Vorschau stehen. Quelle: W3C, WCAG 2.1, Kontrast (Minimum).
Zu geringer Kontrast ist kein Randproblem: Die Auswertung WebAIM Million 2024 fand auf 81,0 Prozent der eine Million untersuchten Startseiten Text mit unzureichendem Kontrast, der mit Abstand häufigste automatisch erkennbare WCAG-Verstoß (webaim.org/projects/million).
Wie wird das Kontrastverhältnis berechnet?
In zwei Schritten. Zuerst wird jede Farbe in ihre relative Luminanz übersetzt: Jeder Kanal wird durch 255 geteilt und linearisiert (Werte bis 0,03928 durch 12,92, darüber ((c + 0,055) / 1,055) ^ 2,4), dann gewichtet mit 0,2126 für Rot, 0,7152 für Grün und 0,0722 für Blau. Grün zählt am meisten, weil das Auge dort am empfindlichsten ist.
Danach folgt das Verhältnis: (hellere + 0,05) / (dunklere + 0,05). Es reicht von 1:1 bei identischen Farben bis 21:1 bei Schwarz auf Weiß.
Zwei Details, die dieses Tool ernst nimmt: Die WCAG-Definition nennt den Schwellwert 0,03928, die sRGB-Spezifikation 0,04045. Für 8-Bit-Farben liegt kein ganzzahliger Kanalwert dazwischen, das Ergebnis ist also identisch. Und der angezeigte Wert wird abgerundet, damit nie 4,50 dasteht, während die Ampel auf Rot springt.
Was bedeutet das BFSG für meine Website?
Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt die Richtlinie (EU) 2019/882 (European Accessibility Act) in deutsches Recht um und gilt seit dem 28. Juni 2025. Es betrifft bestimmte Produkte und Dienstleistungen im Geschäft mit Verbraucherinnen und Verbrauchern, darunter der elektronische Geschäftsverkehr, also viele Online-Shops und Buchungsstrecken.
Die technischen Anforderungen stehen nicht im Gesetz selbst. Für digitale Angebote führt der Weg über die Barrierefreiheitsstärkungsgesetz-Verordnung (BFSGV) zur harmonisierten Norm EN 301 549, die auf die WCAG in Stufe AA verweist. Dort steht die Anforderung von 4,5:1 für normalen Text.
Ausnahmen sind vorgesehen: Kleinstunternehmen, die Dienstleistungen erbringen (weniger als 10 Beschäftigte und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme) fallen nicht unter das Gesetz. Für öffentliche Stellen gilt ohnehin schon länger die BITV 2.0.
Ob dein konkretes Angebot erfasst ist, welche Übergangsregelungen greifen und was daraus folgt, ist eine Rechtsfrage. Dieser Abschnitt fasst den Rechtsrahmen zusammen und ist keine Rechtsberatung. Gesetzestext: BFSG auf gesetze-im-internet.de.
Wie funktioniert die nächste bestehende Farbe?
Der Vorschlag verschiebt ausschließlich die Helligkeit in HSL und lässt Farbton und Sättigung unangetastet. Dein Blau bleibt blau und wird nur so weit heller oder dunkler, bis der Zielwert erreicht ist. Gesucht wird die kleinste Änderung in beide Richtungen, geprüft wird auf dem fertig gerundeten 8-Bit-Wert, damit der angezeigte HEX-Code das Kriterium wirklich hält.
Manchmal gibt es keine Lösung, und das Tool sagt es. Gegen ein mittleres Grau erreicht keine Helligkeit 7:1, denn Schwarz kommt nur auf 5,32:1 und Weiß auf 3,95:1. Dann musst du die andere Farbe des Paares ändern.
Wo liegen die Grenzen?
- Kontrast ist nur ein Kriterium. Tastaturbedienung, Fokus-Sichtbarkeit, Beschriftungen, Struktur und Alternativtexte prüft dieses Tool nicht.
- Halbtransparente Farben werden wie deckende gerechnet. WCAG bewertet, was am Ende zu sehen ist. Misch die Farbe vorher zusammen oder nimm den dargestellten Bildpunkt mit der Pipette auf.
- Text auf Bildern und Verläufen hat keinen einzelnen Hintergrundwert. Prüfe die ungünstigste Stelle.
- Deaktivierte Bedienelemente sind laut WCAG von der Kontrastanforderung ausgenommen. Erkennbar bleiben sollten sie trotzdem.
- Die Prüfung ersetzt keinen Test mit echten Menschen, besonders nicht mit Personen mit Sehbeeinträchtigung.
Woher kommen die Farbwerte?
Wenn du nur den HEX-Code hast, aber RGB, HSL oder OKLCH brauchst (oder umgekehrt), rechnet der Farb-Konverter alle Formate gleichzeitig um und liefert Aufhellungen und Abdunklungen dazu, aus denen sich eine kontraststarke Variante oft schneller finden lässt.