Website-Farben prüfen: Kontraste und Zustände statt nur einer Palette

Eine Farbtafel zeigt zunächst nur, welche Töne zum Auftritt gehören. Auf der Website entstehen daraus Paare: Text auf Fläche, Link im Absatz, Kontur neben Hintergrund, Symbol auf Button. Erst diese Beziehungen entscheiden, was Besucher erkennen. Lassen Sie deshalb typische Anwendungen zeigen, bevor die Palette als fertig betrachtet wird.

Beginnen Sie mit Lesetext, Überschrift, Link, Hauptaktion, Eingabefeld und Fehlermeldung. Notieren Sie jeweils die Farbe des sichtbaren Bestandteils und seines tatsächlichen Umfelds. Ein transparenter Textton auf einem Foto ist kein festes Zweierpaar. Der sichtbare Hintergrund kann sich mit Ausschnitt, Bildschirmgröße und Bildmotiv verändern.

Benennen Sie anschließend Rollen: Lesetext, ruhiger Hinweis, Akzent und funktionale Fehlermeldung. Dieselbe Farbe darf verschiedene Aufgaben übernehmen, wenn die Anwendung verständlich bleibt. Eine Farbe wird aber nicht allein deshalb passend, weil sie bereits auf dem Logo vorkommt. Für die gemeinsamen Regeln lohnt der Beitrag zum Designsystem.

Diese Vorbereitung schützt auch den eigenen gestalterischen Spielraum. Statt einen schönen Ton pauschal zu verbieten, kann seine geeignete Verwendung festgelegt werden. Vielleicht eignet er sich für Flächen, Illustrationen oder kleine Markierungen, während dunkler Text die Lesearbeit übernimmt. Die Entscheidung betrifft die Funktion, nicht nur Geschmack.

Das WCAG-Kriterium Non-text Contrast behandelt visuelle Informationen, die zum Erkennen von Bedienelementen und Zuständen sowie zum Verständnis wesentlicher Grafikbestandteile nötig sind. Dafür beschreibt es mindestens 3:1 gegenüber angrenzenden Farben mit den genannten Ausnahmen. Diese Regel ist kein pauschales Verhältnis für jedes dekorative Kästchen.

Prüfen Sie am konkreten Element, woran seine Funktion erkannt wird. Bei einem Eingabefeld kann die Kontur oder eine andere erkennbare Form wichtig sein. Bei einem Diagramm kann eine Linie Daten tragen. Ist eine Trennlinie dagegen rein dekorativ, hat sie eine andere Aufgabe. Ohne diese Unterscheidung führt ein automatisches Einfärben aller Linien eher zu Unruhe als zu besserer Bedienung.

Für den Hauptbutton betrachten Sie mindestens Beschriftung, Form und Umgebung. Ein ausreichend lesbarer Text kann auf einer Fläche stehen, deren Abgrenzung noch unklar ist. Umgekehrt macht eine kräftige Kontur eine schwache Beschriftung nicht lesbarer. Beurteilen Sie beide Eigenschaften, statt einen einzigen Wert auf den gesamten Button zu übertragen.

Bei komplexeren Grafiken helfen direkte Beschriftungen und eine kurze Erklärung. Ein schöner Farbverlauf trägt noch keine verständliche Datenaussage. Wenn eine Grafik nur mit einer langen Legende aus ähnlichen Farbtönen lesbar wäre, prüfen Sie eine andere Darstellung. Der Kerninhalt soll erkennbar bleiben, auch wenn die dekorative Farbigkeit nicht wahrgenommen wird.

Das Kriterium Use of Color untersagt Farbe als einziges visuelles Mittel für Information, Handlungsaufforderung oder Unterscheidung. Ein Status mit dem Wort „abgeschlossen“ ist verständlicher als ein bloßer grüner Punkt. Eine Linie kann zusätzlich ein Muster oder eine direkte Beschriftung erhalten.

Prüfen Sie Links im Fließtext besonders sorgfältig. Wenn sie nur durch einen kaum unterscheidbaren Farbton hervortreten, können sie übersehen werden. Eine erkennbare Unterstreichung ist ein möglicher Ansatz. Welche konkrete Kombination geeignet ist, wird am vorhandenen Text und den vorgesehenen Zuständen geprüft. Nicht jeder Link muss dieselbe dekorative Form wie ein Hauptbutton erhalten.

Außerdem können Menschen eigene Farbmodi verwenden. Die MDN-Dokumentation zu forced-colors beschreibt einen Modus mit einer vom Nutzer gewählten begrenzten Palette. Der Browser kann dabei Farben überschreiben. Prüfen Sie, ob wichtige Konturen, Fokus und Statusinformationen weiterhin erkennbar sind, statt zwingend die Markenfarben zu erzwingen.

Eine Graustufenansicht kann beim Gegenlesen Hinweise auf reine Farbunterscheidungen geben. Sie simuliert jedoch weder jede Sehbeeinträchtigung noch ersetzt sie die Prüfung mit passenden Hilfsmitteln und Kriterien. Nutzen Sie solche Ansichten als zusätzliche Fragehilfe. Ein unauffälliger Eindruck ist kein vollständiger Konformitätsnachweis.

Ruhrstack beschreibt auf der Design-Leistungsseite die Auswahl von Farben nach ihrer gestalterischen und funktionalen Rolle sowie die Prüfung von Kontrasten und Zuständen. Das bietet eine konkrete Grundlage für ein Projekt: Welche Töne prägen den Auftritt und welche Kombinationen tragen Lesen und Bedienung?

Der Vorteil persönlicher Abstimmung zeigt sich an solchen Entscheidungen. Eine Lieblingsfarbe kann als charakteristischer Akzent erhalten bleiben, auch wenn sie nicht für jeden kleinen Text geeignet ist. Ein vorhandenes Logo kann bestehen bleiben, während Formulare und Links besser erkennbare Kombinationen bekommen. Die Gestaltung wird damit an den Anwendungen weiterentwickelt.

Bringen Sie vorhandene Markenwerte und einige echte Inhalte mit. Besonders hilfreich sind ein Absatz mit Links, eine typische Aktion und ein Formularzustand. Für Schriftgrößen und Lesbarkeit ergänzt der Beitrag zu Website-Schriften die Farbbeurteilung. Beide Aspekte werden im tatsächlichen Layout zusammen betrachtet.

Am Ende sollte keine pauschale Aussage „Palette barrierefrei“ stehen. Sinnvoll ist eine nachvollziehbare Freigabe bestimmter Kombinationen und Zustände innerhalb des vereinbarten Prüfumfangs. Sie gibt der weiteren Gestaltung verlässliche Orientierung und benennt zugleich, wann neue Anwendungen erneut geprüft werden müssen.