Markenfarben vorab prüfen: Kontrast-Check für Designsysteme & Styleguides

Warum Kontrast in die Konzeptphase gehört

Kurz-AntwortKontrast in der Skizzenphase zu prüfen kostet Minuten; ihn nach dem Launch in fertigen Komponenten zu korrigieren, kostet Nacharbeit in jeder Codebasis, die die Farbe verwendet.

Angenommen, ein Designteam wählt für ein neues Produkt einen warmen Korallton als Primärfarbe. In der Moodboard-Phase sieht die Farbe auf großen Flächen kräftig und einladend aus — niemand denkt in diesem Moment an Fließtext. Erst Wochen später, wenn dieselbe Farbe für Linktexte oder Formular-Labels wiederverwendet wird, fällt auf, dass sie auf Weiß den nötigen Kontrast nicht erreicht. Zu diesem Zeitpunkt steckt die Farbe oft schon in Dutzenden Komponenten, Icons und Marketing-Materialien.

Der einfachere Weg ist, die geplante Palette schon beim ersten Entwurf durch einen Farbkontrast-Prüfer laufen zu lassen — nicht nur die Primärfarbe gegen Weiß, sondern jede realistische Kombination, die später im Interface vorkommen wird: Text auf Kartenhintergrund, Button-Beschriftung auf Akzentfarbe, sekundärer Text auf hellgrauem Panel. Wird ein Problem hier erkannt, ist die Korrektur eine Design-Entscheidung; wird es erst nach dem Launch erkannt, ist es ein Entwicklungsticket.

Eine ganze Palette auf einmal prüfen

Kurz-AntwortStatt jede Farbkombination einzeln einzugeben, lässt sich eine komplette Palette als Paletten-Kontrastmatrix auf einen Blick vergleichen.

Ein typisches Designsystem enthält meist vier bis sechs Kernfarben: eine dunkle Textfarbe, einen hellen Hintergrund, eine Primärfarbe, eine Akzentfarbe und ein bis zwei neutrale Grautöne. Jede dieser Farben kann potenziell mit jeder anderen kombiniert werden — als Text auf Hintergrund, als Rahmenfarbe, als Icon-Farbe. Statt jede dieser Kombinationen einzeln nachzurechnen, bietet der Farbkontrast-Prüfer einen eigenen Paletten-Check-Modus: Vier Farben werden eingegeben, und das Tool zeigt eine vollständige Matrix, welche paarweise Kombination besteht und welche durchfällt.

Beispielhafte Matrix einer fiktiven Vier-Farben-Palette (nur zur Veranschaulichung, keine echte Messung)
Farbe A	Farbe B	Angenommenes Ergebnis
Dunkles Anthrazit	Heller Hintergrund	besteht deutlich
Primärfarbe (kräftig)	Heller Hintergrund	besteht knapp für großen Text
Akzentfarbe (Pastell)	Heller Hintergrund	besteht nicht für Fließtext
Neutrales Grau	Kartenhintergrund	besteht knapp für großen Text

Eine solche Matrix macht sichtbar, was in einzelnen Prüfungen leicht übersehen wird: dass gerade die zweite oder dritte Akzentfarbe einer Palette am ehesten Probleme macht, weil sie meist am hellsten oder gesättigtsten gewählt wird. Für ein Styleguide-Dokument lohnt es sich, diese Matrix einmal zu erstellen und als Referenz mit abzulegen, damit spätere Design-Entscheidungen — etwa "können wir die Akzentfarbe für Fließtext nutzen?" — schnell und ohne erneute Rechnerei beantwortet werden können.

UI-Komponenten-Kontrast (3:1) Neben Text gilt für Bedienelemente wie Button-Rahmen, Checkbox-Umrandungen oder Icon-Grafiken ein eigener, niedrigerer Mindestwert von 3:1 gegenüber der angrenzenden Fläche — relevant, wenn eine Palette auch für Rahmen und Icons wiederverwendet wird, nicht nur für Fließtext.

APCA als zweite Meinung neben dem klassischen Verhältnis

Kurz-AntwortDas klassische WCAG-Verhältnis reicht für eine Konformitätsprüfung, sagt aber nicht immer präzise, wie lesbar eine Kombination tatsächlich wirkt — APCA ergänzt das um Polarität, Schriftgröße und -stärke.

Erfahrene Designsystem-Teams verlassen sich zunehmend nicht mehr nur auf das klassische WCAG-2.x-Verhältnis, sondern ziehen zusätzlich den APCA-Lc-Wert heran, der für den kommenden WCAG-3-Standard entwickelt wurde. Der Unterschied: Zwei Farbpaare können exakt dasselbe klassische Verhältnis haben, sich in der Praxis aber unterschiedlich lesbar anfühlen — je nachdem, ob der helle oder der dunkle Ton der Text ist. APCA bildet das ab, indem es die Polarität der Kombination sowie die geplante Schriftgröße und -stärke einbezieht.

