Warum Farbkontrast plötzlich Pflicht ist

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG). Damit ist Barrierefreiheit für viele Websites in Deutschland nicht mehr Kür, sondern Pflicht — und der Farbkontrast zwischen Text und Hintergrund ist einer der häufigsten Grunde, warum Seiten durchfallen. Die meisten Designer denken bei "schick" an dezente Grautöne. Die meisten dieser Grautöne erfüllen die WCAG-Anforderungen nicht.

Die WCAG 2.2 (Web Content Accessibility Guidelines) gibt klare Zahlen vor: Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1 gegenüber dem Hintergrund. Großer Text (ab 18pt oder 14pt bold) darf mit 3:1 auskommen. Wer noch eine Schippe drauflegen will, schießt auf AAA — das sind 7:1 für normalen und 4,5:1 für großen Text.

Unser Kontrast Checker oben rechnet diese Werte für dich aus. Du gibst zwei Farben ein, das Tool zeigt sofort den Kontrastwert und ob du AA, AAA oder gar nichts erreichst. Plus: Wenn du durchfällst, schlägt dir der WCAG-Algorithmus automatisch die nächstliegende Farbe vor, die noch passt — du musst nicht raten.

Wie der Kontrast wirklich berechnet wird

Viele Tools tun so, als wäre Kontrast eine Geschmacksfrage. Ist er nicht. Die WCAG-Kontrast-Formel ist mathematisch festgelegt und basiert auf der relativen Luminanz beider Farben. Vereinfacht: Jede Farbe wird auf einen Helligkeitswert zwischen 0 (schwarz) und 1 (weiß) reduziert, dann werden die beiden Werte ins Verhältnis gesetzt — heller geteilt durch dunkler, plus eine kleine Korrektur.

Das Ergebnis ist eine Zahl zwischen 1:1 (kein Kontrast, gleiche Farbe) und 21:1 (maximaler Kontrast, also Schwarz auf Weiß). Für die Praxis kannst du dir merken:

  • Unter 3:1: Auch für Buttons, Icons und Borders zu wenig. Fail.
  • 3:1 bis 4,5:1: OK für großen Text und UI-Elemente (AA), durchgefallen für normalen Text.
  • 4,5:1 bis 7:1: Erfüllt AA für normalen Text, aber noch nicht AAA.
  • 7:1 oder höher: AAA — das Maximum, das WCAG verlangt.

Der Trick: Kontrast hat nichts mit dem Farbton zu tun. Ein knalliges Pink kann denselben Kontrastwert haben wie ein dezentes Grau. Was zählt, ist die Helligkeit. Genau deshalb fallen so viele Designer rein — sie wählen Farben "aus dem Bauch" und übersehen, dass der visuelle Eindruck nichts über die WCAG-Konformität sagt.

Die häufigsten Kontrast-Sünden im Webdesign

