Systematik

Die KERN Farbpalette

KERN orientiert sich an der „Universal Color Palette“ von Kevin Muldoon, um vereinfacht barrierefreie Kontraste für KERN UI-Elemente zu gewährleisten. Anders als Muldoon verwendet KERN jedoch nicht den CIELAB Farbraum, sondern OKLCH und auch bei den Kontrasten unterscheidet sich KERN leicht vom Vorbild. Mehr dazu unter „Aufbau der Palette und Unterschiede zu Muldoon".

Warum OKLCH?

Der Grund für den anderen Farbraum? CIELAB führt leider zu Farbtonverschiebungen bei einigen Farben, so auch beim Blau der Dachmarke. Folgende Grafik aus dem Björn Ottoson Artikel „A perceptual color space for image processing“ illustriert diesen Sachverhalt anschaulich, auch im Vergleich zu weiteren Farbräumen.

Um Irritationen vorzubeugen: OKLCH ist die zylindrische (Helligkeit, Sättigung, Farbton) Darstellung von OKLAB (Helligkeit, grün-rot, blau-gelb). Beide basieren auf denselben Daten, aber OKLCH ist für viele Designaufgaben praktischer, weil sich durch die gezielte Steuerung von Helligkeit, Sättigung und Farbton eine Farbe intuitiver manipulieren und lesen lässt:

• L: Lightness
• C: Chroma
• H: Hue

Anders als Farben im klassischen sRGB-Farbraum versucht OKLCH, Farben so darzustellen, dass sie für das menschliche Auge möglichst gleichmäßig wirken („perzeptuell linear“). Er eignet sich damit besser, barrierefreie Farbpaletten zu gestalten, in denen sich die Farben kontrastgleich zueinander verhalten. Mehr dazu lässt sich im Artikel von Daryl Koopersmith und Wilson Miner nachlesen: „Designing accessible color systems“.

OKLCH bereitet durch seine lineare Helligkeitsverteilung auch gut auf den (eventuell) kommenden APCA-Standard in WCAG 3 vor. APCA basiert auf der menschlichen visuellen Wahrnehmung, nicht rein auf physikalischer Luminanz wie WCAG 2.0.

Der Effekt der OKLCH Farbtabelle: Barrierefreie Kontraste

In der Tabelle unten wurden alle Farbwerte entsättigt. Dies verdeutlicht, was die Farbsystematik besonders macht: Die Farben verhalten sich in den Kontrasten gleichmäßig. Ein darkblue-700 ist genauso kontrastreich wie ein yellow-700. Damit können die in der Semantik auf barrierefreie Kontrastwerte abgestimmten Farben leicht ausgetauscht werden. Am entsättigten Beispiel der Alert-Komponente (Bild unten), erkennt man, dass alle Varianten (Information, Erfolg, Warnung, Fehler) die gleichen WCAG-Kontrastwerte erfüllen. Das zeigt außerdem, dass sich nicht allein auf Farbe verlassen werden sollte, um wichtige Sachverhalte zu kennzeichnen. In diesem Fall werden zusätzliche Hinweise wie z. B. Symbole oder Icons verwendet.

Aufbau der Palette und Unterschiede zu Muldoon

Genereller Aufbau

Im Gegensatz zu Kevin Muldoon, der Farben nach Helligkeit sortiert, orientiert sich KERN strikt an den WCAG-Vorgaben und definiert feste Kontrastverhältnisse. Die Farben in KERN sind etwas kontraststärker in den helleren Werten, um besser wahrgenommen werden zu können. Auch die dunklen Töne haben wir etwas angepasst und deren Kontrastwerte verringert, so dass sie heller erscheinen und sich zudem deutlicher voneinander abgrenzen. Die Anzahl der Farben pro Familie ist die gleiche wie bei Muldoon, ebenso die Bezeichnung (250, 300, etc.). Wie bei der „Universal Color Palette“ von Kevin Muldoon erfüllt der Wert 500 das Kontrastminimum von 4,5:1 auf Weiß, wie auf Schwarz und markiert damit so etwas wie die Mitte der Kontrastmatrix. Da die Farbe mit dem Wert 500 sowohl im Light- als auch im Dark-Mode verwendet werden kann, lassen sich von ihr aus einfach die erforderlichen Kontrastwerte für Texte und Hintergründe in beiden Modi ableiten. Im Light-Mode entspricht beispielsweise die Farbe 800 der Farbe 200 im Dark-Mode – und umgekehrt. Im Detail verhalten sich die Farben im Dark-Mode jedoch leicht unterschiedlich in Bezug auf den Kontrast. Daher empfiehlt sich ein leichtes Feintuning der Farbabstufungen nach oben oder unten. Trotzdem erleichtert dieses „Spiegeln“ der Farbwerte die schnelle Zuordnung passender Pendants für beide Modi. Bei den Bezeichnungen der Gruppen und der Aufteilung weicht KERN auch etwas vom Vorbild ab. Die KERN Struktur sieht wie folgt aus:

Die generischen Farbgruppen

Die Farbtabelle wird in fünf Gruppen aufgeteilt. Jede Gruppe unterstützt dabei, Farben für bestimmte UI-Elemente WCAG-konform zu ermitteln.

Farbgruppe	Nutzung
Ultra Bright	Seitenhintergründe im Light-Modus Text im Dark-Modus Headlines im Dark-Modus
Bright	Rahmen und Trennlinien im Light-Modus Text im Dark-Modus Headlines im Dark-Modus Body im Dark-Modus
Midtones	Niedrigste Farbwerte für Icons und Text im Light/Dark-Modus Typischerweise als Hintergrund für Schaltflächen verwendet im Light-Modus 500: 4,5:1 Kontrast auf reinem Weiß und Schwarz
Dark	Rahmen und Trennlinien im Light/Dark-Modus Text im Light-Modus Headlines im Light-Modus Body im Light-Modus
Ultra Dark	Seitenhintergründe im Dark-Modus Text im Light-Modus Headlines im Light-Modus

Die definierten Kontraste

Folgende Kontraste werden für die jeweiligen Farbwerte forciert:

Farbwert	Forcierter WCAG Kontrast
025	1,1:1
050	1,2:1
100	1,3:1
150	1,4:1
200	1,7:1
250	2,0:1
300	2,2:1
350	2,6:1
400	3,0:1
450	3,5:1
500	4,5:1
550	5,2:1
600	6,0:1
650	7,0:1
700	8,5:1
750	10,0:1
800	12,1:1
850	14,1:1
900	16,1:1
950	18,0:1

Nützliche Tools

Wenn ihr euch eine eigene Farbtabelle nach dieser Systematik erstellen wollt, könnt ihr dafür das KERN Tool „Farben für Alle" nutzen, oder nach wie vor den Generator „Leonardo":

tip

• Farben für alle (KERN eigene Lösung)
• KERN-Leonardo-Farbtabelle (alter Weg mit aktualisierten Kontrastwerten)