Ein praktisches Sass-basiertes Werkzeug zur Erstellung ausgewogener Farbpaletten

Für diejenigen, die keinen Designhintergrund haben, basiert die Auswahl einer Farbpalette oft auf persönlichen Vorlieben. Die Farbauswahl kann mit einem Online-Farbwerkzeug erfolgen, aus einem Bild abgetastet, von Lieblingsmarken "entlehnt" oder einfach irgendwie zufällig aus einem Farbrad ausgewählt werden, bis sich eine Palette "richtig anfühlt".

Unser Ziel ist es, besser zu verstehen, was eine Palette "richtig fühlen" lässt, indem wir wichtige Farbattribute mit Sass-Farbfunktionen untersuchen. Bis zum Ende werden Sie vertrauter mit

• dem Wert der grafischen Darstellung von Luminanz, Helligkeit und Sättigung einer Palette zur Unterstützung beim Erstellen ausgewogener Paletten
• der Bedeutung der Integration von Prüfungen auf barrierefreien Kontrast in Ihre Werkzeuge
• fortgeschrittenen Sass-Funktionen, die Sie für Ihre eigenen Erkundungen erweitern können, einschließlich eines CodePens, den Sie bearbeiten und forken können

Sie werden jedoch letztendlich feststellen, dass Farbe im Web ein Kampf zwischen Hardware und menschlicher Wahrnehmung ist.

Was macht die grafische Darstellung von Farben nützlich

Möglicherweise sind Sie mit Möglichkeiten zur Deklaration von Farben in Stylesheets vertraut, wie z. B. RGB- und RGBA-Werte, HSL- und HSLA-Werte sowie HEX-Codes.

rbg(102,51,153)
rbga(102,51,153, 0.6)
hsl(270, 50%, 40%)
hsla(270, 50%, 40%, 0.6)
#663399

Diese Werte geben Geräten Anweisungen, wie sie Farben rendern sollen. Tiefere Attribute einer Farbe können programmgesteuert zugänglich gemacht und genutzt werden, um zu verstehen, wie eine Farbe mit einer breiteren Palette zusammenhängt.

Der Wert der grafischen Darstellung von Farbmerkmalen besteht darin, dass wir ein vollständigeres Bild der Beziehung zwischen den Farben erhalten. Dies zeigt, warum eine Sammlung von Farben zusammen richtig oder falsch wirken kann. Die grafische Darstellung mehrerer Farbattribute hilft dabei, Hinweise darauf zu geben, welche Anpassungen vorgenommen werden können, um eine harmonischere Palette zu erstellen. Wir werden uns in einem späteren Abschnitt Beispiele ansehen, wie bestimmt wird, was geändert werden soll.

Zwei nützliche Messungen, die wir leicht mit integrierten Sass-Farbfunktionen erhalten können, sind Helligkeit und Sättigung.

• Helligkeit bezieht sich auf die Mischung von Weiß oder Schwarz mit der Farbe.
• Sättigung bezieht sich auf die Intensität einer Farbe, wobei 100% Sättigung die reinste Farbe ergibt (kein Grau vorhanden).

$color: rebeccapurple;

@debug lightness($color);
// 40%

@debug saturation($color);
// 50%;

Die Luminanz ist jedoch wohl das nützlichste Farbmerkmal. Die Luminanz, wie sie in unserem Werkzeug dargestellt wird, wird mit der WCAG-Formel berechnet, die einen sRGB-Farbraum annimmt. Die Luminanz wird in den Kontrastberechnungen verwendet und zielt als übergeordnetes Konzept darauf ab, die menschliche Wahrnehmung der relativen Helligkeit besser zu quantifizieren, um Farbbeziehungen zu bewerten. Das bedeutet, dass ein engerer Luminanzwertbereich innerhalb einer Palette wahrscheinlich als ausgewogener für das menschliche Auge wahrgenommen wird. Aber Maschinen sind fehlbar und es gibt Ausnahmen von dieser Regel, denen Sie begegnen können, während Sie Palettenwerte bearbeiten. Für weiterführende Informationen zur Luminanz und einem einzigartigen Farbraum namens CIELAB, der darauf abzielt, die menschliche Wahrnehmung von Farbgleichmäßigkeit genauer darzustellen, siehe die Links am Ende dieses Artikels.

Darüber hinaus ist der Farbkontrast für die Barrierefreiheit äußerst wichtig, insbesondere in Bezug auf Lesbarkeit und Unterscheidung von UI-Elementen, was programmgesteuert berechnet werden kann. Das ist wichtig, da es bedeutet, dass Werkzeuge auf Werte prüfen können, die den Anforderungen entsprechen. Es bedeutet auch, dass Algorithmen beispielsweise eine geeignete Textfarbe zurückgeben können, wenn die Hintergrundfarbe übergeben wird. Unser Werkzeug wird daher die Kontrastprüfung als zusätzliche Möglichkeit zur Einschätzung der Anpassung Ihrer Palette integrieren.

