Ansicht von oben: linke Hand auf der Tastatur, rechte Hand auf dem Touchpad des MacBook

Forced - colors

Einer der Werte der @media-Anweisung, um benutzerdefinierte Einstellungen zu überprüfen.

Wenn diese Funktion aktiviert ist, werden die Farben auf der Webseite erzwungen, sich entsprechend den Benutzereinstellungen zu ändern, z.B. bei kontrastreichen Themen. Dies verbessert den Kontrast und die Lesbarkeit des Textes und erleichtert Menschen mit Sehbehinderungen oder anderen visuellen Beeinträchtigungen die Navigation und Interaktion mit der Website.

👴 In älteren Browser-Versionen wird "forced-colors" kaum unterstützt.

Inhaltsverzeichnis:

  1. Beispiel
  2. Wie wird es geschrieben?
  3. Testen und Debuggen
  4. Was ist darunter zu verstehen?
  5. Tipps

Beispiel

<button class="button">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="36"
    height="36"
    viewBox="0 0 24 24"
    fill="none"
    stroke="#000000"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="button-icon"
  >
    <path d="M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4"/>
    <path d="M5 19.5C5.5 18 6 15 6 12c0-.7.12-1.37.34-2"/>
    <path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/>
    <path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/>
    <path d="M8.65 22c.21-.66.45-1.32.57-2"/>
    <path d="M14 13.12c0 2.38 0 6.38-1 8.88"/>
    <path d="M2 16h.01"/>
    <path d="M21.8 16c.2-2 .131-5.354 0-6"/>
    <path d="M9 6.8a6 6 0 0 1 9 5.2c0 .47 0 1.17-.02 2"/>
  </svg>
  <span class="visually-hidden">
     Anmeldung per Fingerabdruck
  </span>
</button>
@media (forced-colors: active) {
  .button-icon {
    stroke: #ffffff;
  }
}

Wenn Sie sich die Demo im Modus "Forced Colors" ohne und mit der Richtlinie ansehen, bleibt das Fingerabdrucksymbol im ersten Fall schwarz (#000000), im zweiten Fall wird es weiß wie die Schaltfläche.

Wie wird es geschrieben?

Es gibt zwei Werte:

  • none - der erzwungene Farbmodus ist nicht ausgewählt, die Farbpalette ist nicht eingeschränkt.
  • active - der Forced-Colors-Modus ist aktiviert.

Normalerweise ersetzen Browser Farben im Hochkontrastmodus automatisch, daher ist forced-colors nur in seltenen Fällen sinnvoll:

  • Für benutzerdefinierte Elemente, deren Farben nicht automatisch ersetzt werden. Zum Beispiel bei Schaltflächen.
  • Für SVG und andere Vektorgrafiken.

Wenn die Farbe wichtig ist, um den Kontext zu verstehen. Zum Beispiel für Farbpaletten in Bekleidungsgeschäften.

Verwenden Sie forced-colors nur, wenn es wirklich notwendig ist. Überschreiben Sie keine Farben oder andere Stile im Modus forced-colors, damit die Benutzeroberfläche der Website immer gleich aussieht.

Liste der CSS-Eigenschaften, deren Werte automatisch mit den Systemeinstellungen überschrieben werden:

  • color;
  • background-color;
  • border-color;
  • outline-color;
  • scrollbar-color;
  • caret-color;
  • lighting-color;
  • flood-color;
  • stop-color;
  • -webkit-tap-highlight-color;
  • column-rule-color;
  • text-decoration-color;
  • text-emphasis-color;
  • fill;
  • stroke.

Es gibt auch Eigenschaften, deren Werte im erzwungenen Farbmodus zurückgesetzt werden: accent-color wird auf auto gesetzt, box-shadow und text-shadow auf none, background-image auf none, wenn als Wert nicht die Funktion url() angegeben wird, color-scheme auf light dark.

Browser ersetzen keine Farben durch systemeigene Farben, wenn die Eigenschaft forced-color-adjust mit dem Wert none verwendet wird. Diese Eigenschaft ist beispielsweise nützlich, um zu verhindern, dass wichtige Farben im eingeschränkten Farbmodus ersetzt werden.

.important-specific-element {
  forced-color-adjust: none;
}

Wenn eine Farbe aus irgendeinem Grund nicht durch die gewünschte Farbe ersetzt werden kann, verwenden Sie systemeigene (dynamische) Farben. Zum Beispiel ButtonText für Schaltflächen, CanvasText für normalen Text, LinkText für Links oder HighlightText für hervorgehobenen Text.

forced-colors kann mit einem anderen Wert der @media-Direktive - prefers-contrast - kombiniert werden. Dieser Wert steuert die Kontrasteinstellungen im System, die erhöht oder verringert werden können. In diesem Fall können Browser erkennen, welchen Modus von forced-colors der Benutzer gewählt hat - Hochkontrast oder Niedrigkontrast.

@media (forced-colors: active) and (prefers-contrast: less) {
  /* styles */
}

Es ist auch möglich, forced-colors zusammen mit prefers-color-scheme zu verwenden. In diesem Fall können die Stile speziell für den hellen oder dunklen Modus der erzwungenen Farben angepasst werden.

Ein Beispiel für den dunklen und hellen Modus von forced-colors:

@media (forced-colors: active) and (prefers-color-scheme: dark) {
  /* styles */
}

@media (forced-colors: active) and (prefers-color-scheme: light) {
  /* styles */
}

Testen und Debuggen

Um die Benutzeroberfläche im Forced-Colors-Modus zu testen, können Sie entweder den Browser verwenden oder diesen Modus im System aktivieren.

In Chrome befindet sich die Emulation von Forced Colors auf der zusätzlichen Registerkarte „Rendering“ in den Entwicklertools. Um dorthin zu gelangen, öffnen Sie die Liste der zusätzlichen Einstellungen (die Schaltfläche mit den drei Punkten neben dem Schließen-Button), erweitern Sie die Liste „Weitere Tools“ und finden Sie die Dropdown-Liste „Emulate media feature forced-colors“.

In Betriebssystemen finden Sie den Modus "Erzwungene Farben" im Bereich "Barrierefreiheit und Eingabehilfen".

Was ist darunter zu verstehen?

Der Modus "Erzwungene Farben" schränkt die Anzahl der Farben ein, um die Lesbarkeit des Textes zu verbessern, indem der Kontrast zwischen Text und Hintergrund verändert wird. Es werden hauptsächlich Farben mit hohem Kontrast verwendet. In diesem Modus werden die Farben sowohl im System als auch auf Webseiten automatisch geändert.

Wenn der Browser erfährt, dass der Modus "forced-colors" ausgewählt wurde, schränkt er die Farbpalette auf eine kleine Anzahl von Farben ein. Mit forced-colors können Sie die Unterstützung dieses Modus auf einer Website flexibler konfigurieren.

Tipps

Ein weiterer Wert der @media-Direktive - ms-high-contrast - ist ähnlich wie forced-colors. Er ist veraltet und wird nur noch zur Unterstützung des Hochkontrastmodus im Internet Explorer verwendet.