Wie man zugängliche Farbkombinationen wählt
Farbentscheidungen sehen wie eine ästhetische Entscheidung aus und wirken wie eine rechtliche. Seit 2021 treffen rund 4.000 Web-Accessibility-Klagen pro Jahr US-Beklagte, und unzureichender Farbkontrast ist eines der drei am häufigsten zitierten Probleme in WCAG-basierten Klagen (neben fehlendem Alt-Text und unbeschrifteten Formularfeldern). Die gute Nachricht: Kontrast ist von den drei am einfachsten zu beheben. Die schlechte: «zugänglich» geht über die Kennzahl hinaus, Farbenblindheit, Fokus-Indikatoren, Dark Mode und Tokenisierung zählen alle.
Eine kurze Geschichte der digitalen Farb-Zugänglichkeit
Farbkontrast als geschriebener Standard geht auf die erste Arbeit der W3C Web Accessibility Initiative von 1997 zurück. Die ursprünglichen Web Content Accessibility Guidelines 1.0 (Mai 1999) empfahlen ausreichenden Kontrast qualitativ ohne harte Zahl. WCAG 2.0 (Dezember 2008) führte die heute vertraute Formel relativer Luminanz und das 4,5:1-Verhältnis auf Stufe AA ein, gezogen aus Forschung von Lighthouse International, was brille-tragende ältere Nutzer auf Bildschirmen komfortabel lesen können.
Das rechtliche Gewicht kam später. Section 508 des US Rehabilitation Act referenzierte WCAG 2.0 im Jahr 2018; der ADA wird nach dem Urteil des Ninth Circuit in Robles v. Domino's am 15. Januar 2019 (Supreme Court lehnte den Rechtsmittel im Oktober 2019 ab) von US-Gerichten so gelesen, dass er digitale Zugänglichkeit unter Title III abdeckt. Der European Accessibility Act trat am 28. Juni 2025 in Kraft und verlangt WCAG 2.1 AA bei verbraucherorientierten digitalen Diensten für den öffentlichen Sektor und viele private Unternehmen. In der Praxis ist 4,5:1 normaler Text + 3:1 großer Text + 3:1 UI-Komponenten der De-facto-Boden.
Die Wissenschaft hat sich weiterentwickelt. WCAG 2.1 (2018) ergänzte die 3:1-Regel für Nicht-Text-Kontrast. Der von Andrew Somers für WCAG 3 entwickelte APCA-Algorithmus modelliert Helligkeitswahrnehmung präziser; er ist 2026 noch Editor's Draft, kein Standard. Bjorn Ottossons OKLAB und OKLCH (2020) gaben Designern einen perzeptiv-uniformen Farbraum, der das Generieren zugänglicher Farbskalen viel leichter macht als HSL oder RGB.
Was «zugängliche Farbe» wirklich bedeutet
Vier Dinge zählen, nicht nur das eine Verhältnis:
- Vordergrund vs. Hintergrund. Die Kennzahl. Fließtext braucht 4,5:1, große Schrift 3:1, UI-Steuerelemente und Fokus-Indikatoren 3:1 gegen benachbarte Farben.
- Farbenblindheit. Etwa 8 % der Männer und 0,5 % der Frauen sehen weniger Farben als das Design annimmt. Die drei Haupttypen sind Protanopie und Deuteranopie (Rot-Grün, am häufigsten) und Tritanopie (Blau-Gelb).
- Farbe ist nie das einzige Signal. WCAG 1.4.1 verbietet, sich allein auf Farbe zur Bedeutungsvermittlung zu verlassen. Ein roter «Fehler»-Rahmen braucht auch ein Icon oder Label.
- Fokus-Indikatoren. Tastaturnutzer müssen sehen, wo der Fokus ist. WCAG 2.4.7 verlangt einen sichtbaren Fokus-Indikator, das 2.4.11-Update (WCAG 2.2) verlangt mindestens 2 CSS-Pixel Stärke und 3:1 Kontrast gegen die benachbarte Farbe.
Wie man zugängliche Farben Schritt für Schritt wählt
- Mit semantischen Tokens starten, nicht mit rohen Farben. Definieren Sie
text-primary,text-secondary,surface-default,surface-elevated,border-default,accent-primary,accent-danger, etc. - Helligkeitsskala wählen. OKLCH-Helligkeitswerte verwenden, um eine 5-9-Stufen-Skala zu bauen, bei der jede Stufe einen konstanten wahrnehmbaren Unterschied zur nächsten hat.
- Farbtöne in jeder Helligkeitsstufe wählen. Den Markenfarbton nehmen, dann komplementäre oder Akzent-Töne mit ähnlicher Chroma wählen.
- Kontrastverhältnisse berechnen. Jedes Token-Paar, das sich berührt, braucht das richtige Verhältnis.
- Farbblindheit-Simulator laufen lassen. Eine Schlüsselszene durch Protanopie-, Deuteranopie- und Tritanopie-Simulatoren rerendern.
- Mit echter Assistive-Technologie testen. Mac VoiceOver, NVDA, JAWS und TalkBack sollten alle ohne Farbhinweise navigieren können.
- Das Nicht-Farb-Signal überall hinzufügen, wo Farbe Bedeutung trägt. Icons für Fehler/Erfolg/Warnung, Unterstreichung für Links im Fließtext, Muster für Diagrammreihen.
- Tokens dokumentieren. Eine Figma-Bibliothek, eine Storybook-Seite oder eine statische Design-System-Site.
Kontrastverhältnis-Referenz
| Paar | WCAG 2.1 min | Stufe AA | Stufe AAA |
|---|---|---|---|
| Fließtext (unter 18 pt regular oder 14 pt fett) | 4,5:1 | 4,5:1 | 7:1 |
| Große Schrift (18 pt regular oder 14 pt fett) | 3:1 | 3:1 | 4,5:1 |
| UI-Komponenten (Formularränder, Toggle-Zustände, Fokus) | 3:1 | 3:1 | n/a |
| Grafische Objekte (bedeutungstragende Icons) | 3:1 | 3:1 | n/a |
| Text innerhalb eines Logos | ausgenommen | ausgenommen | ausgenommen |
| Deaktivierte Steuerelemente | ausgenommen | ausgenommen | n/a |
| Dekorativer Text | ausgenommen | ausgenommen | ausgenommen |
Farbenblindheits-Typen und wie man prüft
| Typ | Prävalenz | Sieht weniger | Häufiges Versagen |
|---|---|---|---|
| Protanopie | ~1 % der Männer | Rot | Roter Fehler vs. grüner Erfolg ununterscheidbar |
| Deuteranopie | ~5 % der Männer | Grün | Dito: Rot-Grün-Verwechslung |
| Tritanopie | ~0,005 % | Blau | Blau vs. Gelb ununterscheidbar |
| Achromatopsie | ~0,003 % | Alle Farben | Sieht nur Graustufen-Luminanz |
| Anomale Trichromasie | ~5 % | Reduzierte Empfindlichkeit in einem Kanal | Subtile Farbunterschiede verschmelzen |
Häufige Fallen
- Im HSL oder RGB designen. Gleiche numerische Schritte in HSL erzeugen ungleiche wahrgenommene Schritte. OKLCH behebt das.
- Sich für Zustand allein auf Farbe verlassen. Rot und Grün für Fehler und Erfolg: 8 % der Nutzer unterscheiden sie nicht. Icon oder Label hinzufügen.
- Reines Schwarz auf reinem Weiß.
#000auf#FFFergibt 21:1, aber ermüdet bei langem Lesen. Auf Fast-Schwarz und Fast-Weiß heruntergehen. - Markenfarben-Tyrannei. Das Markenrot heilig behandeln und auf Markenweiß bei 2,1:1 verwenden «weil das die Marke ist». Die Markenpalette aktualisieren.
- Fokus-Indikator, der auf dunklen Hintergründen verschwindet. Ein 2-Pixel-blauer Ring gegen einen dunkelblauen Button kann unsichtbar sein. Den Fokus-Ring gegen jede Oberfläche testen.
- Placeholder-Text, der den Kontrast verfehlt.
placeholder=wird mit ~40 % Deckkraft gerendert. Auf weißem Input fällt das leicht unter 4,5:1. - Formularfeld-Umrisse zu blass. Ein 1px grauer Rand auf Weiß bei 1,2:1 verfehlt WCAG 1.4.11. Auf 3:1 oder dicker erhöhen.
- Hover, der nur die Farbe ändert. Manche Zeigergeräte erzeugen kein Hover. Mit subtilem Schatten oder Transformation kombinieren.
- Dark Mode durch einfache Invertierung. Invertieren erzeugt gesättigte dunkle Farben, die hart sind. Dark Mode braucht seinen eigenen Design-Durchgang.
- Auto-generierter Text auf Bildern. Text auf einem hochgeladenen Bild kann Kontrast nicht garantieren. Translucenten Hintergrund oder text-shadow hinzufügen.
Alternative Algorithmen und Standards
| Algorithmus | Jahr | Status | Stärke |
|---|---|---|---|
| WCAG-2.x-Kontrastverhältnis | 2008 | Von den meisten Regulierungen verlangt | Einfache Mathematik, weit unterstützt |
| APCA | 2020 | WCAG-3 Editor's Draft | Besser bei perzeptueller Helligkeit |
| ISO 9241-302 | 2008 | Arbeitsplatz-Ergonomie-Standard | Hardware-orientiert, sehr streng |
| Lighthouse-Kontrastwarnungen | 2018 | Chrome DevTools | Kostenlos, im Browser |
| axe-core | 2015 | Open-Source-Bibliothek | Industriestandard für automatisierte Tests |
Für reguliertes Arbeiten heute ist WCAG 2.1 AA der Boden. APCA lohnt sich zu verfolgen, während WCAG 3 reift; viele Design-System-Teams berichten bereits beide Zahlen.
Werkzeuge zur Auswahl zugänglicher Farben
| Werkzeug | Zweck | Stärke |
|---|---|---|
| Kontrast-Checker (Browser) | Vordergrund/Hintergrund-Paar bewerten | Sofort, kein Upload |
| Zugänglicher-Palette-Generator | Vollständige Helligkeitsskala mit konstanter Chroma bauen | OKLCH für perzeptuelle Uniformität |
| Farbblindheits-Simulator | Bildschirm so rerendern, wie ein Farbenblinder es sieht | Erkennt Rot-Grün-Probleme vor dem Launch |
| Chrome DevTools Lens | Kontrast und Farbenblindheit vor Ort inspizieren | In den Browser eingebaut |
| WebAIM Contrast Checker | Klassische WCAG-2-Referenz | Vertrauenswürdig, weit zitiert |
| Stark (Figma-Plugin) | Figma-Designs auf Kontrast und Blindheit prüfen | Erkennt Probleme zur Design-Zeit |
| axe DevTools (Browser) | Automatisierter WCAG-Scan | Industriestandard |
| Tailwind-, Radix-, Open-Props-Farbskalen | Vorgeprüfte OKLCH-basierte Paletten | Zugänglichkeit von Design-Teams kuratiert |
Datenschutz und die Werkzeuge
Der Kontrast-Checker, der Generator für zugängliche Paletten und der Farbblindheits-Simulator laufen vollständig in Ihrem Browser. Die Farben, die Sie wählen oder einfügen, werden von JavaScript auf Ihrem Gerät verarbeitet, die Ergebnisse auf der Seite gerendert und nichts an einen Server gesendet. Keine Telemetrie, keine Analyse der Eingabe, keine Drittskripte. Für Markenfarben, die noch nicht öffentlich sind, interne Produktpaletten oder Designs unter Embargo ist dieser strikt lokale Ablauf der Unterschied zwischen dem Vertrauen Ihrer unveröffentlichten Markenassets dem Werkzeug eines Fremden und keinem. Die Werkzeuge können offline laufen, sobald die Seite geladen ist, was Sie überprüfen können, indem Sie das Netzwerk abschalten und ein Farbpaar erneut prüfen.
Häufig gestellte Fragen
What contrast ratio does WCAG require?
WCAG 2.1 Level AA requires at least 4.5:1 for normal body text and 3:1 for large text (18 pt regular or 14 pt bold). Level AAA raises that to 7:1 for normal text and 4.5:1 for large text. Non-text UI components and graphical objects need 3:1 against adjacent colors.
Are WCAG contrast ratios scientifically accurate?
They are based on the WCAG 2.0 algorithm from 2008, which compares the relative luminance of two colors using the sRGB color space. The formula is imperfect for very dark and very light combinations and for some color hues; the APCA (Accessible Perceptual Contrast Algorithm) being developed for WCAG 3 produces more perceptually accurate results. For 2026 work, WCAG 2.x is still the standard most regulations cite.
How do I check whether my colors work for color-blind users?
Run them through a color-blindness simulator that converts your palette to what someone with protanopia, deuteranopia, or tritanopia sees. About 8% of men and 0.5% of women have some form of color vision deficiency, so this matters.
Should I use the same color palette for light and dark mode?
Usually not. Dark mode needs slightly desaturated colors at the same hue, otherwise vivid colors that look fine on white become eye-strain on black. Define semantic tokens (text-primary, surface-secondary) and map them to different physical colors per mode.
What does OKLCH have to do with accessibility?
OKLCH is a perceptually uniform color space (Bjorn Ottosson, 2020) where equal numerical changes produce equal perceptual changes. That makes it much easier to generate accessible color scales because you can step the lightness in equal increments and the perceived brightness step is consistent, which is hard to do in HSL or RGB. CSS supports OKLCH directly since 2023 in all major browsers.