Die in diesem Projekt demonstrierten Funktionen können extrahiert werden, um bei der Planung einer kontrast sicheren Designsystem-Palette zu helfen, oder in ein Sass-Framework integriert werden, das die Definition eines benutzerdefinierten Themas ermöglicht.

Sass als Werkzeug zum Erstellen von Paletten

Sass bietet mehrere traditionelle Programmierfunktionen, die es perfekt für unsere Bedürfnisse machen, wie z. B. das Erstellen und Iterieren von Arrays und das Manipulieren von Werten mit benutzerdefinierten Funktionen. Gekoppelt mit einer Online-IDE, wie CodePen, die Echtzeitverarbeitung bietet, können wir im Wesentlichen eine Webanwendung erstellen, um spezifische Probleme zu lösen, wie z. B. das Erstellen einer Farbpalette.

Hier ist eine Vorschau des Werkzeugs, das wir verwenden werden

Siehe den Pen
Sass Color Palette Grapher von Stephanie Eckles (@5t3ph)
auf CodePen.

Funktionen des Sass-Paletten-Builders

• Es gibt einen responsiven Graphen mit Seitenverhältnis-Kontrolle für eine genaue Platzierung von Plotpunkten und den Vergleich von Werten aus.
• Es nutzt die Ergebnisse von Sass-Farbfunktionen und mathematischen Berechnungen, um Punkte auf einer Skala von 0–100 % korrekt darzustellen.
• Es generiert einen Farbverlauf, um eine traditionellere "Swatch"-Ansicht zu bieten.
• Es verwendet integrierte Sass-Funktionen, um Sättigungs- und Helligkeitswerte zu extrahieren.
• Es erstellt Luminanz- und Kontrastfunktionen (geforkt von Material Web Components, zusätzlich zur Verlinkung erforderlicher vorberechneter linearer Farbkanalwerte).
• Es gibt die passende Textfarbe für einen gegebenen Hintergrund zurück, mit einer Einstellvariablen zum Ändern des verwendeten Verhältnisses.
• Es bietet Funktionen zur einheitlichen Skalierung von Sättigung und Helligkeit über eine gegebene Palette.

Verwendung des Paletten-Builders

Um zu beginnen, möchten Sie vielleicht zwischen den bereitgestellten Beispielpaletten wechseln, um ein Gefühl dafür zu bekommen, wie sich die Graphenwerte für verschiedene Arten von Farbbereichen ändern. Kopieren Sie einfach einen Palettenvariablennamen und ersetzen Sie ihn als Wert der Variable $palette durch $default, die Sie unter dem Kommentar SWAP THE PALETTE VARIABLE finden.

Versuchen Sie als Nächstes, den Wert der Variable $contrastThreshold zwischen den vordefinierten Verhältnissen zu wechseln, insbesondere wenn Sie weniger vertraut mit der Sicherstellung des Kontrasts gemäß den WCAG-Richtlinien sind.

Versuchen Sie dann, die Werte $palette-scale-lightness oder $palette-scale-saturation anzupassen. Diese speisen die Funktion palette und skalieren diese Messungen einheitlich über die Palette (bis zum Limit der einzelnen Farbe).

Zum Schluss können Sie Ihre eigene Palette hinzufügen oder Farben in den Beispielen austauschen. Das Werkzeug ist eine großartige Möglichkeit, Sass-Farbfunktionen zu erkunden, um bestimmte Attribute einer Farbe anzupassen, von denen einige in der $default-Palette demonstriert werden.

Interpretation der Graphen und Erstellung ausgewogener, zugänglicher Paletten

Das grafische Werkzeug zeigt standardmäßig die Luminanz an, da diese der zuverlässigste Indikator für eine ausgewogene Palette ist, wie wir zuvor besprochen haben. Je nach Bedarf können Sättigung und Helligkeit für sich genommen nützliche Metriken sein, aber meist sind sie Signale, die darauf hinweisen können, was angepasst werden muss, um die Luminanz einer Palette besser in Einklang zu bringen. Eine Ausnahme kann die Erstellung einer Helligkeitsskala basierend auf jedem Wert in Ihrer etablierten Palette sein. Sie können dafür zum Beispiel $stripeBlue wechseln.

Die $default-Palette ist tatsächlich verbesserungsbedürftig, um näher an eine ausgewogene Luminanz heranzukommen

Eine Palette, die eine gut ausbalancierte Luminanz zeigt, ist das Beispiel von Stripe ($stripe)

Hier fordert das Werkzeug einen Denkschritt. Anstatt ein Farbrad zu manipulieren, nutzt es Sass-Funktionen, um Farbattribute programmatisch anzupassen.

