WCAG-Kontrast 4,5:1 und das BFSG seit 28.06.2025

Seit dem 28. Juni 2025 ist das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft und macht WCAG-AA-Konformität für viele B2C-Websites verpflichtend. Im Zentrum steht ein technisches Detail mit großer rechtlicher Tragweite: das Kontrast-Verhältnis zwischen Text und Hintergrund muss mindestens 4,5 zu 1 betragen, für großen Text immerhin 3 zu 1. Wer das ignoriert, riskiert Anordnungen der Marktüberwachungsbehörden, Bußgelder und wettbewerbsrechtliche Abmahnungen. Dieser Ratgeber zeigt die rechtliche Lage, die Berechnungsformel und die praktische Umsetzung.

WCAG 2.2: die technische Norm

Die Web Content Accessibility Guidelines (WCAG) sind seit 1999 die internationale Referenz für barrierefreies Webdesign, herausgegeben vom World Wide Web Consortium (W3C). Aktuelle Version: WCAG 2.2 vom 5. Oktober 2023. Die Norm definiert drei Konformitätsstufen:

• A: Mindestanforderungen, ohne die Inhalte für viele Nutzer unzugänglich wären.
• AA: Standardstufe, von der internationalen Rechtsprechung als Pflichtmaß übernommen.
• AAA: höchste Stufe, für sicherheitskritische und besonders zugängliche Inhalte.

Für Farbkontrast sind zwei Success Criteria relevant:

SC 1.4.3 Contrast (Minimum) auf Stufe AA: Text muss ein Kontrast-Verhältnis von mindestens 4,5 zu 1 zum Hintergrund haben. Großer Text (mindestens 18pt regulär oder 14pt fett) darf auf 3 zu 1 absinken.

SC 1.4.6 Contrast (Enhanced) auf Stufe AAA: 7 zu 1 für normalen Text, 4,5 zu 1 für großen Text.

Die Anforderungen gelten für Text und Bilder von Text. Logos und reine Dekorationselemente sind ausgenommen. Inaktivierte UI-Elemente (disabled Buttons) haben ebenfalls eine Ausnahme, sofern sie als deaktiviert erkennbar sind.

Die Berechnungsformel im Detail

Das Kontrast-Verhältnis ist mathematisch definiert als:

(L1 + 0.05) / (L2 + 0.05)

Dabei sind L1 und L2 die relativen Luminanzen der helleren und der dunkleren Farbe, mit L1 >= L2. Das Ergebnis liegt zwischen 1 zu 1 (identische Farben) und 21 zu 1 (Schwarz auf Weiß).

Die relative Luminanz wird aus den sRGB-Komponenten in zwei Schritten berechnet:

Schritt 1: Gamma-Linearisierung pro Kanal:

R' = R / 255
G' = G / 255
B' = B / 255

