Barrierefreies Farbsystem
Zweck
Der Skill "Barrierefreies Farbsystem" bietet eine Methode zur Erstellung von Farbpaletten, die visuell kohärent und funktional barrierefrei sind. Er geht über ästhetische Farbauswahl hinaus zu einem strukturierten System aus Skalen, kontrastsicheren Paarungen und semantischer Anwendung und stellt sicher, dass Inhalte von allen Nutzern, einschließlich solcher mit Sehbehinderungen, wahrgenommen werden können.
Anwendungsfälle
- Etablieren einer digitalen Farbpräsenz für eine neue Marke.
- Überprüfen und Beheben von Barrierefreiheitsproblemen einer bestehenden Website in Bezug auf Farbe.
- Gestalten von Dark-/Light-Mode-Themen.
- Definieren semantischer Farben für Rückmeldungen (Erfolg, Fehler, Warnung).
Wann NICHT zu verwenden
- Kunstopferte Erlebnisse: Wenn Farbe rein expressiv ist und keine funktionalen Informationen trägt (Barrierefreiheit wird dennoch empfohlen).
- Festverdrahtete Legacy-Apps: Wenn die technische Schuld die Implementierung eines Variablensystems unmöglich macht (konzentrieren Sie sich auf punktuelle Korrekturen).
- Rein dekorative Elemente: Elemente wie Hintergrundmuster, die keinen Text oder interaktive Komponenten enthalten (WCAG 1.4.3 ist hier nicht anwendbar).
Eingaben
Zum Erstellen eines barrierefreien Farbsystems benötigen Sie:
- Primäre Markenfarbe: Die Kernfarbe, die die Marke identifiziert (z. B. #0055FF).
- Neutrale Basis: Ein Ausgangspunkt für Graustufen/Schwarztöne (z. B. #1A1A1A oder ein getönter Neutralton).
- Barrierefreiheitsziel: WCAG-Level AA (Standard) oder AAA (erweitert).
- Nutzungskontext: Handelt es sich um ein Dashboard mit hoher Dichte, eine Marketing-Landingpage oder eine Utility-first-Anwendung?
Ausgaben
- Farbskalen: Tonale Paletten für Primär-, Sekundär-, Neutral- und Semantikfarben (normalerweise 10-stufige Skalen).
- Kontrastmatrix: Eine Übersicht, welche Vordergrundfarben auf welchen Hintergrundfarben sicher verwendet werden können.
- Semantische Zuordnung: Definierte Rollen für Farben (z. B.
--color-action-primary,--color-surface-muted). - CSS-Custom-Properties: Ein produktionsreifer Block aus CSS-Variablen, optional mit
color-mix(), um Hover-/Active-Töne aus einem einzigen Basistoken abzuleiten, anstatt jeden Zustand manuell auszuwählen.
Arbeitsablauf
1. Tonalen Skalen erstellen
Erweitern Sie die Basisfarben zu Skalen (z. B. 50 bis 900). Verwenden Sie ein Werkzeug oder eine Formel, die konsistente Helligkeitsschritte beibehält. Das Arbeiten im OKLCH-Farbraum (statt HSL) führt zu wahrnehmungsmäßig gleichmäßigeren Helligkeitsschritten über Farbtöne hinweg, was die Vorhersage von Kontrasten vor dem Testen erleichtert. Tipp: Stellen Sie sicher, dass Ihre Primärfarbe 500 oder 600 die "Marken"-Version ist.
2. Neutrale Farben definieren
Erstellen Sie eine neutrale Skala. Erwägen Sie, die Neutraltöne mit einem kleinen Anteil der Primärfarbe (z. B. 2–5 %) zu "tönen", um ein kohärentes Erscheinungsbild zu erzielen.
3. Semantische Rollen festlegen
Weisen Sie Farben funktionalen Rollen zu:
- Aktion: Primärfarbe für Schaltflächen, Links und aktive Zustände.
- Oberfläche: Hintergründe, Karten und Trennlinien (Neutraltöne).
- Inhalt: Text und Symbole (hochkontrastreiche Neutraltöne).
- Status: Erfolg (Grün), Warnung (Gelb/Orange), Fehler (Rot), Info (Blau).
4. Kontrastvalidierung durchführen
Testen Sie Paarungen mit WCAG-Formeln (1.4.3, 1.4.11):
- Normaler Text: 4,5:1 für AA, 7:1 für AAA.
- Großer Text (>18pt): 3:1 für AA, 4,5:1 für AAA.
- UI-Komponenten/Symbole: 3:1 für AA (Nicht-Text-Kontrast, 1.4.11).
- Fokusindikatoren: 3:1 gegenüber angrenzenden Farben, und der Indikator darf nicht von sticky Headern oder anderen Inhalten verdeckt werden (WCAG 2.2 SC 2.4.11, Focus Not Obscured).
5. Paarungsregeln erstellen
Dokumentieren Sie, welche Textfarben auf welchen Hintergründen verwendet werden können. Beispiel: Weißer Text (#FFFFFF) ist nur auf Primärfarbe 600 oder höher sicher.
Entscheidungsregeln
- Lesbarkeit zuerst: Funktion (Lesbarkeit) überschreibt immer die Ästhetik. Wenn eine Markenfarbe für Text zu hell ist, verwenden Sie eine dunklere Variante für den Text, während Sie die Markenfarbe für dekorative Elemente beibehalten.
- Farbe nicht allein verwenden: Verlassen Sie sich niemals ausschließlich auf Farbe, um Informationen zu vermitteln (z. B. fügen Sie eine Fehlermeldung ein Symbol oder eine Textbeschriftung hinzu).
- Konsistente Helligkeit: Halten Sie die Helligkeitswerte über verschiedene Farbtöne auf derselben Skalenstufe ähnlich (z. B. sollten Rot 500 und Blau 500 eine ähnliche wahrgenommene Helligkeit haben).
Einschränkungen
- Responsivität: Farben müssen den Kontrast auf mobilen Bildschirmen beibehalten, wo Blendung oder Displays mit geringer Qualität die Sichtbarkeit beeinträchtigen könnten.
- Barrierefreiheit: Muss mindestens den WCAG 2.2 AA-Standards für alle funktionalen Elemente entsprechen, einschließlich der Anforderung 2.4.11, dass Fokusindikatoren sichtbar und unverdeckt bleiben.
- Hierarchie: Verwenden Sie Farbsättigung und -kontrast, um das Auge zu führen; wichtigere Elemente (CTAs) sollten ein höheres visuelles Gewicht haben.
Häufige Fehlermuster
- Unzureichender Kontrast: Verwendung von hellem grauem Text auf weißem Hintergrund oder weißem Text auf einer hellen Markenfarbe.
- Vibrierende Farben: Kombination von stark gesättigten Farben (wie Rot und Grün), die visuelle Anstrengung verursachen.
- Zu viele Farben: Erzeugen eines "Regenbogen"-Effekts, der die Markenidentität verwässert und die Hierarchie verwirrt.
- Semantischer Missbrauch: Verwendung von "Fehler-Rot" für ein dekoratives Element, was zu Nutzerängsten führt.
Validierungskriterien
- Jedes funktionale Textelement hat ein Kontrastverhältnis von mindestens 4,5:1 gegenüber seinem Hintergrund.
- UI-Komponenten (Rahmen, Symbole) haben mindestens 3:1-Kontrast.
- Das System enthält eine klare Skala für Primär- und Neutralfarben.
- Informationen werden niemals ausschließlich durch Farbe vermittelt.
- Das System wird mittels CSS-Custom-Properties für die Portabilität dokumentiert.