Nach hunderten Website-Audits sind das die fünf Klassiker, die wir bei Webdesign-Projekten am häufigsten sehen:

  1. Hellgraue Subtitel auf weißem Hintergrund. Sieht edel aus, ist aber bei #9CA3AF schon nur noch 2,84:1 — Fail. Selbst #6B7280 (4,69:1) ist gerade so AA, aber nicht AAA.
  2. Weiße Schrift auf hellen Pastellfarben. Beliebt bei Tech-Startups, aber Weiß auf Hellblau (z.B. #60A5FA) liegt bei 2,15:1. Komplett unleserlich für Sehbeeinträchtigte.
  3. Gelb auf Weiß. Sieht warm aus, ist aber katastrophal. #FBBF24 auf Weiß ergibt 1,71:1. Praktisch unsichtbar.
  4. Buttons mit zu schwachem Border. Ein 1px-Border in #E5E7EB auf weißem Background ist für sehbehinderte Nutzer einfach nicht da. UI-Komponenten brauchen mindestens 3:1.
  5. Text auf Hintergrundbild. Wer Text über ein Foto legt, kontrolliert die Hintergrundfarbe nicht mehr. Lösung: dunkler Overlay-Layer mit passender Opacity, oder Text-Shadow.

Kontrast prüfen ist kein Luxus — es ist die einfachste Stellschraube, um deine Website rechtssicher und für alle nutzbar zu machen. Mit unserem Tool oben dauert es zehn Sekunden pro Farb-Paar.

WCAG AA, AAA und das BFSG — was bedeutet was?

Drei Begriffe, die ständig durcheinandergeworfen werden:

  • WCAG (Web Content Accessibility Guidelines): Die internationale Norm vom W3C. Aktuell in Version 2.2. Definiert in drei Stufen — A (Minimum), AA (Standard), AAA (höchste Stufe). Für Websites zählt fast immer AA.
  • BFSG (Barrierefreiheitsstärkungsgesetz): Das deutsche Gesetz, das die EU-Richtlinie EAA umsetzt. Gilt seit 28.06.2025. Verlangt für viele B2C-Websites und Apps die Einhaltung der WCAG 2.1 Level AA als Mindeststandard. Bei Verstößen drohen Abmahnungen und Bußgelder.
  • EN 301 549: Die europäische Norm, auf die sich das BFSG bezieht. Übernimmt die WCAG-Anforderungen 1:1.

Praktisch heißt das: Wenn du eine Website betreibst, die unter das BFSG fällt (Online-Shops, Banking, Buchungssysteme, viele Dienstleister), musst du WCAG 2.1 AA erfüllen. Und der Farbkontrast ist eine der ersten Sachen, auf die Prüfer schauen — weil man ihn objektiv messen kann.

So fixt du Kontrast-Probleme richtig

Wenn unser Checker rot blinkt, gibt es drei Wege, das Problem zu lösen — in dieser Reihenfolge:

  1. Text dunkler machen. Klingt banal, ist aber meistens die richtige Lösung. Statt #9CA3AF einfach #4B5563 — sieht immer noch edel aus, aber erfüllt jetzt AA. Unser Tool schlägt dir die nächste passende Farbe automatisch vor.
  2. Hintergrund anpassen. Wenn dein Branding strikt eine bestimmte Textfarbe vorgibt, ändere stattdessen den Hintergrund. Bei einem Pastell-Background hilft oft ein leicht dunklerer Ton — schon ein Sprung von #FCE7F3 zu #FBCFE8 kann reichen.
  3. Schrift größer und fetter machen. Großer Text (≥18pt regular oder ≥14pt bold) braucht nur 3:1 statt 4,5:1. Wenn deine Hauptüberschrift im aktuellen Farbschema durchfällt, mach sie einfach 4 Pixel größer.

Was nicht funktioniert: Opacity reduzieren ("Wirkt edler, ist aber bei 0,7 Opacity nur noch ca. 70% des ursprünglichen Kontrasts"). Schatten "kompensieren". Oder Hintergrundbilder, die "sowieso nicht so streng zählen". Doch, tun sie. WCAG misst objektiv.

Was unser Tool besser macht als WebAIM & Co

Es gibt englische Tools wie WebAIM Contrast Checker, Coolors oder den Color Contrast Analyzer von TPGi. Alle solide. Was wir anders machen:

  • Auf Deutsch und ohne Cookie-Banner-Marathon. Tool laden, Farben eingeben, fertig. Keine Anmeldung, kein Abo, keine Werbung.
  • Auto-Fix-Vorschlag. Wenn du durchfällst, zeigen wir dir nicht nur "Fail" — sondern berechnen die nächste passende Farbe und du übernimmst sie per Klick.
  • Live-Vorschau für normalen UND großen Text. So siehst du sofort, ob deine H1 den AA-Test besteht, auch wenn dein Fließtext durchfällt.
  • UI-Komponenten-Check. Borders, Icons und Form-Elemente brauchen mindestens 3:1 — viele Tools ignorieren das, wir prüfen es separat.
  • Presets für typische Designer-Fallen. Klick auf "Grau auf Weiß" oder "Gelb auf Weiß" und du siehst sofort, warum diese Lieblingsfarben in der Praxis scheitern.

Häufige Fehler, die wir bei Audits sehen

"Mein Designer hat das gemacht, das ist sicher okay." — Kein Verlass. Die meisten Webdesigner kennen WCAG nur aus dem Vorbeigehen und prüfen Kontraste nicht systematisch. Selber checken oder eine Barrierefreiheits-Prüfung beauftragen.

"Wir haben einen Dark Mode, das reicht für Sehbehinderte." — Falsch. Dark Mode ist eine Stil-Präferenz, kein Accessibility-Feature. Sehbehinderte brauchen nicht weniger Helligkeit, sondern mehr Kontrast.

"Wir testen das später, wenn die Seite live ist." — Garantierter Schmerz. Kontrast-Probleme im fertigen Design zu fixen heißt: Branding-Farben überdenken, alle Templates anpassen, Screenshots in der Doku tauschen. Vorher prüfen, nicht nachher.

"Hover-States brauchen keinen eigenen Kontrast-Check." — Doch. Wenn dein Button im Default-State 4,7:1 hat und im Hover-State auf 2,9:1 fällt, weil sich Background oder Textfarbe ändert, ist die Hover-Variante nicht WCAG-konform. Beide States prüfen.

Vom Kontrast-Check zur barrierefreien Website

Farbkontrast ist eine von mehreren Stellschrauben für eine wirklich barrierefreie Website. Dazu gehören außerdem:

  • Alt-Texte für alle Bilder (siehe unser Alt-Tag-Guide)
  • Tastatur-Bedienbarkeit ohne Maus
  • Screen-Reader-kompatibles HTML mit korrektem semantischem Markup
  • ARIA-Labels, wo HTML-Semantik nicht reicht
  • Skalierbare Schriftgrößen ohne Layout-Brüche
  • Untertitel und Transkripte für Videos

Wenn du eine bestehende Website hast und unsicher bist, ob sie BFSG-konform ist, machen wir bei Firmencharisma für dich einen vollständigen Barrierefreiheits-Audit — inklusive konkreter Fix-Liste mit Priorität. Mehr zur Barrierefreiheits-Beratung.