Für ein Designsystem heißt das konkret: Wenn eine Primärfarbe sowohl als heller Text auf dunklem Dark-Mode-Hintergrund als auch als dunkler Text auf hellem Karten-Hintergrund eingesetzt wird, lohnt es sich, beide Richtungen einzeln mit APCA zu prüfen, statt anzunehmen, dass ein bestandenes WCAG-Verhältnis in beide Richtungen gleich gut funktioniert. Der Farbkontrast-Prüfer zeigt den Lc-Wert direkt neben dem klassischen Verhältnis an, sodass beide Kennzahlen gemeinsam in eine Design-Entscheidung einfließen können.

Faustregel für die Praxis: Lc 75 als Zielwert für Fließtext in einem Styleguide, Lc 60 für längeren Sekundärtext, Lc 45 als unterste Grenze für große Überschriften — angelehnt an gängige APCA-Empfehlungen, nicht als verbindlicher Rechtsstandard.

Light- und Dark-Mode-Varianten getrennt behandeln

Kurz-AntwortDieselbe Markenfarbe verhält sich auf hellem und dunklem Hintergrund unterschiedlich — beide Modi brauchen eine eigene Kontrastprüfung, nicht nur eine gemeinsame Annahme.

Viele Styleguides definieren heute von Anfang an eine Light- und eine Dark-Mode-Palette. Ein häufiger Denkfehler dabei: Wenn die Primärfarbe im Light Mode gut kontrastiert, wird oft angenommen, dieselbe Farbe funktioniere im Dark Mode automatisch genauso gut, nur mit umgekehrtem Hintergrund. Tatsächlich muss meist eine hellere oder gesättigtere Variante derselben Farbe für den dunklen Hintergrund definiert werden, damit dort ausreichend Kontrast entsteht — eine Farbe, die auf Weiß dunkel genug wirkt, kann auf einem sehr dunklen Hintergrund zu wenig Leuchtkraft haben.

Ein praktischer Arbeitsablauf: Zuerst die Light-Mode-Kombinationen in der Paletten-Kontrastmatrix prüfen, dann dieselben Rollen (Primärtext, Sekundärtext, Akzent) für die Dark-Mode-Hintergründe erneut eintragen und separat auswerten. So entstehen zwei dokumentierte, jeweils eigenständig geprüfte Farbsätze im Styleguide, statt einer einzigen Annahme, die nur für einen der beiden Modi tatsächlich zutrifft.

Trage deine geplante Markenpalette ein und prüfe alle Kombinationen gleichzeitig mit der Paletten-Kontrastmatrix und dem APCA-Lc-Wert.

Farbkontrast-Prüfer testen →

Häufig gestellte Fragen

Wann im Designprozess sollte ich Farben auf Kontrast prüfen?

Am besten direkt bei der Auswahl der Markenpalette, noch bevor Mockups oder Komponenten gebaut werden — nicht erst im fertigen Interface. Ein Paletten-Check mit mehreren Farben gleichzeitig zeigt sofort, welche Text/Hintergrund-Kombinationen später Probleme machen, sodass Designer und Entwicklerteam schon in der Konzeptphase gegensteuern können, statt Komponenten nachträglich umzufärben.

Was ist eine Paletten-Kontrastmatrix und wofür nutzt man sie?

Eine Paletten-Kontrastmatrix vergleicht mehrere Farben einer Markenpalette gleichzeitig paarweise und zeigt in einer Tabelle, welche Kombinationen bestehen und welche durchfallen. Statt jede Text/Hintergrund-Kombination einzeln nachzurechnen, sieht ein Designteam auf einen Blick, ob z. B. die sekundäre Akzentfarbe auf dem hellen Kartenhintergrund überhaupt lesbar wäre.

Was bedeutet der APCA-Lc-Wert und warum reicht das klassische WCAG-Verhältnis manchmal nicht?

Das klassische WCAG-2.x-Verhältnis behandelt helle Farbe auf dunklem Grund und dunkle Farbe auf hellem Grund symmetrisch gleich, obwohl Menschen beides unterschiedlich wahrnehmen. APCA (ausgedrückt als Lc-Wert, etwa 0-108) berücksichtigt zusätzlich Polarität sowie Schriftgröße und -stärke und liefert dadurch ein realistischeres Bild davon, ob Text tatsächlich gut lesbar ist — besonders relevant für Dark-Mode-Varianten einer Markenpalette.

Wie gehe ich mit einer Markenfarbe um, die den Kontrasttest nicht besteht, aber im Styleguide fest verankert ist?

Die Markenfarbe selbst muss meist nicht ersetzt werden — stattdessen definiert man im Styleguide zwei Verwendungsvarianten: einen Ton, der für große Flächen und Akzente reserviert bleibt, und einen abgedunkelten oder aufgehellten Ableger derselben Farbe speziell für Text auf hellem bzw. dunklem Hintergrund. So bleibt die Markenidentität erkennbar, während Fließtext trotzdem AA oder AAA erreicht.

Sollte ich für Dark Mode eine eigene Kontrastprüfung durchführen?

Ja. Eine Farbe, die auf weißem Hintergrund gut kontrastiert, ergibt auf einem dunklen Hintergrund ein anderes Luminanzverhältnis und muss separat geprüft werden — Light- und Dark-Mode-Paletten teilen sich zwar oft denselben Markenfarbton, brauchen aber meist unterschiedlich helle oder dunkle Textvarianten, um jeweils für sich AA zu bestehen.