Überprüfen Sie die Sättigungs-Grafik, um zu sehen, ob Sie Spielraum haben, um mit der Intensität der Farbe zu spielen. Meine empfohlene Anpassung ist, Ihren Farbwert mit der Funktion scale-color zu umschließen und einen angepassten $saturation-Wert zu übergeben, z. B. Beispiel: scale-color(#41b880, $saturation: 60%). Der Vorteil von scale-color ist, dass es den Wert fließend basierend auf dem angegebenen Prozentsatz anpasst.

Helligkeit kann erklären, warum sich zwei Farben unterschiedlich anfühlen, indem sie einen Wert für ihre Helligkeit zuweisen, gemessen an der Mischung mit Weiß oder Schwarz. In der $default-Palette wird die Funktion change-color für purple verwendet, um ihren relativen $lightness-Wert mit der berechneten lightness() des für rot verwendeten Werts abzugleichen.

Die Funktion scale-color erlaubt auch die Bündelung sowohl eines angepassten $saturation- als auch eines $lightness-Werts, was oft am nützlichsten ist. Beachten Sie, dass angegebene Prozentsätze negativ sein können.

Durch die Nutzung von Sass-Funktionen und die Überprüfung der Sättigungs- und Helligkeitsgraphen erreicht die $defaultBalancedLuminance eine ausgewogene Luminanz. Diese Palette verwendet auch die Funktion map-get, um Werte aus der $default-Palette zu kopieren und weitere Anpassungen vorzunehmen, anstatt sie zu überschreiben, was praktisch zum Testen mehrerer Variationen ist, wie z. B. einer Farbtonverschiebung über eine Palette hinweg.

Nehmen Sie sich eine Minute Zeit, um weitere verfügbare Farbfunktionen zu erkunden.

Kontrast spielt eine Rolle, wenn man bedenkt, wie die Palettenfarben tatsächlich in einer Benutzeroberfläche verwendet werden. Das Werkzeug verwendet standardmäßig den AA-Kontrast, der für allen Text am besten geeignet ist: 4.5. Wenn Sie für eine helle Benutzeroberfläche entwickeln, sollten Sie bedenken, dass jede Farbe, die für Text verwendet wird, einen angemessenen Kontrast zu Weiß aufweisen sollte, wenn sie gegen die Luminanz abgeglichen wird, was durch den mittleren Punkt des Plotpunkts angezeigt wird.

Tipp: Der Graph ist mit einem transparenten Hintergrund eingerichtet, sodass Sie eine background-Regel auf body hinzufügen können, wenn Sie für eine dunklere UI entwickeln.

Weitere Lektüre

Farbe ist ein weitreichendes Thema und dieser Artikel behandelt nur die Aspekte, die sich auf Sass-Funktionen beziehen. Aber um wirklich zu verstehen, wie man harmonische Farbsysteme erstellt, empfehle ich die folgenden Ressourcen

• Farbräume – ist ein super beeindruckendes Deep-Dive mit interaktiven Modellen verschiedener Farbräume und wie sie berechnet werden.
• Farben und Luminanz verstehen – Einsteigerfreundlicher Überblick von MDN über Farbe und Luminanz und ihre Beziehung zur Barrierefreiheit.
• Perzeptuell einheitliche Farbräume – Weitere Informationen über perzeptuell einheitliche Farbsysteme, mit einer Einführung in das Werkzeug HSLuv, das Werte aus dem bekannteren HSL-Farbraum in den auf Luminanz abgestimmten CIELUV-Farbraum umwandelt.
• Zugängliche Farbsysteme – Eine Fallstudie von Stripe über ihre Erfahrungen beim Aufbau eines zugänglichen Farbsystems durch die Erstellung benutzerdefinierter Werkzeuge (was diese Erkundung und diesen Artikel inspiriert hat).
• Ein Nerd-Leitfaden zu Farben im Web – Dies ist eine fantastische Erkundung der Mechanik von Farben im Web, verfügbar direkt hier auf CSS-Tricks.
• Tanaguru Kontrastfinder – Ein unglaubliches Werkzeug, das Ihnen hilft, wenn Sie Schwierigkeiten haben, Farben anzupassen, um zugängliche Kontraste zu erzielen.
• ColorBox – Eine Webanwendung von Lyft, die Farbverläufe durch grafische Darstellung weiter erforscht.
• Systematische Farben gestalten – Beschreibt die außergewöhnlichen Anstrengungen von Mineral UI, Farbreihen zu erstellen, um konsistentes Theming über eine auf Luminanz abgestimmte Palette zu unterstützen.
• Wie wir die neuen Farbpaletten in Tableau 10 entworfen haben – Tableau hat Funktionen ihres benutzerdefinierten Werkzeugs offengelegt, die ihnen bei der Erstellung einer aufgefrischten Palette basierend auf CIELAB geholfen haben, einschließlich eines zugänglichen Überblicks über diesen Farbraum.