barrierefreie Farbpalette · WCAG 2.2 · Kontrast · redundante Hinweise
So entsteht eine barrierefreie Farbpalette
Übersetzen Sie Markenfarben in UI-Rollen, prüfen Sie wirklich angrenzende Paare, erhalten Sie sichtbare Fokus- und Statussignale und nutzen Sie Simulation als Ergänzung statt als alleinigen Nachweis.
barrierefreie Farbpalette
Was macht eine Farbpalette barrierefrei?
Eine barrierefreie Farbpalette ist ein rollenbasiertes Farbsystem, dessen reale Kombinationen aus Text, Hintergrund, Bedienelement, Fokus und Grafik für ihren Einsatzzweck geprüft sind. Für WCAG 2.2 Level AA benötigt normaler Text in der Regel mindestens 4,5:1 Kontrast, großer Text 3:1 und die zur Erkennung aktiver Steuerelemente oder bedeutungsvoller Grafiken nötige visuelle Information 3:1 zu angrenzenden Farben. Farbe darf nicht der einzige Bedeutungsträger sein. Jeder Token braucht eine Aufgabe, jedes Paar muss den Grenzwert ohne Rundung erreichen und Fehler, Links, Auswahl sowie Diagramme brauchen zusätzlich Text, Form, Muster oder Position.
Vier Regeln für eine barrierefreie Farbpalette
- barrierefreie Farbpalette: weisen Sie zuerst semantische Rollen wie Fläche, Oberfläche, Primärtext, Akzent, Rand, Fokus, Erfolg, Warnung und Fehler zu
- barrierefreie Farbpalette: messen Sie jeden Vordergrund gegen den wirklich angrenzenden Hintergrund, einschließlich Hover, Fokus, Auswahl, Overlay und dunklem Theme
- barrierefreie Farbpalette: behandeln Sie 4,5:1 und 3:1 als Mindestgrenzen ohne Aufrundung und lassen Sie Spielraum für dünne Schriften und reale Displays
- barrierefreie Farbpalette: wiederholen Sie Bedeutung mit Beschriftung, Icon, Unterstreichung, Form, Muster oder Position, sodass ein Farbton nie die einzige Anweisung ist
barrierefreie Farbpalette: WCAG-2.2-Farbprüfungen nach UI-Rolle
| UI-Einsatz | Zu messendes Paar | Level-AA-Ziel | Praxisnotiz |
|---|---|---|---|
| Normaler Text · barrierefreie Farbpalette | Text gegen den gerenderten Hintergrund | mindestens 4,5:1 | 4,499:1 darf nicht auf bestanden gerundet werden |
| Großer Text · barrierefreie Farbpalette | großer Text gegen seinen Hintergrund | mindestens 3:1 | mindestens 18 pt normal oder 14 pt fett, mit gleichwertiger Größe für CJK-Schriften |
| Aktive Steuerelemente und wichtige Grafiken · barrierefreie Farbpalette | erforderliches Signal gegen angrenzende Farben | mindestens 3:1 | Ränder, Icons, Fokus, Auswahl und bedeutungstragende Datenmarken prüfen |
| Farbcodierte Information · barrierefreie Farbpalette | Bedeutung zusätzlich zum Farbton | ein sichtbarer Nicht-Farb-Hinweis | Text, Form, Muster, Unterstreichung, Icon oder Position ergänzen |
barrierefreie Farbpalette: Mit Rollen statt mit Lieblingsfarben beginnen
Eine Markenpalette beschreibt Identität; eine barrierefreie Farbpalette beschreibt Entscheidungen. Erfassen Sie Seitenfläche, erhöhte Oberfläche, Primär- und Sekundärtext, Link, Akzent, Rand, Fokusring, deaktivierte Darstellung sowie Erfolg, Warnung und Fehler. Geben Sie jeder Aufgabe einen stabilen Token, statt HEX-Werte in Komponenten zu verteilen. Notieren Sie anschließend, welche Rollen einander berühren. Primärtext kann auf Seite und Karte erscheinen; ein Fehlerrand kann an Feld und Seitenfläche grenzen. Diese Nachbarschaftskarte verhindert, dass alles nur gegen Weiß geprüft wird, obwohl das Produkt getönte Flächen, Transparenz, Bilder, Verläufe und dunkle Themes nutzt. Eine Markenfarbe muss nicht verschwinden: Sie kann dekorativ bleiben und für Text oder Bedienung gesperrt werden, wenn sie dort keinen sicheren Kontrast liefert.
barrierefreie Farbpalette: Eine Paarmatrix für Text, Steuerung und Zustand bauen
Prüfen Sie Kombinationen statt isolierter Farben. Für Text werden Vordergrund, gerenderter Hintergrund, Größe, Gewicht und Zustand festgehalten. Bei Steuerelementen zählen die visuellen Informationen, die Komponente, Fokus, Auswahl, Öffnung, Ungültigkeit und Hover erkennbar machen. WCAG nimmt inaktive Komponenten von der Nicht-Text-Kontrastregel aus, doch ein Produkt kann deaktivierte Inhalte weiterhin lesbar und auffindbar halten. Messen Sie Transparenz nach der Überlagerung und bei Text auf Bildern oder Verläufen den ungünstigsten realistischen Punkt. Speichern Sie Ergebnisse bei den Tokens, damit ein Theme-Wechsel die barrierefreie Farbpalette nicht unbemerkt bricht. Die Matrix zeigt auch überflüssige Varianten: Erfüllen zwei Grautöne dieselbe Aufgabe, aber nur einer besteht auf allen Flächen, ist das kleinere System meist robuster.
barrierefreie Farbpalette: Luminanzkontrast und farbcodierte Bedeutung trennen
Kontrast und Farbeinsatz beantworten verschiedene Fragen. Ein grünes Erfolgsfeld kann hervorragenden Textkontrast haben und trotzdem versagen, wenn allein Grün es von einem roten Fehler unterscheidet. Behalten Sie Farbe, ergänzen Sie jedoch Wort, Icon, Muster oder Struktur, die in Graustufen und bei veränderter Farbwahrnehmung erhalten bleibt. Links im Fließtext profitieren von Unterstreichungen. Diagramme brauchen direkte Beschriftungen, unterschiedliche Markerformen, Linienarten oder Muster, wenn Serien unterschieden werden müssen. Fokus muss sichtbar bleiben, ohne einen Farbnamen erkennen zu können. Komplementärfarben oder weit entfernte Farbtöne sind nicht automatisch zugänglich: Abstand im Farbkreis garantiert weder relative Luminanz noch einen zweiten Hinweis. Die barrierefreie Farbpalette schafft die Grundlage; Inhalt und Komponente vollenden die Kommunikation.
Freigabecheck für eine barrierefreie Farbpalette
- barrierefreie Farbpalette: jede Farbe semantisch benennen und erlaubte Oberflächen sowie Zustände dokumentieren
- barrierefreie Farbpalette: normalen Text mit mindestens 4,5:1 und großen Text mit mindestens 3:1 gegen den gerenderten Hintergrund messen
- barrierefreie Farbpalette: aktive Ränder, Fokus, Zustände und wichtige Grafiken mit mindestens 3:1 zu angrenzenden Farben messen
- barrierefreie Farbpalette: Normal-, Hover-, Fokus-, Aktiv-, Auswahl-, Fehler-, Inaktiv-, Overlay-, Dunkel- und Zoomzustände prüfen
- barrierefreie Farbpalette: Beschriftung, Form, Icon, Muster, Unterstreichung oder Position ergänzen, wenn Farbe Status oder Identität vermittelt
- barrierefreie Farbpalette: Paarmatrix, Tool-Ergebnis, Komponentenversion und Prüftermin für spätere Wiederholungen speichern
barrierefreie Farbpalette: Palette in vier Schritten erstellen und prüfen
barrierefreie Farbpalette: 1. Rollen erfassen
barrierefreie Farbpalette: Text, Flächen, Ränder, Steuerung, Fokus, Daten und Feedback auflisten und Berührungen je Theme und Zustand notieren.
barrierefreie Farbpalette: 2. Kandidaten erzeugen
barrierefreie Farbpalette: mit dem Harmoniewerkzeug passende Optionen suchen, Markenpräferenz aber von Kontrast- und Bedeutungsgrenzen trennen.
barrierefreie Farbpalette: 3. Matrix messen
barrierefreie Farbpalette: reale Vordergrund-Hintergrund-Paare ohne Rundung prüfen und jeden Token unter seinem Ziel ersetzen oder einschränken.
barrierefreie Farbpalette: 4. Ganze Zustände prüfen
barrierefreie Farbpalette: repräsentative Farbsichten, Graustufen und Tastaturfokus ansehen und echte Komponenten auf Desktop und Mobil testen.
barrierefreie Farbpalette: Was WCAG 2.2 tatsächlich festlegt
- barrierefreie Farbpalette: Erfolgskriterium 1.4.3 verlangt auf Level AA 4,5:1 für normalen und 3:1 für großen Text, nennt mindestens 18 pt normal oder 14 pt fett als große Schrift und untersagt das Aufrunden von Grenzwerten. W3C Understanding SC 1.4.3 lesen
- barrierefreie Farbpalette: Erfolgskriterium 1.4.11 verlangt mindestens 3:1 zu angrenzenden Farben für visuelle Informationen, die aktive UI-Komponenten, Zustände und bedeutungsvolle Grafiken identifizieren. W3C Understanding SC 1.4.11 lesen
- barrierefreie Farbpalette: Erfolgskriterium 1.4.1 fordert eine sichtbare Alternative, wenn Farbe Information, Handlung, Reaktion oder Unterscheidung vermittelt; auch bei 3:1 braucht exakte Farberkennung einen weiteren Hinweis. W3C Understanding SC 1.4.1 lesen
“Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”
Fragen zur barrierefreien Farbpalette
Muss jede Palettenfarbe zu jeder anderen kontrastieren?
barrierefreie Farbpalette: Nein. Prüfen Sie vorgesehene Berührungen und deren Rollen. Primärtext muss vielleicht auf mehreren Flächen bestehen, während ein dekorativer Akzent nie Text trägt oder ein Bedienelement kennzeichnet. Dokumentieren Sie Grenzen gegen ungeprüfte Wiederverwendung. Eine Paarmatrix ist genauer als das Etikett konform oder nicht konform auf einer Einzelfarbe.
Sind Komplementärfarben automatisch barrierefrei?
barrierefreie Farbpalette: Nein. Gegenüberliegende Positionen im Farbkreis beschreiben einen Farbtonbezug, kein WCAG-Ergebnis. Leuchtende Komplementäre können ähnliche Luminanz haben, Text erschweren oder bei manchen Farbsichten zusammenfallen. Erzeugen Sie harmonische Kandidaten, messen Sie dann Kontrast und ergänzen Sie Nicht-Farb-Hinweise.
Beweist ein Farbenblindheits-Simulator WCAG-Konformität?
barrierefreie Farbpalette: Nein. Simulation ist eine Prüfhilfe, keine Diagnose, Konformitätsberechnung oder Vertretung behinderter Nutzer. Messen Sie erforderliche Paare deterministisch, prüfen Sie redundante Hinweise und komplette Zustände und ergänzen Sie je Risiko Fach- oder Nutzertests.