Warum fallen meine Markenfarben im Web beim Kontrast durch?

Markenfarben werden meist für Druck oder Logos gewählt, nicht für gut lesbaren Text. Ein mittlerer Ton, der als Füllfarbe gut aussieht, kann deutlich unter den 4,5 zu 1 liegen, die Fließtext braucht. Dann muss er abgedunkelt oder mit einer anderen Textfarbe kombiniert werden.

Welchen Kontrastwert sollte ich anpeilen?

WCAG AA verlangt 4,5 zu 1 für normalen Text und 3 zu 1 für großen Text. AAA ist mit 7 zu 1 strenger. Für die meisten Seiten ist AA beim Fließtext das praktische Ziel.

Aus deinem Logo eine barrierefreie Farbpalette bauen

4 Schritte Etwa 10 Minuten

Dein Logo enthält deine Markenfarben, aber die Rohwerte fallen oft beim Kontrast durch. Extrahieren, prüfen, dann um das herum bauen, was besteht.

Ein Logo enthält bereits deine Markenfarben, aber wenn du diese Rohwerte direkt auf eine Website packst, scheitern sie oft an der Barrierefreiheit, sobald Text darauf liegt. Die Aufgabe ist, die Palette sauber herauszuziehen, sie gegen echte Kontrastregeln zu prüfen und dann die unterstützenden Töne um die Farben herum zu bauen, die durchhalten. So bleibt die barrierefreie Version trotzdem erkennbar deine Marke und nicht eine verwässerte Vermutung.

Die Farben aus dem Logo ziehen

Lade das Logo hoch und hol die dominanten Farben heraus. So bekommst du die echten Hex-Werte, statt sie nach Augenmaß zu raten.

Öffnen: Palette

Jede Farbe gegen deinen Text prüfen

Prüfe jede Farbe gegen die Textfarbe, mit der du sie kombinieren willst. Ziel sind mindestens 4,5 zu 1 für Fließtext, damit du WCAG AA erreichst.

Öffnen: Contrast

Hellere und dunklere Töne erzeugen

Erzeuge hellere und dunklere Abstufungen rund um die Farben, die bestanden haben. So hast du Optionen für Hintergründe, Rahmen und Hover-Zustände.

Öffnen: Palette

Einen Verlauf hinzufügen (optional)

Misch zwei Markenfarben zu einem CSS-Verlauf für Header oder Buttons, falls dein Design das braucht.

Öffnen: Gradient

Häufige Fragen

Warum fallen meine Markenfarben im Web beim Kontrast durch?: Markenfarben werden meist für Druck oder Logos gewählt, nicht für gut lesbaren Text. Ein mittlerer Ton, der als Füllfarbe gut aussieht, kann deutlich unter den 4,5 zu 1 liegen, die Fließtext braucht. Dann muss er abgedunkelt oder mit einer anderen Textfarbe kombiniert werden.
Welchen Kontrastwert sollte ich anpeilen?: WCAG AA verlangt 4,5 zu 1 für normalen Text und 3 zu 1 für großen Text. AAA ist mit 7 zu 1 strenger. Für die meisten Seiten ist AA beim Fließtext das praktische Ziel.

Etwas Größeres im Sinn?

Hivly stammt von CodingEagles, einem Software-Studio, das produktionsreife Web-Apps liefert. Wenn du ein echtes Projekt hast, melde dich.

Sieh, was CodingEagles macht →