Die wichtigsten Erkenntnisse vorab
Vorab auf einen Blick: Barrierefreie Farben sind kein nettes Extra, sondern unverzichtbar für Websites und Apps. Mit einem barrierefreiheit farben checker prüfst du, ob deine Farbkombinationen für alle Menschen lesbar sind – auch für Personen mit Sehbehinderungen.
Die WCAG-Standards verlangen ein Mindestkontrasiverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text (Level AA). Für höchste Ansprüche gilt 7:1 (Level AAA). Tools wie Kontrastrechner.de oder der WebAIM Contrast Checker helfen dir dabei, diese Werte schnell zu überprüfen.
Bestimmte Farbkombinationen solltest du komplett meiden: Rot-Grün, Grün-Braun oder Blau-Lila sind für Menschen mit Farbfehlsichtigkeit schwer unterscheidbar. Pastellfarben erreichen oft nicht die nötigen Kontraste. Die gute Nachricht: Es gibt viele kostenlose Tools, die Arbeit abnehmen und Farbsehschwächen simulieren können.
Warum Farbkontraste im Web so wichtig sind
Als ich vor Jahren meine erste Website gebaut hab, dachte ich nur an Design und Ästhetik. Schicke Pastelltöne, dezente Graustufen – sah super aus auf meinem Monitor. Bis mir ein Kollege mit einer Sehschwäche sagte, dass er kaum was lesen konnte. Das war mein Weckruf.
Farbkontrast betrifft nicht nur eine kleine Nische. In Deutschland leben Millionen Menschen mit Sehbehinderungen oder Farbfehlsichtigkeit. Mit zunehmendem Alter verliert jeder von uns Kontrast-Wahrnehmung. Beim Sport draußen, wenn die Sonne auf dein Smartphone knallt, brauchst du ordentliche Kontraste, um die Trainings-App zu lesen.
Die Lesbarkeit hängt nicht von der Farbe selbst ab, sondern von der relativen Luminanz – also wie hell oder dunkel eine Farbe wirkt.
Barrierefreie Farbgestaltung hilft übrigens allen: klare Kontraste machen Inhalte für jeden besser lesbar – ob im hellen Büro, im Park oder beim schnellen Blick aufs Display. Die WCAG-Richtlinien sind dabei dein Kompass.
Der contrast checker barrierefreiheit ist dein erster Schritt zu inklusivem Design. Er zeigt dir nicht nur, ob deine Farben passen, sondern auch warum nicht, sodass du mit der Zeit lernst, welche Kombinationen funktionieren.
Die wichtigsten Standards: WCAG AA und AAA verstehen
Level AA fordert
- Normaler Text: mindestens 4,5:1
- Großer Text (ab 18pt oder 14pt fett): mindestens 3:1
- UI-Komponenten und grafische Objekte: mindestens 3:1
Level AAA verschärft das
- Normaler Text: mindestens 7:1
- Großer Text: mindestens 4,5:1
Ein Kontrastverhältnis von 4,5:1 bedeutet, dass der hellere Farbwert 4,5-mal so hell ist wie der dunklere. Schwarz auf Weiß hat zum Beispiel 21:1 – der maximal mögliche Kontrast. Der farbkontrast barrierefreiheit wird über die relative Luminanz berechnet. Die meisten Checker akzeptieren HEX, RGB oder HSL und rechnen automatisch um.
In der Praxis: dunkle Schrift auf hellem Grund oder umgekehrt. Grautöne sind trickreich – ein mittleres Grau auf Weiß erreicht oft nicht Level AA. Ich teste jede neue Farbkombi im Kontrastrechner, bevor ich sie einsetze.
Die besten Checker-Tools für barrierefreie Farben
Es gibt viele Tools. Meine Favoriten:
- Kontrastrechner.de – schnell, kostenlos und auf Deutsch. Unterstützt HEX, RGB, HSL und zeigt visuelle Darstellung.
- WebAIM Contrast Checker – internationaler Standard, auch als Bookmarklet.
- Color Contrast Analyzer von TPG – Desktop-App mit Pipette und Farbsehschwäche-Simulation.
- Siteimprove Color Contrast Checker – nutzerfreundlich, ideal für Einsteiger.
- Stark – Plugin für Figma/Sketch, prüft direkt im Design-Tool.
- Accessible color palette builder – erstellt geprüfte Farbpaletten für Styleguides.
- Chrome DevTools – integrierter Contrast Checker im Inspektor.
Farbkombinationen, die du unbedingt vermeiden solltest
Rot-Grün ist die häufigste Problemkombi. Etwa 8% aller Männer haben eine Rot-Grün-Sehschwäche. Selbst wenn der Luminanzkontrast stimmt, sind die Farben oft kaum unterscheidbar.
Weitere heikle Kombinationen: Grün-Braun und Blau-Lila. Pastellfarben erreichen selten notwendige Kontraste. Und: Information nie nur über Farbe vermitteln – immer zusätzlich Symbole oder Text verwenden.
Simulationstools wie der Color Contrast Analyzer oder \"Colour Blindness Simulator\" sollten Pflicht sein, bevor du live gehst.
So funktioniert die Kontrast-Berechnung technisch
Die Berechnung basiert auf der relativen Luminanz. RGB-Werte werden in einen linearen Farbraum umgerechnet, daraus folgt die Luminanz. Das Kontrastverhältnis lautet:
(L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere und L2 die dunklere Luminanz ist. Das Ergebnis liegt zwischen 1:1 und 21:1.
Praktisch: gib einfach HEX (#FFFFFF) oder RGB (255,255,255) ins Tool. Moderne Tools unterstützen auch die APCA-Methode, die zusätzlich Schriftgröße und -gewicht berücksichtigt.
Praktische Tipps für barrierefreie Farbgestaltung
- Teste früh und oft: Bereits im Wireframe prüfen.
- Baue eine geprüfte Farbpalette: Definiere funktionierende Kombinationen vorab.
- Nutze Komplementärfarben: Blau & Orange funktionieren häufig, trotzdem prüfen.
- Differenziere nicht nur per Farbe: Verwende Symbole oder Muster zusätzlich.
- Automatisiere: Plugins und Extensions (z. B. Stark) sparen Zeit.
- Achte auf Schriftgröße: Große Schrift erlaubt niedrigeren Kontrast (3:1).
- Teste auf Geräten: Laptop, Tablet, Smartphone und draußen bei Tageslicht.
- Dokumentiere Entscheidungen: Styleguide mit genehmigten Kombinationen.
Die häufigsten Fehler und wie du sie vermeidest
Typische Fehler:
- Nur Hauptfarben testen: Vergiss Hover, Fokus, Platzhalter-Text nicht.
- Design-Ebene nicht gecheckt: Prüfe bereits im Design, nicht erst in der Entwicklung.
- Overlays und Transparenz: Halbtransparente Overlays sind tricky – Kontrast hängt vom Bildinhalt ab.
- Verläufe: Gradients können an einzelnen Punkten kippen – teste an mehreren Stellen.
- Tools falsch bedienen: Verwechslung von Vorder-/Hintergrund liefert falsche Werte.
- Nur auf AA optimieren: Für kritische Bereiche AAA anstreben.
- Manuelle Farbcodes: Nutze Pipette oder Copy-Paste statt Abtippen.
- Kontext vergessen: 4,6:1 kann auf Mobile noch schlecht lesbar sein.
Aus Fehlern lernt man – Checklisten helfen, wiederkehrende Fehler zu vermeiden.
