Farben und Kontraste — die Marke darf bleiben.

Die Werte.

Zur letzten Zeile: Für deaktivierte Elemente gibt es formal keine Anforderung, aber ein ausgegrauter Knopf, den niemand lesen kann, verwirrt — besonders wenn nicht erkennbar ist, warum er deaktiviert ist.

Richtig messen.

Es gibt Browser-Erweiterungen und Werkzeuge, die das Verhältnis zwischen zwei Farben ausrechnen. Wichtig ist, die tatsächlich dargestellten Farben zu messen, nicht die aus dem Gestaltungsentwurf — Transparenzen, Überlagerungen und Verläufe verändern das Ergebnis.

Besonders bei halbtransparenten Flächen über Bildern ist das Messen schwierig, weil der Hintergrund wechselt. Dann gilt der schlechteste Fall: Wenn der Text über einer hellen Stelle des Bilds nicht lesbar ist, reicht es nicht.

Wo es übersehen wird.

• Platzhaltertexte in Formularfeldern — meist zu hell.
• Fußzeile, oft grau auf dunkelgrau.
• Zweitrangige Knöpfe, etwa helle Umrisse ohne Füllung.
• Beschriftungen in Diagrammen und Legenden.
• Text auf Bildern in Kopfbereichen.
• Fehler- und Erfolgsmeldungen, besonders Grün auf Weiß.
• Zustände beim Darüberfahren und bei Fokus.
• Cookie-Banner, vor allem der zurückhaltend gestaltete Ablehnen-Knopf.

Der letzte Punkt hat eine Doppelbedeutung: Ein absichtlich schwacher Ablehnen-Knopf ist nicht nur ein Kontrastproblem, sondern auch datenschutzrechtlich heikel (Cookie-Banner).

Farbe als einzige Information.

Das zweite große Thema und das, bei dem Werkzeuge nicht helfen — es braucht ein menschliches Urteil. Typische Fälle:

Die vorletzte Zeile ist die häufigste und wird am meisten diskutiert, weil unterstrichene Links als altmodisch gelten. Die Anforderung lässt Spielraum: Links im Fließtext müssen sich erkennbar abheben, Unterstreichung ist nur der einfachste Weg. Reicht die Farbe allein nicht aus, tut es auch Fettung, ein eigener Hintergrund oder eine Unterstreichung, die erst beim Darüberfahren verschwindet.

Die Fokusanzeige.

Die Markierung, die zeigt, wo man beim Tabben gerade ist. Browser bringen eine mit, und erschreckend viele Themes schalten sie ab, weil sie als störend empfunden wird. Das macht eine Website für jeden unbenutzbar, der nicht mit der Maus arbeitet.

Richtig ist: sichtbar lassen und gern eigenständig gestalten — ein deutlicher Rahmen in einer Farbe, die sich vom Hintergrund und vom Element abhebt, mit etwas Abstand zum Element. Zwei Pixel sind zu wenig, wenn sie fast die Farbe des Knopfs haben.

Prüfe die Anzeige auf allen Untergründen: Ein weißer Fokusrahmen ist auf hellem Hintergrund unsichtbar. Üblich ist deshalb ein doppelter Rahmen aus heller und dunkler Linie, der auf beidem funktioniert.

Farbfehlsichtigkeit.

Ein nennenswerter Anteil der Männer kann Rot und Grün schlecht unterscheiden; seltenere Formen betreffen Blau und Gelb oder das Farbsehen insgesamt. Praktisch heißt das: Die Rot-Grün-Kombination für Fehler und Erfolg ist die ungünstigste, die man wählen kann — und sie ist überall im Einsatz.

Das Gegenmittel ist kein Farbverzicht, sondern eine zweite Ebene: ein Symbol, ein Wort, eine andere Form. Zum Prüfen gibt es Werkzeuge, die die Seite simuliert darstellen; ein Graustufenausdruck tut es auch. Was in Graustufen noch verständlich ist, funktioniert fast immer.

Dunkelmodus.

Ein Dunkelmodus hilft manchen Menschen deutlich — bei Lichtempfindlichkeit, Migräne, bestimmten Augenerkrankungen. Er ist nicht verlangt, aber eine sinnvolle Ergänzung, wenn man ihn richtig macht.

