Farben wählen, die jeder lesen kann
Von The AsasWeb team 1 Min. Lesezeit
WCAG verlangt ein Kontrastverhältnis von mindestens 4,5:1 für Fließtext und 3:1 für große Texte und Bedienelemente. Der verlässliche Weg dorthin ist, diese Ziele von Anfang an in die Palette einzubauen, eine dunkle Schriftfarbe und eine helle Fläche zu wählen, die bequem bestehen, und dann jedes Farbpaar mit einem Kontrast-Tool zu prüfen. Signalisiert nie etwas allein über Farbe und prüft den Dark Mode separat, denn eine Palette, die auf Weiß besteht, kann auf Fast-Schwarz durchfallen.
Kontrastarmer Text sieht im Designtool elegant aus und verschwindet im echten Leben: in der Sonne, auf einem billigen Bildschirm oder für alle mit eingeschränkter Sehkraft. Barrierefreie Farbe heißt nicht, eure Marke zu verwässern. Es heißt sicherzustellen, dass Menschen sie tatsächlich lesen können.
Die Ziele kennen
WCAG legt klare Mindestwerte fest. Fließtext braucht ein Kontrastverhältnis von mindestens 4,5 zu 1 gegenüber dem Hintergrund. Großer Text, ab etwa 24 Pixel, und Benutzeroberflächenelemente brauchen mindestens 3 zu 1. Das sind Untergrenzen, keine Ziele, und sie lassen sich mit jedem Kontrast-Tool leicht prüfen.
Kontrast in die Palette einbauen
Der Trick ist, die Palette von Anfang an um diese Ziele herum zu gestalten, statt am Ende Fehler zu entdecken. Wählt eine dunkle Schriftfarbe und eine helle Fläche, die bequem bestehen, dann Akzentfarben, die als Text und als Füllung funktionieren. Auf dieser Website ist jedes Farbpaar mit seinem gemessenen Verhältnis dokumentiert, damit nichts durchrutscht.
Nicht allein auf Farbe verlassen
Farbe sollte nie der einzige Weg sein, etwas zu signalisieren. Ein Pflichtfeld, ein Fehler, ein Link in einem Absatz: jedes braucht einen zweiten Hinweis wie Text, ein Icon oder eine Unterstreichung. Menschen, die Farbunterschiede nicht wahrnehmen, brauchen die Botschaft trotzdem.
Den Dark Mode beachten
Eine Palette, die im Light Mode besteht, kann im Dark Mode versagen, wo eine Markenfarbe, die auf Weiß gut wirkte, auf fast schwarzer Fläche zu blass sein kann. Jedes Theme braucht eigene geprüfte Werte.
Wir behandeln Kontrast als gemessene Zahl, nicht als Schätzung. Wenn ihr unsicher seid, ob eure Markenfarben bestehen, startet ein Projekt und wir prüfen sie und finden eine Palette, die markengerecht und lesbar zugleich ist.