Wie ich die Farbtheorie auf dieser Website verwende (mit den genauen Tokens)
dev · Oct 6, 2026 · 4 min read
Die meisten Beiträge zur „Farbtheorie“ sind ein Farbkreis und ein Versprechen. Dies ist anders: Diese Site wird mit einem Kontrastprüfer in einem eigenen Build ausgeliefert, und in dem Beitrag geht es um die tatsächlichen Entscheidungen, wobei die Token offen liegen.
ein Farbton, der die ganze Arbeit erledigt
Das gesamte Akzentsystem dieser Site ist ein einziger oklch-Farbton (grün, Farbton 150). Aus diesem einen Farbton leite ich ab:
- das primäre (Schaltflächen, Links, aktive Zustände) – ein mittelhelles Grün, das 4,5:1 gegenüber weißem Text beibehält
- der primäre Container (weiche Hervorhebungen, Abzeichen) – gleicher Farbton, viel heller, mit dunklem Text
- Jeder Hover-, Fokus- und Auswahlstatus – wieder derselbe Farbton, andere Helligkeit oder Farbsättigung
Die Disziplin ist der Punkt: Ein Farbton darf nicht mit sich selbst kollidieren. Websites, die sich „designt“ anfühlen, verwenden normalerweise weniger Farben als Sie denken – sie verwenden jede einzelne nur mit größerer Absicht. Sobald ein zweiter Akzentton hinzukommt, muss jede Paarung erneut von Hand überprüft werden, und das ist nie der Fall.
Neutraltöne sind auch Farben
Der Hintergrund, die Oberflächen und der Text dieser Website sind nicht grau – sie haben den gleichen grünen Farbton, fast ohne Chroma. Dies ist der älteste Trick im redaktionellen Druckdesign: Tönen Sie Ihre Neutraltöne mit Ihrem Akzent und jede Oberfläche stimmt stillschweigend mit jeder anderen Oberfläche überein. Reines Grau neben einem farbigen Akzent wirkt leblos, obwohl fast niemand sagen kann, warum.
die 60/30/10-Regel, ehrlich angewendet
Sie kennen die Regel: 60 % dominant, 30 % zweitrangig, 10 % Akzent. Was niemand sagt, ist, dass es bei dem Verhältnis um visuelle Aufmerksamkeit und nicht um die Pixelfläche geht. Meine eigentliche Aufteilung: Oberflächen besitzen die Pixel, der Typ besitzt die Gewichtung und das Grün wird auf die Dinge verteilt, die ich anklicken möchte. Wenn alles akzentuiert ist, ist nichts akzentuiert – das grüne Erscheinen ist selbst Information („das ist interaktiv“).
Der Build schlägt fehl, wenn die Farben falsch sind
Hier ist der Teil, den ich noch nie auf einer anderen Website gesehen habe: Der Build führt eine Kontrastprüfung über 50 Token-Fälle aus – jedes Etikett, jedes Abzeichen und jeden abgeblendeten Text in beiden Themes, wobei die Deckkraft genau so zusammengesetzt ist, wie es der Browser tut – und schlägt fehl, wenn ein Paar unter WCAG AA fällt (4,5:1 Körper, 3:1 groß).
Dies ist wichtig, da die Farbtheorie in der Praxis an der Deckkraft scheitert: `opacity-60` auf dunklem Text auf einer hellen Oberfläche macht ihn nicht „subtil“, sondern macht ihn für Millionen von Lesern unleserlich, und keine Designrezension fängt alles ein. ein Tor tut es. Meiner hat heute Morgen 50 Fälle durchlaufen, bevor dieser Beitrag verschickt wurde.
was man stehlen soll
- Wählen Sie einen Akzentton und leiten Sie alles daraus ab (Material 3 nennt dies Tonpaletten)
- Färben Sie Ihre Neutraltöne mit diesem Farbton, anstatt Grau zu verwenden
- Betonen Sie nur das Interaktive
- Fügen Sie den Kontrast in CI ein, nicht in ein PDF: Ein fehlerhafter Build ist die einzige Farbtheorie, die Fristen überlebt