Eine Markenfarbe kann auf der Visitenkarte stark wirken und auf der Website trotzdem baden gehen. Gold auf Weiß sieht vielleicht edel aus, helles Grau wirkt angenehm zurückhaltend – bis Texte, Buttons oder Formularfelder kaum noch zu erkennen sind. Dann wird aus feinem Design schnell Nebel auf der Brücke.

Barrierefreie Markenfarben bedeuten nicht, dass eine Corporate Identity plötzlich nur noch aus Schwarz und Weiß bestehen darf. Es geht darum, die Farbwelt so zu ergänzen, dass Menschen Inhalte zuverlässig lesen und Bedienelemente eindeutig erkennen können. Eine gute Marke bleibt dabei unverwechselbar – sie bekommt lediglich eine seetüchtige digitale Ausrüstung.

Markenfarbe und Funktionsfarbe sind nicht dasselbe

Viele Corporate Designs starten mit zwei oder drei Hauptfarben. Für Logo, Briefpapier und Fahrzeugbeschriftung kann das reichen. Eine Website benötigt jedoch zusätzliche Rollen: Fließtext, Überschriften, Links, Buttons, Hintergründe, Hinweise, Formularfelder sowie unterschiedliche Zustände beim Anklicken oder Bedienen.

Darum sollte ein digitales Farbsystem nicht nur festlegen, welche Farben zur Marke gehören, sondern auch, wofür sie eingesetzt werden. Neben der bekannten Hauptfarbe braucht es häufig eine dunklere Textvariante, helle Hintergrundtöne, eine gut erkennbare Akzentfarbe und passende Kombinationen für positive Meldungen, Warnungen und Fehler.

Bei unserem Grafikdesign denken wir diese Anwendungen von Anfang an mit. So entsteht kein hübscher Farbfächer, der beim ersten Onlineformular Schiffbruch erleidet.

Welche Kontraste empfiehlt WCAG 2.2?

Die Web Content Accessibility Guidelines, kurz WCAG, liefern international anerkannte Kriterien für zugängliche digitale Inhalte. Für die Konformitätsstufe AA nennt die W3C-Erläuterung zum Textkontrast klare Mindestwerte:

• Normal großer Text: mindestens 4,5:1 zwischen Schrift und Hintergrund
• Großer Text: mindestens 3:1
• Bestandteile von Logos und Markennamen: für dieses konkrete Kriterium ausgenommen

Die Logo-Ausnahme ist wichtig, aber kein Freibrief für die gesamte Website. Nur weil das Logo in einem hellen Gold gestaltet ist, muss nicht auch jeder Absatz, Menüpunkt und Button in derselben schwachen Kombination erscheinen.

Auch Buttons und wichtige Symbole brauchen Sichtbarkeit

Bei Bedienelementen und bedeutungstragenden Grafiken zählt nicht nur der Text. Das WCAG-Kriterium zum Nicht-Text-Kontrast sieht für erforderliche visuelle Informationen grundsätzlich mindestens 3:1 gegenüber angrenzenden Farben vor. Das betrifft beispielsweise sichtbare Schalter, Eingabefelder, Fokusmarkierungen oder Symbole, deren Form und Zustand verstanden werden müssen.

Wichtig: Ein bestandener Kontrasttest allein macht eine Website noch nicht vollständig barrierefrei. Er ist ein wesentlicher Baustein, ersetzt aber weder verständliche Inhalte noch Tastaturbedienbarkeit, saubere Überschriften oder Alternativtexte.

Die Marke bleibt an Bord

Wenn eine Farbkombination zu wenig Kontrast bietet, muss nicht gleich die komplette CI über die Planke. Meist reichen gezielte Ergänzungen.

Dunkle und helle Varianten definieren

Aus einer hellen Markenfarbe kann eine dunklere Variante für Text und Buttons abgeleitet werden. Die ursprüngliche Farbe bleibt beispielsweise für große Flächen, Linien oder dekorative Elemente erhalten. Für dunkle Hintergründe wird zusätzlich eine helle Gegenvariante festgelegt.

Farbe nicht als einziges Signal verwenden

Ein Fehler im Formular sollte nicht bloß durch eine rote Umrandung erkennbar sein. Eine verständliche Meldung und gegebenenfalls ein Symbol helfen Menschen, die Farben anders wahrnehmen oder den Unterschied auf einem Display schlecht erkennen. Dasselbe gilt für Diagramme, Links und Statusanzeigen.

Button-Zustände gleich mitplanen

Ein Button hat mehr als einen Zustand: normal, beim Darüberfahren mit der Maus, beim Fokussieren über die Tastatur, beim Anklicken und gegebenenfalls deaktiviert. Jede Variante sollte erkennbar bleiben. Wer diese Zustände erst am Ende improvisiert, holt sich unnötigen Wellengang ins Design.

Beim professionellen Webdesign verbinden wir deshalb Markenwirkung, Benutzerführung und technische Umsetzung. Die Farben werden nicht nur als Hex-Codes übergeben, sondern in ihren konkreten Anwendungen geprüft.

Warum der Bildschirm die Karten neu mischt

Farben wirken je nach Display, Helligkeit, Blickwinkel und Umgebung unterschiedlich. Was am großen Büromonitor deutlich aussieht, kann am Smartphone in der Sonne fast verschwinden. Auch dünne Schriftstärken oder Text direkt auf einem unruhigen Foto verschlechtern die Lesbarkeit.

Deshalb gehören echte Seitensituationen auf den Prüfstand: der Button im Hero-Bild, die kleine Preisangabe, das Kontaktformular, die Navigation am Smartphone und die Fehlermeldung nach einer falschen Eingabe. Ein Farbwert kann rechnerisch passen und in der konkreten Gestaltung trotzdem keine gute Lösung sein.

Kurskarte für barrierefreie Markenfarben

• Haupt-, Text-, Hintergrund- und Akzentfarben mit klaren Rollen definieren
• Textkombinationen gegen den jeweiligen Hintergrund prüfen
• Buttons, Links, Formularfelder und Fokuszustände kontrollieren
• Informationen nie ausschließlich über Farbe vermitteln
• Desktop und Smartphone unter realistischen Bedingungen testen
• Freigegebene Kombinationen in einem kompakten Styleguide dokumentieren

So weiß später jedes Teammitglied, welche Kombinationen sicher funktionieren. Das spart Rückfragen und verhindert, dass Social-Media-Grafiken, Landingpages und Präsentationen optisch in unterschiedliche Häfen abdriften.

Deine Farbwelt braucht einen klaren Kurs?

Du bist dir nicht sicher, ob deine Markenfarben auf Website, Social Media und digitalen Formularen gut lesbar eingesetzt werden? Die Netzwerkkapitäne prüfen deine bestehende Farbwelt, entwickeln passende Funktionsfarben und halten die Anwendungen übersichtlich fest – ohne deiner Marke den Charakter zu nehmen.

Komm mit deiner CI bei uns an Bord und lass uns gemeinsam den digitalen Farbkompass einstellen.