Jahrelang galt im modernen Webdesign eine ästhetische Regel: "Weniger ist mehr." Helle Grautöne auf weißem Grund, zarte Pastellfarben und dünne Schriften wirkten edel, clean und modern. Doch seit dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BaFG) am 28. Juni 2025 ist dieser Design-Trend nicht mehr nur ein Ärgernis für Senioren, sondern ein handfestes rechtliches Risiko für Ihr Unternehmen.
In diesem Praxis-Tipp erfahren Sie, warum Ihr aktuelles "Corporate Identity" (CI) möglicherweise gegen das Gesetz verstößt und wie Sie Kontraste in weniger als zwei Minuten rechtssicher prüfen.
Design trifft Gesetz: Die neuen Spielregeln
Barrierefreiheit im Web ist keine Geschmackssache. Sie ist Mathematik. Das Gesetz verweist auf die internationalen WCAG 2.2 Standards (Web Content Accessibility Guidelines). Diese schreiben exakte mathematische Verhältnisse zwischen der Vordergrundfarbe (Text) und der Hintergrundfarbe vor.
Warum ist das wichtig? Rund 9% der männlichen Bevölkerung leiden an einer Rot-Grün-Sehschwäche. Millionen Menschen nutzen ihr Smartphone bei grellem Sonnenlicht. Wenn Ihr "Jetzt kaufen"-Button hellgrau auf weißem Grund ist, ist er für diese Nutzer schlichtweg unsichtbar. Das Gesetz wertet das als Diskriminierung.
Die magische Zahl: 4,5 zu 1
Für den Standard-Text auf Ihrer Webseite (Fließtext, Menüs, Buttons) gilt die Contrast Ratio (Kontrastverhältnis) von mindestens 4,5:1.
Das klingt technisch, ist aber einfach zu verstehen:
- 21:1 ist der maximale Kontrast (Schwarzer Text auf weißem Grund).
- 1:1 ist kein Kontrast (Weißer Text auf weißem Grund).
- 4,5:1 ist die gesetzliche Untergrenze für normalen Text (Level AA).
Achtung, Ausnahme für Überschriften:
Bei "großem Text" (mindestens 18pt fett oder 24pt normal) erlaubt der Gesetzgeber ein schwächeres Verhältnis von 3:1. Das gibt Designern etwas mehr Spielraum für große Headlines, aber nicht für das Kleingedruckte im Footer.
Der 3-Schritte-Schnelltest für Ihre Webseite
Verlassen Sie sich nicht auf Ihr Auge. Monitore sind heute so brillant und hell eingestellt, dass sie Farben kräftiger darstellen, als sie sind. Prüfen Sie die Zahlen.
Schritt 1: Ermitteln Sie Ihre Hex-Codes
Sie benötigen den Farbcode Ihrer Schrift (z.B. #555555 für Dunkelgrau) und Ihres Hintergrunds (meist #FFFFFF für Weiß). Wenn Sie diese nicht kennen, fragen Sie Ihre Agentur oder nutzen Sie ein "Color Picker"-Tool im Browser.
Schritt 2: Nutzen Sie einen Contrast-Checker
Es gibt hervorragende, kostenlose Tools, die genau das messen, was auch die Prüf-Software der Behörden misst. Wir empfehlen den WebAIM Contrast Checker oder den Adobe Color Analyzer. Geben Sie dort Ihre beiden Farben ein.
Schritt 3: Die Ampel-Entscheidung
Das Tool gibt Ihnen sofort eine Auswertung in Form von "PASS" (Bestanden) oder "FAIL" (Durchgefallen).
- PASS bei AA: Alles in Ordnung. Ihr Design ist gesetzeskonform.
- FAIL bei AA: Sie haben ein Problem. Dieser Text muss zwingend abgedunkelt werden, bis das Tool "PASS" zeigt.
Häufige Fehlerquellen in der Praxis
Aus unseren Audits bei RIEMVISION kennen wir die klassischen Stolperfallen österreichischer Webseiten:
- Der "Dezente" Footer: Impressums-Links werden oft in Hellgrau auf Weiß gesetzt, damit sie nicht stören. Das ist fast immer ein Verstoss.
- Orange auf Weiß: Viele Firmenfarben sind Orange. Leider hat Orange oft einen schlechten Kontrast zu Weiß. Hier muss oft eine dunklere Schattierung für die Schrift gewählt werden.
- Text auf Bildern: Wenn Sie weißen Text über ein Foto legen, ist der Kontrast abhängig vom Bildausschnitt. Verrutscht das Bild mobil, liegt der weiße Text plötzlich auf einer weißen Wolke.
- Lösung: Legen Sie einen halbtransparenten dunklen Schatten ("Overlay") zwischen Bild und Text.
Fazit: Design muss funktionieren, nicht nur gefallen
Ein barrierefreies Design bedeutet nicht, dass Ihre Webseite "hässlich" oder "klobig" aussehen muss. Es bedeutet nur, dass wir die Lesbarkeit priorisieren. Ein höherer Kontrast führt nachweislich zu einer längeren Verweildauer und besseren Conversion-Rates. Kunden, die Ihre Texte mühelos lesen können, kaufen eher.