Barrierefreie Designfarben: Übergabe an die Entwicklung

Eine Farbpalette mit grünen Häkchen garantiert noch keine lesbare Oberfläche. Entscheidend ist, welche Farben tatsächlich nebeneinander verwendet werden und welchen Zustand sie darstellen. Für die Übergabe an die Entwicklung braucht es deshalb konkrete Farbpaare und Beispiele. So lässt sich im Browser prüfen, ob Gestaltung und Umsetzung dieselbe Information vermitteln.

Farbwerte mit einer Verwendung verbinden

Eine Liste aus Hexwerten beschreibt Farben, aber noch keine Oberfläche. Ergänzen Sie zu jedem vorgesehenen Einsatz Vordergrund, Hintergrund und Funktion. „Primärblau“ kann auf weißem Hintergrund als Text verwendet werden, als Fläche aber eine andere Textfarbe benötigen. Beide Kombinationen werden getrennt dokumentiert.

Benennen Sie Rollen verständlich: Fließtext, ergänzender Hinweis, Link, Fehlermeldung oder ausgewählter Zustand. Eine Rolle erklärt der Entwicklung, wofür die Kombination vorgesehen ist. Verwenden Sie nicht nur Farbnamen, wenn sich die Farbe später ändern könnte. Die Bedeutung „Fehlertext“ bleibt verständlich, auch wenn der konkrete Rotton angepasst wird.

Diese Arbeitsweise ist eine praktische Übergabehilfe. Sie ist kein vollständiger Konformitätsnachweis. Barrierefreiheit umfasst weitere Anforderungen an Struktur, Bedienung und technische Ausgabe. Eine geprüfte Farbpalette kann diese Prüfungen unterstützen, aber nicht ersetzen.

Eine Farbmatrix für reale Zustände erstellen

Nehmen Sie nur Zustände auf, die das konkrete Element tatsächlich besitzt. Eine pauschale Liste von Varianten kann sonst dazu führen, dass die Entwicklung Zustände gestaltet, deren Verhalten unklar ist. Umgekehrt sollte ein vorhandener Fehlerzustand nicht fehlen, nur weil der erste Entwurf ausschließlich die erfolgreiche Eingabe zeigt.

Halten Sie bei jeder Kombination fest, wo sie verwendet werden darf. Ein Farbwert, der für große dekorative Flächen vorgesehen ist, wird dadurch nicht automatisch zur geeigneten Farbe für kleine Beschriftungen. Die konkrete Darstellung muss geprüft werden.

Information darf nicht von der Farbe allein abhängen

WCAG 2.2, Erfolgskriterium 1.4.1, behandelt Farbe als Informationsmittel. Eine Bedeutung soll nicht ausschließlich durch Farbe vermittelt werden. Ergänzen Sie deshalb bei Statusanzeigen einen verständlichen Text oder eine andere geeignete sichtbare Unterscheidung. „Gespeichert“ erklärt den Zustand, den ein grüner Punkt allein offenlässt.

Prüfen Sie, ob die Ergänzung tatsächlich dieselbe Information trägt. Ein beliebiges Symbol kann mehrdeutig sein. Auch ein Text, der nur für Hilfstechnologien vorhanden ist, ersetzt nicht automatisch die sichtbare Erklärung für Menschen, die Farben unterschiedlich wahrnehmen. Die Darstellung muss für den jeweiligen Zweck verständlich bleiben.

Der Beitrag über Farbe und Information auf Webseiten vertieft diese Anforderung. Die Übergabe an die Entwicklung sollte den dort beschriebenen Informationssatz direkt am jeweiligen Element festhalten.

Die Umsetzung an einer konkreten Aufgabe abnehmen

Prüfen Sie die tatsächlich gerenderte Seite. Transparenz, Bilder im Hintergrund oder überlagernde Flächen können die Wirkung verändern. Ein im Entwurf gemessener Farbwert beweist nicht, dass der Browser dieselbe Kombination ausgibt. Vergleichen Sie deshalb das konkrete Element an der Stelle, an der es genutzt wird.

Testen Sie auch eine schmale Ansicht. Eine längere Fehlermeldung kann umbrechen und plötzlich vor einer anderen Fläche stehen. Eine Statusbeschriftung kann abgeschnitten werden, obwohl die Farben unverändert sind. Verständlichkeit und Layout gehören deshalb zur Abnahme derselben Aufgabe.

Eine Graustufenansicht kann problematische Stellen sichtbar machen. Sie ist eine Suchhilfe und kein vollständiger Nachweis. Entscheidend bleibt, ob Information und Handlung auch ohne die alleinige Unterscheidung bestimmter Farben verständlich sind.

Praxisbeispiel: Eine neue Fehlermeldung im Kontaktformular

Ein fiktives Team gestaltet ein Kontaktformular. Im Entwurf wird ein fehlerhaftes Feld nur rot umrandet. In der Übergabe ergänzt das Team die konkrete Fehlermeldung, ihre Zuordnung zum Feld und das vorgesehene Farbpaar. Die Entwicklung baut anschließend den tatsächlichen Fehlerzustand, statt nur den roten Rahmen aus dem Bild zu übernehmen.

Bei der Browserprüfung wird eine unvollständige Eingabe abgesendet. Die prüfende Person liest die Meldung, findet das zugehörige Feld und korrigiert die Eingabe. Danach wird auch die Bestätigung betrachtet. Die Abnahme bewertet damit den vollständigen Ablauf und nicht nur einen Screenshot des Fehlers.

Barriereradar kann automatisierte Befunde zu einer Website ergänzen. Die Bedeutung einer selbst gestalteten Statusanzeige und die Verständlichkeit des Arbeitsablaufs müssen trotzdem am konkreten Element geprüft werden. Halten Sie die Ergebnisse mit Seitenadresse, Zustand und beobachteter Abweichung fest.

Wenn ein Farbwert später geändert wird, dient die Matrix als Liste der betroffenen Verwendungen. Prüfen Sie diese Kombinationen erneut. Eine neue Markenfarbe ist keine Garantie, dass sämtliche bestehenden Texte, Schaltflächen und Hinweise weiterhin passen.

Häufige Fragen

Reicht eine geprüfte Farbpalette für Barrierefreiheit?

Nein. Geprüft werden müssen konkrete Verwendungen und Zustände; weitere Anforderungen an Struktur und Bedienung bleiben bestehen.

Was gehört in die Übergabe an die Entwicklung?

Rolle, Vordergrund, Hintergrund, Bedeutung und die tatsächlich benötigten Zustände. Ein konkretes Beispiel verbindet diese Angaben.

Ist eine Graustufenansicht ein Nachweis?

Nein. Sie hilft beim Finden möglicher Probleme, ersetzt aber die Prüfung der jeweiligen Anforderungen nicht.

Das Wichtigste in Kürze

Dieser Beitrag ersetzt keine Rechtsberatung. Eine automatisierte Erstprüfung ersetzt nicht den vollständigen BITV-/WCAG-Test – maßgeblich sind BFSG, BFSG-Verordnung und die harmonisierte Norm EN 301 549 in ihrer aktuellen Fassung.