Barrierefreie Farben für Ihre Website wählen

Testen Sie zuerst Ihre Markenfarbe

Prüfen Sie Ihre Hauptfarbe auf Weiß und auf Schwarz, bevor Sie damit gestalten. Das Beispiel-Blau #3366CC erreicht auf Weiß 5,36:1 und erfüllt damit AA für normalen Text, auf Schwarz aber nur 3,91:1, was nur für großen Text genügt.

Testen Sie beide Richtungen: die Farbe als Text auf hellem Grund und weißen oder schwarzen Text auf der Farbe, zum Beispiel auf Buttons.

Kontrast über die Helligkeit korrigieren

Eine ganz andere Farbe brauchen Sie selten. Meist reicht es, sie etwas dunkler oder heller zu machen und den Farbton zu behalten. Genau das macht der Korrekturvorschlag im Tool:

Eine Palette aus Abstufungen bauen

Eine einzige Markenfarbe reicht für eine ganze Oberfläche nicht aus. Hellere (mit Weiß gemischt) und dunklere Stufen (mit Schwarz gemischt) desselben Farbtons liefern passende Hintergründe, Rahmen und Hover-Zustände. Für #3366CC ist die 50-%-Aufhellung #99B3E6 und die 50-%-Abdunklung #1A3366.

Nutzen Sie helle Stufen für Hintergründe und dunkle für Text, und prüfen Sie jede Text-Hintergrund-Kombination, die Sie tatsächlich verwenden.

Nie nur auf Farbe setzen

WCAG-Erfolgskriterium 1.4.1, Benutzung von Farbe (Stufe A), verlangt, dass Farbe nicht das einzige Mittel ist, um Informationen zu vermitteln. Viele Menschen mit Farbsehschwäche können manche Farben nicht unterscheiden, am häufigsten Rot und Grün.

Unterstreichen Sie Links im Fließtext, ergänzen Sie Fehlermeldungen um ein Symbol oder ein Wort, und beschriften Sie Linien in Diagrammen direkt statt nur über eine Farblegende.

Checkliste

Gehen Sie vor dem Veröffentlichen diese Punkte durch:

• Fließtext erreicht mindestens 4,5:1 zu seinem Hintergrund.
• Große Überschriften erreichen mindestens 3:1.
• Eingaberahmen, Fokusrahmen und Symbole erreichen mindestens 3:1.
• Links, Fehler und Pflichtfelder sind nicht nur durch Farbe gekennzeichnet.
• Text auf Bildern oder Verläufen ist gegen die hellste Stelle dahinter geprüft.