Farbe

Barrierefreie Farbe

Verwenden Sie nicht nur Farben, um das Vorhandensein einer Komponente der Benutzeroberfläche oder ihren Status anzuzeigen: Verwenden Sie Symbole und/oder Formen, um die Unterscheidung zu erleichtern. Kennzeichnen Sie Erfolge/Fehler NICHT NUR mit Farbe. Verwenden Sie Symbole oder Text.

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

Kontrast

• Mindestkontraststandards: 4,5:1 für normalen Text und 3:1 für großen Text oder Symbole.
• Standards für Kontrast von Nicht-Textelementen einhalten: Behalten Sie ein Mindestkontrastverhältnis von 3:1 für die Grenzen und Zustände von Komponenten der Benutzeroberfläche bei.
  • Dazu gehören visuelle Elemente (Rahmen, Hintergründe, Box-Shadows, Unterstreichungen), die die Grenze einer UI-Komponente bilden oder auf deren Vorhandensein hinweisen (z.B. Rahmen von Eingabefeldern).
  • Dazu gehören auch visuelle Elemente, die aktive Zustände innerhalb einer Komponente anzeigen (z.B. Häkchen in Kästchen oder Schalter).
  • Einschränkung: Die Einhaltung des Kontrastverhältnisses von 3:1 für Nicht-Textelemente kann bei minimalistischen Designs eine Herausforderung sein. Weiche Farbverläufe oder subtile Schatten nach innen/außen können visuelle Grenzen weicher machen und gleichzeitig die Anforderungen an die Barrierefreiheit erfüllen.
• prefers-contrast nur verwenden, wenn es gerechtfertigt ist: Verwenden Sie @media (prefers-contrast: more), wenn das Design kontrastarme Akzente (z. B. feine Rahmen, gedämpften Sekundärtext) enthält, die verstärkt werden müssen. Die meisten Websites, die bereits den Mindestkontrast erfüllen, benötigen es nicht.

Helle und dunkle Farbschemas

• Helle und dunkle Farbschemas unterstützen: Berücksichtigen Sie @media (prefers-color-scheme: dark) und kombinieren Sie es mit der CSS-Property color-scheme, damit Formularsteuerelemente, Scrollleisten und andere vom User-Agent gerenderte Oberflächen übereinstimmen. Weitere Informationen finden Sie unter Dunkler Modus.

Modus „Erzwungene Farben“

• Unterstützung für den Modus „Erzwungene Farben“: Im Modus „Erzwungene Farben“ (unter Windows „Hoher Kontrast“) überschreibt der Browser die Farben des Autors mit System-Keywords und entfernt background-image, box-shadow und border-image. Definieren Sie mit @media (forced-colors: active) Systemfarben-Fallbacks für Farbtokens.
• Verwenden Sie forced-color-adjust: none nur, wenn die Farbe eine wichtige Information ist (Syntax-Hervorhebung, Farbauswahl-Muster). Verwenden Sie forced-color-adjust: none NICHT nur aus ästhetischen Gründen.
• Verlassen Sie sich nicht auf background-image, box-shadow oder border-image, um Rahmen, Trennlinien oder Status darzustellen: Sie verschwinden bei erzwungenen Farben (und oft auch beim Drucken). Wenn Sie dies tun müssen, stellen Sie sicher, dass es im Modus für erzwungene Farben eine Alternative gibt, z. B. outline oder border mit Systemfarb-Keywords (CanvasText, LinkText, ButtonText, Highlight, GrayText usw.).

Farbtöne werden generiert

Bevor Sie Farbtöne dynamisch generieren, sollten Sie prüfen, ob Sie ein vorhandenes, vordefiniertes Design-Token verwenden können. Dies ermöglicht eine viel bessere Kontrolle durch den Designer und sorgt für Konsistenz.

Wenn Sie dynamisch hellere oder dunklere Farben generieren müssen:

• Passen Sie NICHT nur den Helligkeitskanal in oklch/oklab oder lch/lab an, z.B. oklab(from var(--primary) 0.9 a b). Das ist zwar theoretisch der richtige Weg, aber Browser implementieren noch kein Gamut-Mapping, sodass die resultierende Farbe unvorhersehbar ist.
• Sie können color-mix() verwenden, um die Farbe mit Weiß oder Schwarz zu mischen (vorzugsweise in oklab). Dadurch bleibt die Farbe im Farbraum, wird aber tendenziell zu stark entsättigt und es entstehen verwaschene Farbtöne und Schattierungen.
• Sie KÖNNEN die Helligkeitsanpassung mit einer der anderen Methoden (z. B. color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)) kombinieren, um ein Gleichgewicht zwischen den beiden zu erreichen. Vermeiden Sie jedoch, die Helligkeit um mehr als 30 % anzupassen.