Zwei Stolpersteine: Reines Weiß auf reinem Schwarz erzeugt bei manchen ein Flimmern — leicht abgesetzte Töne sind angenehmer. Und die Kontrastwerte gelten im Dunkelmodus genauso, werden dort aber selten geprüft. Ein zweiter Durchgang mit dem Messwerkzeug gehört dazu.

Text auf Bildern.

Text, der Teil eines Bildes ist, lässt sich nicht vergrößern, nicht vorlesen und nicht umbrechen. Die Regel ist deshalb einfach: Wichtige Aussagen gehören als echter Text auf die Seite, nicht ins Bild.

Wo Text über einem Bild liegen soll, braucht es eine verlässliche Grundlage: eine abdunkelnde Fläche über dem Bild, ein Farbfeld hinter dem Text oder ein Bild, das in diesem Bereich bewusst ruhig ist. Verlass dich nicht darauf, dass das gewählte Beispielbild dort dunkel ist — die Redaktion tauscht es irgendwann (Regeln für die Redaktion).

Eine bestehende Marke anpassen.

Die häufigste Sorge: „Dann können wir unser Firmenrot nicht mehr verwenden.“ Fast immer unbegründet. Ein typisches Markenrot hat auf Weiß einen zu geringen Kontrast für kleinen Text — aber es funktioniert als Fläche mit weißer Schrift, für große Überschriften, als Akzent und für grafische Elemente.

Der übliche Weg: Die Markenfarbe bleibt für Flächen und Akzente, für Text auf Weiß kommt eine abgedunkelte Variante derselben Farbe dazu. Das ist meist eine Verschiebung um wenige Prozent Helligkeit und fällt niemandem auf, der nicht beide Fassungen nebeneinander hält.

Ergebnis ist eine erweiterte Farbpalette statt einer neuen Marke: Grundfarbe für Flächen, dunkle Variante für Text, helle Variante für Hintergründe, dazu je ein geprüfter Ton für Erfolg, Warnung und Fehler.

Umsetzen.

1. Alle Farbwerte sammeln, die tatsächlich im Einsatz sind — oft mehr als gedacht.
2. Jede Kombination messen, die als Text vorkommt.
3. Dunkle Varianten ergänzen, wo der Wert nicht reicht.
4. Als zentrale Werte hinterlegen, damit es an einer Stelle änderbar bleibt.
5. Fokusanzeige festlegen und überall prüfen.
6. Durchgang auf reine Farbinformation, von Hand.
7. In Graustufen gegenprüfen.

Schritt vier ist der, der den Unterschied macht: Farben zentral zu hinterlegen heißt, dass die nächste Korrektur zehn Minuten dauert statt zwei Tage.

Wenn du nicht weiterkommst.

Wenn du nicht weißt, ob deine Farben reichen, und niemand die Marke umbauen will. Ich prüfe deine Website, sortiere die Mängel danach, wen sie tatsächlich aussperren, und behebe sie: Website prüfen lassen. Was das grob kostet und wovon es abhängt, steht unter Aufwand und Kosten.

Orientierungswerte, keine Fixpreise — nach einem kurzen Gespräch bekommst du ein Festpreisangebot.

Wer hilft.

Ich bin Manuel Killert, Webentwickler aus Quakenbrück. Ich baue Websites und Shops mit WordPress und repariere, was andere hinterlassen haben. Barrierefreiheit ist dabei kein Zusatzmodul, sondern Handwerk: ordentliches HTML, Beschriftungen, die stimmen, Bedienbarkeit per Tastatur, ausreichende Kontraste und Formulare, die Fehler verständlich melden.

Was ich mache: bestehende Websites prüfen, die Mängel nach Wirkung sortieren, sie beheben und dir zeigen, worauf deine Redaktion künftig achten muss. Was ich nicht mache: Rechtsberatung und Zertifikate. Für eine förmliche Prüfung durch eine Prüfstelle oder eine anwaltliche Einschätzung bist du woanders besser aufgehoben — und ich sage dir das, wenn dein Fall dort hingehört.

Ich arbeite ohne Overlay-Werkzeuge. Die versprechen eine schnelle Lösung und liefern sie nicht; warum, steht ausführlich auf einer eigenen Seite.