Zum Hauptinhalt springen

Farbe

Systematik für Farben in KERN kennenlernen und nutzen​

Farben in Design-Systemen dienen nicht nur der ästhetischen Gestaltung, sondern erfüllen auch eine Funktion, indem sie konsistente visuelle Hierarchien und Nutzer:innen-Interaktionen ermöglichen.

Generische Farben​

KERN bietet die in der Tabelle dargestellten generische Farben. Diese sind im OKLCH-Farbraum auf menschliche Wahrnehmung und Kontraste optimiert (mehr dazu unter dem Punkt „Herleitung des verwendeten Farbraums”). KERN orientiert sich an der „universal color palette” von Kevin Muldoon, um barrierefreie Kontraste für unsere KERN UI-Elemente zu gewährleisten. Die Lösung wurde leicht angepasst, die Grundregeln bleiben allerdings bestehen. Die Farbpalette des von KERN empfohlenen Dachmarken-Themes erfüllt mindestens den AA-Standard für Barrierefreiheit.

Die generischen Farben werden im Design nicht direkt verwendet. Dafür gibt es die semantischen Farben, die auf den generischen basieren.

Die Farben werden nach Helligkeit sortiert. Die 500 markiert dabei die Kontrastmitte zwischen Weiß und Schwarz (mit einer 0.02 Abweichung). Dadurch lassen sich Light und Dark Mode leicht durch Spiegelung ermitteln: 800 im Light Mode wird zu 200 im Dark Mode und umgekehrt.

Die kleinen Zahlen innerhalb der Farben zeigen den Farbkontrast zu weiß.

Farbtabelle“.

Die Bedeutung der Gruppen​

Seitenhintergründe im Light Mode (Schattentöne im Dark Mode)

Weitere Farben​

In der Tabelle oben nicht aufgeführt sind noch die typischen extremen Farben Weiß und Schwarz, die in der Semantik auch Anwendung finden.

Schwarz und weiß Farben.

Barrierefreie Kontraste​

In dem unteren Bild lässt sich sehr schön sehen, was die Tabelle besonders macht: Die Farben verhalten sich in den Kontrasten gleich. Ein Blau-700 ist genau so kontrastreich wie ein Gelb-700. Damit können die in der Semantik auf Accessibity-Kontraste abgestimmten Farbwerte leicht ausgetauscht werden. Das ist beispielsweise beim Feedback interessant (siehe das Bild darunter). Alle erfüllen die gleiche WCAG Kontrast-Norm. Man sieht an diesem Beispiel auch, wie wichtig es ist, sich nicht allein auf Farbe zu verlassen, um Nutzende auf Sachverhalte aufmerksam zu machen. Deswegen achten wir bei KERN 2 auf zusätzliche Hinweise wie Icons oder Unterstriche (letztere sind hilfreich um Links zu identifizieren).

Schwarz und weiß Tabelle.

Schwarz und weiß Beispiele.

Herleitung des verwendeten Farbraums​

Die Farben der „universal color palette” werden nicht im sRGB-Display Farbraum „gemischt”, sondern es wird dafür ein anderer Farbraum bemüht: CIELAB. Der Farbraum versucht die menschliche Wahrnehmung von Farbe zu modellieren. Er eignet sich besser, barrierefreie Farbpaletten zu gestalten, bei der sich die Farben kontrastgleich zueinander verhalten. Mehr dazu lässt sich im Artikel von Daryl Koopersmith und Wilson Miner nachlesen: Designing accessible color systems.

Die Verwendung der Brand-Color Blau für die Dachmarke stellt eine Herausforderung dar. Bei Blau kommt es im CIELAB-Farbraum zu einer Farbton-Verschiebung. Zum Glück gibt es dafür eine Lösung. Björn Ottoson präsentiert in seinem Artikel „A perceptual color space for image processing” eine Alternative zu CIELAB: OkLab. Die folgende Grafik stammt aus seinem Artikel und illustriert den Unterschied zwischen den verschiedenen Farbsystemen.

Entsprechend wurde die Farbtabelle für KERN im Oklab-Farbraum generiert. Ein Farbraum, der sich sehr ähnlich zum CIELAB-Farbraum verhält. Wir haben beim Wert 500 mit 4.48:1 eine WCAG-Abweichung von 0.02 zu weiß und zu schwarz. Nach dem Modell der „universal color palette” müssen wir einen Kontrast von 4.5 aufweisen. Das ließ sich mit dem aktuellen Toolset Leonardo.io nicht besser darstellen, die Abweichung ist in der Praxis allerdings homöopathisch für die Logik der Farbtabelle und insofern akzeptabel.

Ein weiterer Unterschied zur „universial color palette” ist die Anzahl der Farben. Wir haben den Farbstamm für unsere Bedürfnisse reduziert und vereinfacht. Die beiden Extreme Weiß und Schwarz tauchen nur einmal auf. Sie werden als „000” und „1000” bei den „Neutral Colors” geführt.

Schwarz und weiß Beispiele.

Semantische Farben​

Die Farben sind in KERN als Tokens angelegt. Eine Übersicht findest du hier. Die Benennungssystematik der Tokens folgt dem allgemeinen Prinzip wie unter Design-Tokens beschrieben. Um die richtige Verwendung der Farben musst du dich nicht kümmern, so lange du mit den vorgefertigten Komponenten arbeitest. Dort sind bereits die zu verwendenden Tokens eingesetzt. Mit KERN 2 folgen nun weitere semantische Farben, die dich beim Layouten unterstützen. Für Hintergründe gibt es entsprechend eine „Layout/Background/Default”-Farbe und ein „Hue” für abgrenzende Inhalte (wie beispielsweise Hintergründe).

Tokens für Layout​

Layout-Tokens sind die Standard-Tokens für die Gestaltung einer Seite. Die Gruppe umfasst Hintergründe für große Flächen, Textfarben, Border- und Divider-Farben.

Bei KERN 2 folgen Icons den Textfarben. Ausnahme bildet der Feedback-Fall (Warnung / Info / Danger /...). Hier ändert nur das Icon seine Farbe.

Layout Token.

Tokens für Form Inputs​

Form Input-Tokens sind spezifisch für alle Form Input-Elemente gedacht (Inputfields / Checkboxes / Radios / ...).

Input Token.

Tokens für Action​

KERN 2 kommt mit einer Action-Color aus. Die States werden über Opacity-Regeln definiert, um die Anzahl der Tokens zu reduzieren.

Action Token.

Tokens für Action State​

Die States werden in KERN 2 über die Opacity gelöst. Dadurch reduziert sich die Anzahl an benötigten Farb-Tokens und die State-Definition erfolgt farbunabhängig einheitlich.

Dabei gibt es zwei Vorgehen. Im ersten Fall wird ein eigenes State-Indicator-Objekt genutzt, wenn eine Farbe mit eingerechnet werden muss. Das ist zum Beispiel beim sekundären Button der Fall, in dem sich die weiße Fläche bei Interaktion blau einfärben soll.

Action State Token.

Im zweiten Fall kann das Interaktions-Token direkt gesetzt werden, wie beispielsweise die „action-opacity-disabled”.

Action State Token.

Action State Token Tabelle.

Tokens für Feedback​

Die Feedback-Farben bestehen aus jeweils zwei Tokens: Einem Haupt-Token (benannt nach dem jeweiligen Feedback) und einem Hintergrund-Token. Das Haupt-Token kann für Icons und Borders eingesetzt werden. Das Hintergrund-Token ist (man ahnt es bereits) Hintergründen vorbehalten.

Action State Token Tabelle.

Inhaltsverzeichnis