Wenn schönes Design plötzlich „nicht erlaubt“ ist
Barrierefreiheit klingt erstmal nach Technik, Richtlinien und Prüf-Tools. In der Praxis beginnt sie aber viel früher – bei der Farbwahl. Wer sich einmal ernsthaft mit Kontrasten beschäftigt, merkt schnell: Viele scheinbar schöne Farbkombinationen funktionieren auf Websites nicht mehr. Und das hat massive Auswirkungen auf Corporate Design, Zeitaufwand und Designfreiheit.
Farbkontraste gehören zu den unterschätztesten Themen im Webdesign. Auf dem Papier – oder im Photoshop-Mockup – sehen viele Farbkombinationen harmonisch, modern und hochwertig aus.
Spätestens bei der Umsetzung auf einer echten Website kommt dann der Schreckmoment: Das Barrierefreiheits-Tool deiner Wahl bemängelt diverse Kontrastfehler.
Plötzlich wird aus einem eleganten Grau ein Problem. Aus soften Pastelltönen ein Kontrastverstoß. Und aus einer liebevoll entwickelten Corporate Identity eine gestalterische Einschränkung.
Das Probleme: Barrierefreiheit misst nicht Ästhetik, sondern Lesbarkeit.
Warum Barrierefreiheit Designfreiheit massiv einschränkt
Sobald du dich an die WCAG-Kontrastanforderungen hältst, schrumpft der Farbraum drastisch – und zwar viel stärker, als die meisten erwarten.
Was neuerdings wegfällt:
- Ton-in-Ton-Kombinationen
- Helle Texte auf hellen Hintergründen
- Grautöne mit „zu wenig Punch“
- Akzentfarben, die nur minimal dunkler oder heller sind
Was bleibt, sind klar definierte Kontrastpaare, die oft weniger verspielt wirken – aber zuverlässig funktionieren.
Das Problem dabei: Diese Einschränkung wird nicht beim Gestalten auf dem Papier sichtbar, sondern erst beim digitalen Einsatz.
Der klassische Fehler: Design zuerst, Website später
In den meisten Projekten läuft es so:
- Corporate Design wird entwickelt
- Farben werden visuell abgestimmt
- Alles sieht stimmig aus
- Monate später entsteht die Website
- Erst jetzt werden Kontraste geprüft
Und dann zeigt sich: Ein großer Teil der neuen Brand-Farben ist für Texte, Buttons oder UI-Elemente nicht barrierefrei einsetzbar.
Das führt zu:
- nachträglichen Anpassungen
- Notlösungen bei Hover-Zuständen
- zusätzlichen Farben außerhalb der CI
- mehr Zeitaufwand und Frust auf allen Seiten
Proof of Concept: Warum Barrierefreiheit erst im Web sichtbar wird
Eine Website ist der erste echte Härtetest für eine Marke. Erst hier zeigt sich:
- funktionieren Farben in verschiedenen Größen?
- sind Texte auch bei wenig Licht lesbar?
- halten Buttons, Links und Kontraste stand?
Genau deshalb macht es so viel Sinn, Marke und Website gemeinsam zu denken. Nicht aus Design-Dogma – sondern aus praktischer Erfahrung.
Wenn Corporate Design und Website aus einer Hand entstehen, kann ich:
- Farben von Anfang an webtauglich entwickeln
- Kontrastpaare direkt mitdenken
- Alternativen definieren, bevor es teuer wird
- visuelle Freiheit dort nutzen, wo sie erlaubt ist
Fallbeispiele aus der Praxis
Lokale Dienstleister & Kanzleien
Hier sind helle, seriöse Farbwelten beliebt – Beige, Grau, Pastell. Oft funktionieren diese Farben als Fläche, aber nicht für Texte oder Buttons. Die Lösung: klare Funktionsfarben + CI-Farben für Atmosphäre.
Gesundheits- & Beratungsbereiche
Ruhige Farben vermitteln Vertrauen – scheitern aber häufig an Kontrastwerten. Gerade hier ist Barrierefreiheit essenziell, weil die Zielgruppen oft sensibler reagieren.
Bestehende Marken
Bei Relaunches zeigt sich besonders deutlich, welche Farben im Alltag wirklich tragfähig sind – und welche nur im Styleguide gut aussahen.
Tools, mit denen du Farbkontraste selbst prüfen kannst
Gerade für bestehende Corporate Designs lohnt sich ein realistischer Check. Diese Tools helfen dir dabei:
- WAVE Web Accessibility Tool
Browser-Plugin, das Kontrastprobleme direkt auf echten Seiten sichtbar macht - WebAIM Color Contrast Checker
Ideal, um einzelne Farbpaare gezielt zu testen - Accessible Colors
Zeigt direkt, welche Farbkombinationen funktionieren - Contrast Ratio
Schnelles Tool für konkrete Zahlen und WCAG-Stufen - Coolers Color Contrast Checker
Zeigt dir direkt anhand eines Live-Beispiels, wie sich der Kontrast auswirkt - Pa11y
Mit Schiebereglern kannst du dir bequem eine Farbpalette zusammenstellen - Accessible color palette builder
Zeigt dir in einer Matrix, welche Paarungen gehen und welche nicht
WCAG-Richtlinien für Kontrastverhältnisse
Die WCAG-Richtlinien definieren für die Stufen AA und AAA unterschiedliche Kontrastverhältnisse für Texte: Für normalen Text benötigt AA mindestens 4,5:1 und AAA 7:1, während für großen Text (18pt/14pt fett) AA mindestens 3:1 und AAA 4,5:1 benötigt, um eine hohe Barrierefreiheit zu gewährleisten. AA ist der Mindeststandard, AAA der höchste Kontrast für optimale Lesbarkeit, auch für Nutzer mit Sehbehinderungen.
| Textart | WCAG AA (Mindest-Level) | WCAG AAA (Erweitertes Level) |
|---|---|---|
| Normaler Text | 4,5:1 | 7:1 |
| Großer Text | 3:1 | 4,5:1 |
| Grafische Elemente/UI-Komponenten | 3:1 | Nicht definiert (AAA-Ziel) |
Was bedeutet das?
- AA (AA-Bewertung): Die Mindestanforderung für Web-Barrierefreiheit, die ausreichend Kontrast für die meisten Nutzer bietet.
- AAA (AAA-Bewertung): Der höchste Standard mit extrem hohen Kontrasten für optimale Lesbarkeit, der oft als best practice angestrebt wird.
Wann gilt Text als groß?
- Normalerweise 18 Punkt (ca. 24 Pixel) oder größer bei normaler Dicke.
- Oder 14 Punkt (ca. 18,5 Pixel) oder größer bei fetter Schrift.
Mehr Zeit, mehr Planung – aber bessere Ergebnisse
Barrierefreies Farbdesign bedeutet:
- mehr Vorarbeit
- weniger spontane Farbentscheidungen
- bewusste Einschränkungen
Aber auch:
- bessere Lesbarkeit
- professionellere Wirkung
- zukunftssichere Websites
- weniger spätere Korrekturen
Es ist kein Trend – es ist Qualitätsarbeit.
Warum ich solche Dinge immer im Hinterkopf habe
Wenn ich Marken entwickle oder Websites umsetze, ist Barrierefreiheit kein nachträglicher Prüfpunkt, sondern Teil der Konzeption. Gerade Farben brauchen Voraussicht, Erfahrung – und den Blick auf den späteren Einsatz.
Deshalb macht es so viel Sinn, Marke und Website gemeinsam zu entwickeln. Erst im Web entsteht der echte Proof of Concept. Und genau dort entscheidet sich, ob Design nur schön aussieht – oder wirklich funktioniert.