Markenfarben mit ausreichendem Kontrast wählen, ohne die Marke zu verwässern
Welche Kontrastwerte WCAG 2.1 AA für Text und Bedienelemente verlangt, wie Sie Markenfarben prüfen und abstufen, ohne an Wiedererkennung zu verlieren.
- Nº
- 32
- Veröffentlicht
- Lesezeit
- 10 Min.
- Kategorie
- Notes
- Geschrieben von
- Revylio
Markenfarben mit ausreichendem Kontrast: die Kurzantwort
Markenfarben mit ausreichendem Kontrast wählen heißt: Jede Kombination aus Schrift und Hintergrund erreicht mindestens 4,5:1, große Schrift mindestens 3:1. Bedienelemente und aussagekräftige Grafiken heben sich mit mindestens 3:1 von angrenzenden Farben ab. Das verlangen die WCAG 2.1 auf Stufe AA. Ihre Markenfarbe bleibt erhalten, Sie ergänzen nur Abstufungen und feste Farbrollen.
Das Kontrastverhältnis ist das Verhältnis der relativen Leuchtdichte zweier Farben, berechnet als (L1 + 0,05) / (L2 + 0,05). L1 steht für die hellere Farbe, L2 für die dunklere. Die relative Leuchtdichte ist die relative Helligkeit einer Farbe, normiert auf 0 für tiefstes Schwarz und 1 für hellstes Weiß. Die Werte reichen deshalb von 1:1 bis 21:1.
Wichtig für die Markenarbeit: Die Formel misst nur Helligkeit. Ein kräftiges Rot neben einem kräftigen Grün wirkt sehr unterschiedlich, kann aber fast gleich hell sein und damit durchfallen. Ein Farbton allein trägt also keinen Kontrast.
Ihr Logo müssen Sie für diese Anforderungen nicht ändern. Text, der Teil eines Logos oder Markennamens ist, hat laut W3C keine Kontrastanforderung. Alles andere auf der Website, von Überschriften bis zu Formularrahmen, muss die Werte erreichen. Dieser Leitfaden zeigt die Werte, den Prüfweg, ein Rechenbeispiel mit echten Farbwerten und eine Checkliste.
WCAG 2.1 AA verlangt 4,5:1 für Text und 3:1 für große Schrift
Text und Bilder von Text brauchen nach dem Erfolgskriterium 1.4.3 ein Kontrastverhältnis von mindestens 4,5:1. Das steht in der W3C-Erläuterung zu Kontrast (Minimum). Für große Schrift genügt 3:1.
Was als große Schrift gilt
Große Schrift beginnt bei 18 Punkt oder bei 14 Punkt in Fettschrift. Ein Punkt entspricht 1,333 CSS-Pixeln. Damit liegen die Grenzen bei etwa 24 Pixeln für normale und etwa 18,5 Pixeln für fette Schrift. Ein Fließtext in 16 Pixeln braucht also immer 4,5:1, auch wenn er fett gesetzt ist.
Warum gerade 4,5:1
Der Wert 3:1 ist das Minimum, das ISO 9241-3 und ANSI-HFES-100-1988 für normale Sicht empfehlen. Die WCAG setzen für Stufe AA höher an.
Der Wert 4,5:1 gleicht den Verlust an Kontrastempfindlichkeit aus, den Menschen mit einer Sehschärfe von etwa 20/40 erleben. Diese Sehschärfe gilt als typisch für Menschen im Alter von etwa 80 Jahren. Wer ältere Kundschaft hat, schreibt also für genau diese Lesergruppe.
Welcher Text mitzählt
Die Anforderung gilt für jeden Text auf der Seite. Dazu gehören ausdrücklich Platzhaltertexte in Formularfeldern sowie Texte, die beim Überfahren mit der Maus oder bei Tastaturfokus erscheinen. Hellgraue Platzhalter in Eingabefeldern fallen deshalb häufig durch. Die strengere Stufe AAA verlangt 7:1, ist für die Konformität nach AA aber nicht nötig.
Bedienelemente und Grafiken brauchen 3:1 zur angrenzenden Farbe
Bedienelemente und grafische Objekte müssen nach dem Erfolgskriterium 1.4.11 einen Kontrast von mindestens 3:1 zu angrenzenden Farben haben. Das Kriterium gehört zu Stufe AA. Es soll sicherstellen, dass Menschen mit mäßig eingeschränkter Sicht Steuerelemente und aussagekräftige Grafiken erkennen.
Was angrenzende Farben sind
Angrenzende Farben sind die Farben direkt neben einem Element. Ein Beispiel aus der W3C-Erläuterung zum Nicht-Text-Kontrast: Ein Eingabefeld mit weißer Innenfläche auf weißem Seitenhintergrund wird nur durch seinen Rahmen erkennbar. Dann muss dieser Rahmen 3:1 zum Weiß erreichen. Ein grauer Checkbox-Rahmen in #9D9D9D schafft auf Weiß nur 2,7:1 und fällt durch.
Was ein grafisches Objekt ist
Ein grafisches Objekt ist ein eigenständiges Symbol, etwa ein Druck-Symbol ohne Text. Bei komplexen Diagrammen zählen die wichtigen Teile, zum Beispiel jede Linie in einem Liniendiagramm.
Fokusanzeige nicht vergessen
Ein Bedienelement braucht keinen sichtbaren Rahmen, wenn sein sichtbarer Inhalt es bereits kennzeichnet. Eine ausreichend kontrastreiche Fokusanzeige braucht es trotzdem. Eine graue Fokuslinie in #AAA erreicht auf Weiß nur 2,3:1 und reicht nicht. Die unveränderte Standard-Fokusanzeige des Browsers ist von der Kontrastpflicht ausgenommen, muss aber sichtbar bleiben. Wer sie im Design überschreibt, übernimmt die Pflicht.
Die Regel betrifft auch eingebettete Medien. Wer Videos auf der Website zeigt, prüft die Steuerelemente des Players mit. Wie Sie Videos sonst sauber einbinden, beschreibt unser Beitrag Videos einbinden, ohne die Website auszubremsen.
Ausnahmen: Logo, deaktivierte Elemente, Hover-Effekte und wesentliche Grafiken
Das Logo ist die wichtigste Ausnahme für die Markenarbeit. Logos sind von den Kontrastanforderungen ausgenommen, weil sie strengeren Vorgaben aus Corporate Identity und Markenrichtlinien folgen. Das gilt nicht, wenn eine kontrastarme Darstellung des Logos eine bewusste Gestaltungsentscheidung auf der Website ist.
Markenrichtlinien sind keine Ausnahme
Das W3C stellt klar: Jenseits von Logos und Schriftzügen ist Text mit zu geringem Kontrast nicht deshalb ausgenommen, weil die Markenrichtlinie die Farbe vorschreibt. Eine hellgraue Hausschrift für Fließtext bleibt ein Verstoß, auch wenn das Markenhandbuch sie verlangt. Die Richtlinie muss sich anpassen, nicht die Anforderung.
Weitere Ausnahmen
Diese Fälle müssen die Kontrastwerte nicht erreichen:
- Deaktivierte Bedienelemente, also sichtbare, aber gerade nicht bedienbare Elemente, etwa ein deaktiviertes HTML-Formularelement.
- Zusätzliche Hover-Effekte, die Sie als Gestalter ergänzen; sie gelten als ergänzend.
- Grafiken, deren Darstellung wesentlich ist, etwa Flaggen, Fotos realer Szenen und Heatmaps.
- Reine Dekoration, die nur ästhetisch wirkt, keine Information trägt und keine Funktion hat.
Infografiken sind dagegen ein häufiger Problemfall. Das W3C nennt sie ausdrücklich als Grafiken, die oft mehrere AA-Kriterien verfehlen, darunter Kontrast (Minimum) und die Verwendung von Farbe. Wer Diagramme in Markenfarben baut, prüft jede Linie und jede Beschriftung einzeln.
Markenfarben prüfen: Farbpaare messen, nicht Einzelfarben
Eine einzelne Farbe hat keinen Kontrast; erst ein Paar aus Vordergrund und Hintergrund ergibt einen Wert. Prüfen Sie deshalb jede Kombination, die auf der Website tatsächlich vorkommt. Ein Violett kann auf Weiß bestehen und auf Dunkelgrau durchfallen.
So gehen Sie vor
- Listen Sie alle Markenfarben mit ihrem Hex-Wert auf, also dem sechsstelligen Farbcode wie #6221EA.
- Notieren Sie für jede Farbe, wo sie vorkommt: als Schrift, als Fläche, als Rahmen oder als Symbol.
- Bilden Sie für jede Verwendung das Paar mit der direkt angrenzenden Farbe.
- Berechnen Sie das Verhältnis mit einem Kontrastprüfwerkzeug, das die WCAG-Formel nutzt.
- Vergleichen Sie mit dem Zielwert: 4,5:1, 3:1 für große Schrift, 3:1 für Bedienelemente.
Zwei Fehler, die Prüfungen oft übersehen
Erstens wird nicht gerundet. Ein Wert von 4,499:1 erfüllt 4,5:1 nicht, und 2,999:1 erfüllt 3:1 nicht. Zweitens muss im Code zu jeder Schriftfarbe auch die Hintergrundfarbe festgelegt sein und umgekehrt. Das W3C führt das Fehlen als dokumentierten Fehler F24. Sonst kann eine Browsereinstellung des Nutzers eine Ihrer Farben ersetzen und das Paar zerstören.
Bei Svennis legen wir vor dem Design eine Tabelle aller zugelassenen Farbpaare an und prüfen jedes Paar im Normalzustand, bei Fokus und als Platzhalter. Am häufigsten scheitern dabei nicht die Hauptfarben, sondern hellgraue Formularrahmen und Platzhaltertexte, die im Markenhandbuch gar nicht vorkommen.
Rechenbeispiel: eine Markenpalette mit Violett, Gelb und Grau prüfen
Das Rechenbeispiel zeigt eine typische Palette mit Hauptfarbe, Akzentfarbe und Neutralton. Alle Werte stammen aus den Beispielen des W3C. Nehmen Sie an, Ihre Marke nutzt Violett #6221EA als Hauptfarbe, Gelb #FFF000 als Akzent und mehrere Grautöne für Rahmen und Fokus.
| Farbpaar | Kontrast | Fließtext (4,5:1) | Bedienelement (3:1) |
|---|---|---|---|
| Gelb #FFF000 auf Weiß | 1,2:1 | nein | nein |
| Grau #CCC auf Weiß | 1,6:1 | nein | nein |
| Grau #AAA auf Weiß | 2,3:1 | nein | nein |
| Grau #9D9D9D auf Weiß | 2,7:1 | nein | nein |
| Weiß auf Grau #6E747B | 4,7:1 | ja | ja |
| Hellgrau #E5E5E5 auf Violett #6221EA | 5,6:1 | ja | ja |
| Schwarz auf Grau #DEDEDE | 15:1 | ja | ja |
Das Ergebnis ist eindeutig. Das Violett trägt helle Schrift problemlos und eignet sich für Schaltflächen. Das Gelb versagt auf Weiß in jeder Rolle, ob als Schrift, Rahmen oder Symbol. Die drei hellen Grautöne reichen nicht einmal für einen Formularrahmen.
Das dunklere Grau #6E747B löst das Rahmenproblem. Das Kontrastverhältnis ist symmetrisch, ein Rahmen in #6E747B auf Weiß erreicht also ebenfalls 4,7:1. Damit genügt dieser Ton sogar für Fließtext. Ersetzen Sie #9D9D9D, #AAA und #CCC in allen Rahmen, Fokuslinien und Platzhaltern durch #6E747B, ist der größte Teil der Palette schon konform.
Quelle: w3.org
Palette abstufen: Markenfarbe behalten, Rollen und Tonwerte ergänzen
Eine Palette lässt sich konform machen, ohne die Markenfarbe zu ersetzen. Wiedererkennung entsteht über Farbton und Fläche, Kontrast dagegen über Helligkeit. Diese Trennung ist der Hebel: Sie behalten den Farbton und verändern nur, wo und in welcher Helligkeit er auftritt.
Rollen statt freier Verwendung
Legen Sie für jede Markenfarbe fest, wofür sie verwendet werden darf. Im Rechenbeispiel ergibt das eine klare Zuordnung:
- Violett #6221EA: Schaltflächen und Flächen mit heller Schrift in #E5E5E5 oder Weiß.
- Gelb #FFF000: nur als Fläche oder Akzent, nie als Schrift, Rahmen oder Symbol auf Weiß.
- Grau #6E747B: Rahmen, Fokuslinien, Platzhalter und Nebentexte auf Weiß.
- Hellgrau #DEDEDE: Hover-Hintergrund mit schwarzem Rahmen oder schwarzer Schrift.
Hellere und dunklere Abstufungen ergänzen
Fehlt einer Markenfarbe der nötige Kontrast, ergänzen Sie eine dunklere oder hellere Stufe desselben Farbtons. Die Originalfarbe bleibt für große Flächen und Akzente reserviert. Die Abstufung übernimmt Schrift und Rahmen. Für jede neue Stufe messen Sie das Paar erneut, denn jede Helligkeitsänderung verschiebt den Wert.
Akzentfarben sparsam einsetzen
Eine kräftige Akzentfarbe wirkt am stärksten in kleinen Mengen auf ruhigen Flächen. Ein gelber Balken neben einer violetten Schaltfläche bleibt als Markenzeichen sichtbar. Die Information selbst tragen dabei Schrift und Rahmen mit geprüftem Kontrast. So bleibt die Marke erkennbar, und kein Inhalt hängt an einer Farbe, die zu hell ist.
Halten Sie das Ergebnis im Markenhandbuch fest: jede Farbe mit Hex-Wert, ihren erlaubten Rollen und den geprüften Paaren mit Kontrastwert.
Checkliste: welcher Kontrastwert für welches Element gilt
Die Checkliste fasst die Anforderungen aus WCAG 2.1 AA nach Element zusammen. Nutzen Sie sie bei der Prüfung jeder Seitenvorlage, nicht nur der Startseite.
| Element | Mindestwert | Worauf Sie achten |
|---|---|---|
| Fließtext unter 24 px (fett unter 18,5 px) | 4,5:1 | Auch Platzhalter, Hover- und Fokustexte |
| Große Schrift ab 24 px oder fett ab 18,5 px | 3:1 | Gilt auch für Bilder von großem Text |
| Rahmen von Formularfeldern und Checkboxen | 3:1 | Gegen die angrenzende Seitenfarbe messen |
| Zustandsanzeigen wie Häkchen, gewählte Optionen und aktive Tabs | 3:1 | Gegen die angrenzende Farbe im jeweiligen Zustand messen |
| Eigene Fokusanzeige | 3:1 | Gegen den angrenzenden Hintergrund |
| Symbole ohne Text, Diagrammlinien | 3:1 | Jede Linie einzeln prüfen |
| Logo und Schriftzug der Marke | keine Anforderung | Nur das Logo, nicht die Hausschrift |
| Deaktivierte Bedienelemente | keine Anforderung | Nur wenn wirklich nicht bedienbar |
| Zusätzliche Hover-Effekte | keine Anforderung | Der Grundzustand muss bestehen |
Zwei Regeln gelten für jede Zeile. Gerundet wird nie, 4,499:1 ist kein Bestehen. Und zu jeder Schriftfarbe gehört im Code eine festgelegte Hintergrundfarbe. Erst mit der Zeile für Zustandsanzeigen deckt die Tabelle die Kontrastanforderungen nach AA ab. Arbeiten Sie sie für alle Vorlagen ab.
Zum Farbteil der Prüfung gehört außerdem das Erfolgskriterium 1.4.1: Farbe darf nicht das einzige Mittel sein, eine Information zu vermitteln.
Was Farbkontrast für Unternehmen in Deutschland bedeutet
Für Unternehmen in Deutschland ist Farbkontrast der am leichtesten messbare Teil der Barrierefreiheit. Jedes Farbpaar ergibt einen Zahlenwert, der über oder unter der Schwelle liegt. Ein Prüfer braucht dafür keine Einschätzung, nur den Hex-Wert. Kontrastfehler sind deshalb schnell gefunden und schwer zu bestreiten.
Wer seine Website als Schritt zur Konformität mit dem European Accessibility Act nach WCAG 2.1 AA ausrichtet, kommt am Kontrast nicht vorbei. Welche Unternehmen das BFSG betrifft und wie die Gesamtprüfung abläuft, behandelt unser Beitrag „BFSG: Barrierefreiheit der Firmenwebsite prüfen und nach WCAG 2.1 AA umsetzen“. Dieser Leitfaden beschränkt sich bewusst auf die Farben.
Drei Punkte sind für die Praxis entscheidend:
- Das Markenhandbuch schützt nicht. Das W3C nimmt nur Logos und Schriftzüge aus, nicht die Hausfarben im Fließtext.
- Das Ergebnis gehört in die Informationen zur Barrierefreiheit, die das BFSG verlangt. Bekannte Kontrastmängel sind dort kein Ersatz für die Behebung: Für Dienstleistungen im Anwendungsbereich des BFSG müssen Sie Mängel beheben und unverzüglich die Marktüberwachungsbehörde informieren. Das gilt auch für die Behörden der anderen EU-Staaten, in denen Sie die Dienstleistung anbieten.
- Die Zielgruppe ist größer, als oft angenommen. Der Wert 4,5:1 orientiert sich an der Sehschärfe, die um das 80. Lebensjahr typisch ist.
Wie Sie die Erklärung formulieren, zeigt unser Beitrag „Barrierefreiheitserklärung nach BFSG richtig verfassen und mit der Website abgleichen“. Eine Palette mit geprüften Farbpaaren macht diese Erklärung kürzer und belastbarer.
Nächste Schritte: Palette prüfen, Rollen festlegen, im Relaunch umsetzen
Der erste Schritt ist eine vollständige Liste Ihrer Farbpaare, nicht ein neues Farbschema. Mit dieser Liste sehen Sie in kurzer Zeit, welche Markenfarben bestehen und welche nur eine Abstufung brauchen.
- Sammeln Sie alle Hex-Werte aus Markenhandbuch und Stylesheet, auch Grautöne und Platzhalterfarben.
- Bilden Sie für jede Verwendung das Farbpaar mit der angrenzenden Farbe.
- Messen Sie jedes Paar und vergleichen Sie ohne Rundung mit 4,5:1 oder 3:1.
- Ergänzen Sie für jede durchgefallene Farbe eine dunklere oder hellere Stufe desselben Farbtons.
- Vergeben Sie feste Rollen und schreiben Sie die geprüften Paare ins Markenhandbuch.
- Prüfen Sie Fokusanzeige, Formularrahmen und Diagramme in jeder Seitenvorlage.
Kleine Korrekturen wie dunklere Rahmen lassen sich im laufenden Betrieb umsetzen. Neue Farbstufen und Rollen greifen dagegen in alle Vorlagen ein und passen gut in einen Relaunch. Damit dabei Inhalte und Sichtbarkeit erhalten bleiben, nutzen Sie unsere Checkliste für den Website-Umzug ohne Verlust an Google-Traffic. So setzen Sie die neue Palette um, ohne an anderer Stelle Reichweite zu verlieren.