R_lin = R' / 12.92                          falls R' <= 0.03928
       ((R' + 0.055) / 1.055) ^ 2.4         sonst

(analog für G_lin und B_lin)

Die stückweise Funktion entspricht der sRGB-Inverse-Gamma-Kurve nach IEC 61966-2-1.

Schritt 2: gewichtete Luminanz-Summe nach ITU-R BT.709:

L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin

Die Gewichtungen reflektieren die unterschiedliche Helligkeitsempfindung des menschlichen Auges. Grün dominiert mit über 71 Prozent, weil die M-Zapfen am empfindlichsten sind. Blau trägt nur etwas über 7 Prozent bei.

Beispiel: Schwarz Hex 000000 auf Weiß Hex ffffff. L_Schwarz = 0, L_Weiss = 1. Kontrast = (1 + 0.05) / (0 + 0.05) = 21. Das ist das mathematische Maximum.

Beispiel 2: Rose #f43f5e auf Weiß. R_lin = ((244/255+0.055)/1.055)^2.4 = ((0.957+0.055)/1.055)^2.4 = (0.959)^2.4 = 0.886. G_lin analog für 63: ((63/255+0.055)/1.055)^2.4 = ((0.247+0.055)/1.055)^2.4 = (0.286)^2.4 = 0.054. B_lin für 94: (0.124)^2.4 ergibt etwa 0.115. Daraus L = 0.2126·0.886 + 0.7152·0.054 + 0.0722·0.115 = 0.188 + 0.039 + 0.008 = 0.235. Auf Weiß: (1+0.05) / (0.235+0.05) = 1.05 / 0.285 = 3.68. Damit erreicht Rose #f43f5e auf Weiß WCAG-AA für großen Text (3:1 ok), aber nicht für normalen Text (4,5:1 verfehlt).

BFSG: was seit dem 28.06.2025 gilt

Das Barrierefreiheitsstärkungsgesetz (BFSG) wurde am 16. Juli 2021 im Bundesgesetzblatt verkündet (BGBl. 2021 Teil I, Nr. 38, Seite 2970) und ist seit dem 28. Juni 2025 anwendbar. Es setzt die EU-Richtlinie 2019/882 (European Accessibility Act, EAA) in deutsches Recht um.

Anwendungsbereich: Produkte und Dienstleistungen im B2C-Bereich, konkret unter anderem:

• Computerhardware mit allgemeinen Verbraucherfunktionen
• Selbstbedienungsterminals (Geldautomaten, Ticketautomaten, Check-in-Maschinen)
• Verbraucherendgeräte mit interaktiven Rechenleistungen
• Bankdienstleistungen für Verbraucher
• E-Books und E-Reader
• Elemente von Telekommunikationsdiensten
• Personenbeförderungsdienste (Websites und Apps)
• Online-Marktplätze und Online-Shops im B2C

Ausnahmen: Kleinstunternehmen mit weniger als 10 Beschäftigten und unter 2 Mio. Euro Jahresumsatz sind für Dienstleistungen vom BFSG befreit, nicht aber für Produkte. Bestehende Produkte mit langer Lebensdauer dürfen unter Übergangsfristen weiter vertrieben werden.

Pflichten: Hersteller müssen Produkte barrierefrei gestalten, Importeure und Händler dürfen nur konforme Produkte in Verkehr bringen, Dienstleister müssen ihre Angebote barrierefrei anbieten. Die technischen Anforderungen verweisen auf harmonisierte europäische Normen, in der Praxis vor allem EN 301 549, die wiederum WCAG-AA für Web-Inhalte als Referenz nimmt.

Marktüberwachung: in Deutschland die Marktüberwachungsbehörden der Bundesländer, koordiniert durch die Bundesanstalt für Arbeitsschutz und Arbeitsmedizin (BAuA). Sie können Anordnungen zur Mängelbeseitigung erlassen, Bußgelder bis zu 100.000 Euro verhängen und im Wiederholungsfall den Vertrieb untersagen. Zusätzlich entstehen über das UWG (Unlauterer Wettbewerb) Abmahn-Risiken durch Wettbewerber.

Häufige Kontrast-Fehler

Vordergrund	Hintergrund	Kontrast	WCAG-Status
#ffff00 Gelb	#ffffff Weiß	1.07:1	Fail überall
#000000 Schwarz	#ffff00 Gelb	19.6:1	Pass AAA
#999999 Hellgrau	#ffffff Weiß	2.85:1	Fail AA
#767676 Mittelgrau	#ffffff Weiß	4.54:1	Pass AA Normaltext
#595959 Dunkelgrau	#ffffff Weiß	7.03:1	Pass AAA Normaltext
#0000ff Blau pur	#ffffff Weiß	8.59:1	Pass AAA Normaltext
#f43f5e Rose	#ffffff Weiß	3.68:1	Pass AA nur Großtext
#f43f5e Rose	#0f172a Slate-900	5.71:1	Pass AA Normaltext

Die Tabelle zeigt die typischen Stolpersteine. Gelb auf Weiß ist praktisch immer Fail. Markenfarben in mittleren Sättigungen schaffen oft AA-Großtext, aber nicht AA-Normaltext. Lösung: für Fließtext gegen einen dunkleren Hintergrund arbeiten oder die Markenfarbe nur als Akzent verwenden und Fließtext in Slate-900 oder vergleichbar dunklem Ton setzen.

Tools für die Praxis

WebAIM Contrast Checker: webbasiert, sehr genau, mit direkter AA/AAA-Anzeige für normalen und großen Text. Die Standard-Referenz.

Chrome DevTools: zeigen den Kontrast neben jeder Farbeigenschaft im Inspector. Außerdem gibt es eine Audit-Funktion (Lighthouse), die alle Kontrast-Probleme einer Seite auflistet.

axe-core: Library von Deque Systems, die als CI-Integration läuft. Findet WCAG-Verletzungen programmatisch, ideal für automatisierte Tests in Pull Requests.

Pa11y: Command-Line-Tool, das Seiten gegen WCAG-AA prüft und einen Report ausgibt. Lässt sich gut in GitLab CI oder GitHub Actions einbinden.

Empfehlung für Teams: einmalig die Markenfarben gegen alle relevanten Hintergründe durchrechnen, eine kleine Tabelle in der Design-System-Dokumentation pflegen, und vor jedem Release einen Pa11y- oder axe-core-Run gegen die wichtigsten Templates. Manuelle Stichproben mit dem WebAIM-Tool ergänzen.

Tool farbpalette-generieren.de und Kontrast

Aktuell hat der Generator keinen eingebauten WCAG-Kontrast-Check. Wer die generierten Paletten produktiv einsetzen will, muss die Farb-Kombinationen extern prüfen, zum Beispiel mit WebAIM Contrast Checker. Ein eingebauter Kontrast-Indikator pro Farbpaar steht auf der Roadmap und ist für eines der kommenden Releases vorgesehen. Bis dahin gilt: jede Markenfarbe gegen den geplanten Hintergrund einmal durchrechnen, das Ergebnis im Design-System dokumentieren.

APCA als kommender Algorithmus

Der klassische WCAG-Kontrast-Algorithmus aus 1999 hat bekannte Schwächen. Er behandelt dunkle Texte auf hellen Hintergründen und helle Texte auf dunklen Hintergründen identisch, obwohl die Lesbarkeit faktisch unterschiedlich ist. Außerdem berücksichtigt er Schriftgröße und Schriftgewicht nicht im Detail. Als Antwort darauf entwickelt das W3C derzeit den Accessible Perceptual Contrast Algorithm (APCA), der diese Schwächen behebt. APCA arbeitet mit polaren Werten (positiv für dunklen Text auf hellem Grund, negativ für hellen Text auf dunklem Grund) und liefert eine wahrnehmungsfundiertere Bewertung. Die Schwellenwerte heißen Lc-Werte und liegen typischerweise im Bereich 60 für normale Lesbarkeit, 75 für gute Lesbarkeit und 90 für höchste Lesbarkeit. APCA ist Teil des kommenden WCAG-3.0-Entwurfs und bereits in einigen Tools (etwa colorjs.io oder dem APCA-Calculator von Andrew Somers) verfügbar. Für aktuelle BFSG-Compliance bleibt aber WCAG 2.2 mit dem klassischen 4,5-zu-1-Algorithmus die rechtlich bindende Referenz, weil die EN 301 549 darauf verweist. Wer ein Design-System neu aufbaut, kann APCA bereits parallel evaluieren, um zukunftssicher zu sein.

Spezialfälle: UI-Komponenten und Grafiken

WCAG 2.2 SC 1.4.11 Non-Text Contrast (Stufe AA) erweitert den Kontrast-Schutz auf grafische Elemente und UI-Komponenten. Konkret: Bedienelemente wie Buttons, Form-Borders, Icons und Statusanzeigen müssen mindestens 3 zu 1 Kontrast zum Hintergrund haben. Das wird oft übersehen, weil sich der Fokus auf Text-Kontrast konzentriert. Beispiel: ein hellgrauer Border um ein Input-Feld (#e2e8f0 auf Weiß) hat nur 1,3 zu 1 Kontrast und wäre für sich nicht WCAG-konform, sofern der Border das einzige Indiz für die Bedienbarkeit ist. Lösung: einen mittleren Grauton (#94a3b8) verwenden, der auf Weiß 3,1 zu 1 erreicht. Ähnlich bei Icon-Buttons: das Icon muss 3 zu 1 zur Hintergrundfläche haben. Für Diagramme und Grafiken in Charts gilt ebenfalls 3 zu 1 zwischen angrenzenden Farbflächen, wenn diese Flächen Information codieren. Diese Regeln machen das Design in der Praxis aufwändiger, sind aber rechtlich Teil der WCAG-AA-Konformität, auf die das BFSG verweist.

Was rechtlich und praktisch zu tun ist

Für B2C-Websites unter BFSG-Anwendungsbereich gilt: WCAG-AA ist ab 28.06.2025 Pflicht, nicht Option. Konkret heißt das: Fließtext 4,5:1, große Headlines 3:1, alle interaktiven Elemente mindestens 3:1 für ihre Bedien-Indikatoren. Wer eine bestehende Site umstellt, beginnt mit der Fließtext-Farbe gegen die häufigsten Hintergründe, dann die UI-Buttons, dann die Akzent-Farben. Tools wie axe-core oder Pa11y in der CI verhindern Regression. Wer früh anfängt, läuft nicht in Anordnungen der Marktüberwachung und vermeidet UWG-Abmahnungen.

Wenn dir ein Fehler auffällt oder eine Quelle veraltet ist, schreib an info@akara-solutions.de, bestätigte Korrekturen dokumentieren wir auf /korrekturen/.