Was sind barrierefreie Farbpaletten?

Was ist eine barrierefreie Farbpalette?

Eine barrierefreie Farbpalette ist eine Auswahl an Farben, bei der Text, Symbole und Oberflächenelemente genug Kontrast zum Hintergrund haben und Farbe nie der einzige Träger einer Information ist. So können Menschen mit Sehschwäche, Farbfehlsichtigkeit oder einem blassen Bildschirm die Seite lesen und bedienen. Die WCAG legen die Mindestkontraste fest, die eine Palette erfüllen muss.

Die WCAG-Kontrastregeln

• Normaler Text (SC 1.4.3, Stufe AA): mindestens 4,5:1 zum Hintergrund.
• Großer Text (SC 1.4.3): mindestens 3:1. Groß heißt 18 Punkt oder mehr bzw. 14 Punkt fett oder mehr, in CSS etwa 24 px und 18,5 px.
• UI-Komponenten und Grafiken (SC 1.4.11, Stufe AA): mindestens 3:1 zu angrenzenden Farben, zum Beispiel Button-Rahmen, Fokusring oder Diagrammlinie, die zum Verständnis nötig ist.
• Erweiterter Kontrast (SC 1.4.6, Stufe AAA): 7:1 für normalen und 4,5:1 für großen Text.
• Verwendung von Farbe (SC 1.4.1, Stufe A): Farbe darf nicht das einzige visuelle Mittel sein, um Informationen wie einen Fehler oder einen gewählten Zustand zu vermitteln.

Deaktivierte Bedienelemente, reine Dekoration und Logos sind ausgenommen. Details stehen auf den W3C-Seiten zu 1.4.3 und 1.4.11. Den ganzen Standard finden Sie unter WCAG.

So wird das Verhältnis berechnet

Das Kontrastverhältnis ist (L1 + 0,05) / (L2 + 0,05), wobei L1 die relative Luminanz der helleren und L2 die der dunkleren Farbe ist. Die relative Luminanz ist 0,2126 R + 0,7152 G + 0,0722 B, nachdem jeder sRGB-Kanal linearisiert wurde. Die Werte reichen von 1:1 bis 21:1. Laut WCAG dürfen berechnete Werte nicht gerundet werden: 4,499:1 verfehlt die Schwelle von 4,5:1.

Rechenbeispiele auf weißem Hintergrund

Schon ein Schritt von #767676 zu #777777 kippt das Ergebnis. Für UI-Teile ergibt #949494 auf Weiß 3,03:1 und besteht die 3:1-Regel, #959595 ergibt 2,995:1 und fällt durch.

Häufige Fehler

• Hellgrauer Platzhalter- und Hilfetext, der auf Ihrem Monitor gut aussieht, aber 4,5:1 verfehlt.
• Die Markenfarbe nur auf Weiß prüfen. Hover, Dark Mode und Text auf Bildern sind eigene Kombinationen.
• Text über Foto oder Verlauf ohne Überlagerung, sodass sich der Kontrast entlang des Textes ändert.
• Fehler oder Diagrammreihen nur in Rot und Grün, ohne Symbol, Beschriftung oder Muster (SC 1.4.1).
• Rahmen, Symbole und Fokusanzeigen vergessen, die unter 1.4.11 fallen, nicht unter 1.4.3.

Eine Palette testen

Prüfen Sie jedes Paar aus Text- und Hintergrundfarbe mit einem Kontrast-Checker und kontrollieren Sie dann die gerenderte Seite, denn CSS-Deckkraft und Überlagerungen verändern die tatsächlichen Farben. Automatische Scans erkennen viele Kontrastfehler, Text auf Bildern und Verläufen braucht meist einen manuellen Blick. Unser Vergleich der Tools für Barrierefreiheitstests stellt Optionen vor, und das Page Speed Monitoring verfolgt den Lighthouse-Accessibility-Score über die Zeit, sodass eine Farbänderung mit Kontrastproblem auffällt. Weiterlesen: barrierefreie Bilder, assistive Technologien und automatisierte Barrierefreiheitstests.

Häufige Fragen

Welches Kontrastverhältnis brauche ich für Fließtext?

Mindestens 4,5:1 für WCAG AA (Erfolgskriterium 1.4.3). Großer Text braucht 3:1. Stufe AAA verlangt 7:1 für normalen Text.

Gilt die 3:1-Regel auch für Buttons und Symbole?

Ja. Erfolgskriterium 1.4.11 verlangt 3:1 zu angrenzenden Farben für die Teile eines Bedienelements, die zum Erkennen und für seine Zustände nötig sind, sowie für Grafiken, die zum Verständnis nötig sind. Text im Button folgt der Textregel.

Sind Logos von den Kontrastregeln ausgenommen?

Logos und Markennamen sind von 1.4.3 ausgenommen. Ein Logo, das als Bedienelement dient, oder eine kontrastarme Variante, die der Autor gewählt hat statt der Markenvorgabe, ist es nicht.

Darf ich einen Fehler nur mit Farbe anzeigen?

Nein. Nach SC 1.4.1 braucht es einen weiteren Hinweis wie Text, Symbol oder Muster, weil manche Nutzer die Farben nicht unterscheiden können.

Muss ich den Dark Mode getrennt testen?

Ja. Jedes Paar aus Vorder- und Hintergrundfarbe, das auf dem Bildschirm erscheinen kann, hat ein eigenes Verhältnis, daher braucht ein dunkles Design eine eigene Prüfung.