Farbe

Das Farbsystem von Placer Toolkit besteht aus CSS‐benutzerdefinierten Eigenschaften, um eine konsistente Farbverwendung in deinem gesamten Projekt zu gewährleisten.

Farben sind in drei Hauptkategorien organisiert:

• Farbschemata, die ein vollständiges Spektrum von Farbtönen bieten.
• Grundfarben, die die Basis für dein Design bilden.
• Semantische Farben, die Aufmerksamkeit erzeugen und Bedeutung vermitteln.

Farbschemata werden durch deine Farbpalette bestimmt und bestehen aus den grundlegendsten Farbtokens deines Designs. Jeder Token wird durch einen Namen identifiziert, z. B. rot oder blau, sowie durch einen numerischen Farbton basierend auf der Helligkeit der Farbe. Auf dieser Skala liegt 95 nahe bei reinem Weiß und 05 nahe bei reinem Schwarz.

Du kannst diese Farbtöne verwenden, um einen zugänglichen Farbkontrast gemäß den WCAG 2.2 Erfolgskriterien sicherzustellen:

• Ein Unterschied von 40 gewährleistet ein Mindestkontrastverhältnis von 3∶1, geeignet für große Texte und Icons (AA)
• Ein Unterschied von 50 gewährleistet ein Mindestkontrastverhältnis von 4,5∶1, geeignet für normalen Text (AA) und große Texte (AAA)
• Ein Unterschied von 60 gewährleistet ein Mindestkontrastverhältnis von 7∶1, geeignet für alle Texte (AAA)

Die Standardpalette definiert 10 Farbtöne, jeder mit einer Skala von 11 Farbabstufungen im Format --pc-color-{hue}-{tint}.

Jeder Farbton kann den Skalen neutral, primary, success, warning und danger zugeordnet werden. Wie die Tokens in der Farbschema‐Skala wird jeder Token durch seine semantische Gruppe und einen numerischen Farbton im Format --pc-color-{group}-{tint} identifiziert.

Grundfarben bilden die Basis für Inhalt und Struktur deines Projekts. Diese Farben werden entsprechend ihrer Rolle im Design benannt.

Flächen sind Hintergrundebenen, auf denen andere Inhalte liegen. Flächenfarben vermitteln visuelle Hierarchie durch ein Gefühl von Tiefe. Beispielsweise erscheint --pc-color-surface-raised optisch vorne für den/die Benutzer:in und wird für Elemente wie Dialoge und Pop‐up‐Menüs verwendet, während --pc-color-surface-lowered weiter entfernt erscheint und für passive Container wie eingestellte Abschnitte oder gruppierte Formularbereiche genutzt wird.

Textfarben werden für normalen Text verwendet. Wir empfehlen ein Mindestkontrastverhältnis von 4,5∶1 zwischen Text‐ und Flächenfarben.

Overlays bieten einen Hintergrund, um Inhalte hervorzuheben, wobei der Hintergrund oft durchscheinen kann.

Placer Toolkit verwendet eine einzelne Farbe für alle Schatten. Diese wird zusammen mit anderen Schatten‐Tokens verwendet, um die Schatten deines Designs zu erstellen.

Placer Toolkit verwendet eine einzelne Fokusfarbe für vorhersehbare Tastaturnavigation. Diese wird zusammen mit anderen Fokus‐Tokens verwendet, um --pc-focus-ring zu erstellen. Wir empfehlen ein Mindestkontrastverhältnis von 3∶1 gegenüber Flächen‐ und Hintergrundfarben, wo immer möglich.

Placer Toolkit nutzt color-mix(), um konsistente Hover‐ und Active‐Zustände über Komponenten hinweg zu erzielen, ohne zahlreiche manuell gewählte Farben zu benötigen. Über color-mix() erzeugen diese benutzerdefinierte Eigenschaften kontextabhängig Hover- und Active‐Farben basierend auf der Farbe der Komponente.

Semantische Farben verstärken eine bestimmte Botschaft, Nutzung oder erwartetes Ergebnis durch vertraute und bedeutungsvolle Farbtöne. Jede Farbe wird durch ihre semantische Gruppe, Rolle und Aufmerksamkeit mit dem Format --pc-color-{group}-{role}-{attention} identifiziert. Es gibt fünf Gruppen semantischer Farben:

• Primary zur Betonung deiner Akzentfarbe.
• Success für Gültigkeit oder Bestätigung.
• Neutral für gewöhnliche oder inaktive Inhalte.
• Warning für Vorsicht oder Unsicherheit.
• Danger für Fehler oder Risiko.

Jede Gruppe definiert Farben für spezifische Rollen, sodass Farben leicht und mit vorhersehbarem Kontrast zusammengesetzt werden können. Es gibt drei Rollen:

• Fill für Hintergrundfarben oder Flächen größer als wenige Pixel.
• Border für Rahmen, Trenner und andere Linienbreiten-Elemente.
• On für Inhalte, die auf einer Fill‐Fläche angezeigt werden, gepaart mit derselben Aufmerksamkeit.

Schließlich wird jede Farbe nach dem Grad der Aufmerksamkeit benannt. Hier nutzen wir Lärm als Analogie: Ein lauter Ton zieht mehr Aufmerksamkeit auf sich als ein leiser. Es gibt drei Aufmerksamkeitsstufen:

• Quiet zieht die wenigste Aufmerksamkeit auf sich.
• Normal zieht mittlere Aufmerksamkeit auf sich.
• Loud zieht die meiste Aufmerksamkeit auf sich.