forced-colors

Baseline 2022
Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Das forced-colors CSS Medienfeature wird verwendet, um festzustellen, ob der Benutzeragent einen Modus für erzwungene Farben aktiviert hat, bei dem eine vom Benutzer gewählte begrenzte Farbpalette auf der Seite erzwungen wird. Ein Beispiel für einen Modus für erzwungene Farben ist der Hochkontrastmodus von Windows.

Syntax

Das Medienfeature forced-colors gibt an, ob der Browser sich derzeit im Modus für erzwungene Farben befindet.

Werte

none

Der Modus für erzwungene Farben ist nicht aktiv; die Farben der Seite werden nicht in eine begrenzte Palette gezwungen.

active

Zeigt an, dass der Modus für erzwungene Farben aktiv ist. Der Browser stellt den Autoren die Farbpalette über die CSS-Systemfarben Schlüsselwörter zur Verfügung und löst, falls zutreffend, den entsprechenden Wert von prefers-color-scheme aus, damit Autoren die Seite anpassen können. Der Browser wählt den Wert für prefers-color-scheme basierend auf der Helligkeit der Canvas-Systemfarbe (siehe die Spezifikation zur Farbkorrektur für weitere Details).

Anwendungshinweise

Eigenschaften, die vom Modus für erzwungene Farben betroffen sind

Im Modus für erzwungene Farben werden die Werte der folgenden Eigenschaften so behandelt, als ob sie keine autorenspezifischen Werte angegeben hätten. Das heißt, es werden browserdefinierte Werte verwendet. Die browserdefinierten Werte beeinflussen nicht die Stil-Kaskade; die Werte werden stattdessen vom Browser zur Malzeit erzwungen.

Diese browserdefinierten Werte werden aus dem Satz von Systemfarben ausgewählt – dies gewährleistet einen konsistenten Kontrast für häufige UI-Elemente für Benutzer, die erzwungene Farben aktiviert haben.

Zusätzlich haben die folgenden Eigenschaften ein besonderes Verhalten im Modus für erzwungene Farben:

Die Systemfarben, die für die oben genannten Eigenschaften erzwungen werden, hängen vom Kontext des Elements ab. Zum Beispiel wird die color-Eigenschaft auf einem Button-Element auf ButtonText gesetzt. Bei normalem Text wird sie auf CanvasText gesetzt. Siehe die Liste der Systemfarben für zusätzliche Details, wann welche Farben in verschiedenen UI-Kontexten angemessen sein könnten.

Hinweis: Benutzeragenten wählen Systemfarben basierend auf den nativen Element-Semantiken, nicht auf hinzugefügten ARIA-Rollen. Ein Beispiel: Das Hinzufügen von role="button" zu einem div wird nicht dazu führen, dass die Farbe eines Elements auf ButtonText erzwungen wird.

Zusätzlich zu diesen Anpassungen helfen Browser dabei, die Lesbarkeit von Text zu gewährleisten, indem sie "Hintergrundplatten" hinter Text zeichnen. Dies ist besonders wichtig, um den Kontrast zu erhalten, wenn Text auf Bildern platziert wird.

Es gibt einige Fälle, in denen der Benutzeragent die Werte für die oben genannten Eigenschaften nicht erzwingt:

Wenn forced-color-adjust auf none für ein Element gesetzt ist, werden keine erzwungenen Farbwerte angewendet, und Autorenstile werden normal angewendet. Außerdem wird die Hintergrundplatte für Text deaktiviert.

Wenn forced-color-adjust auf preserve-parent-color für ein Element gesetzt ist und der color-Wert des Elements nicht von seinem Elternteil geerbt wird, dann wird das Element so behandelt, als ob preserve-parent-color auf none gesetzt wäre.

Wenn eine Systemfarbe angegeben ist, wird sie anstelle des Werts verwendet, der ansonsten erzwungen worden wäre.

Sie können auch Systemfarben mit jeder anderen Eigenschaft als denen, die oben aufgeführt sind, verwenden, um sicherzustellen, dass der Rest der Seite in die eingeschränkte Farbpalette im Modus für erzwungene Farben integriert wird.

Barrierefreiheit

Im Allgemeinen sollten Webautoren nicht das Medienfeature forced-colors verwenden, um ein separates Design für Benutzer mit aktivierter Funktion zu erstellen. Stattdessen ist es beabsichtigt, kleine Anpassungen vorzunehmen, um die Benutzerfreundlichkeit oder Lesbarkeit zu verbessern, wenn die standardmäßige Anwendung von erzwungenen Farben für einen bestimmten Teil einer Seite nicht gut funktioniert.

Der hohe Kontrast, der durch die reduzierte Palette des Modus für erzwungene Farben und die Hintergrundplatten bereitgestellt wird, ist oft entscheidend dafür, dass manche Benutzer eine bestimmte Website lesen oder nutzen können. Daher sollten Anpassungen, die Inhalte betreffen, sorgfältig ausgewählt und auf Inhalte ausgerichtet werden, die ansonsten nicht lesbar sind.

Benutzerpräferenzen

Dieses Medienfeature ist nur aktiv, wenn der Benutzer in seinem Betriebssystem Farbpräferenzen aktiviert hat. Ein Beispiel für eine solche Funktion ist der Hochkontrastmodus unter Windows.

Beispiele

Hinweis: Das untenstehende Beispiel funktioniert nur, wenn Sie einen Browser verwenden, der dieses Medienfeature unterstützt, und mit einer Präferenz wie dem Hochkontrastmodus in Ihrem Betriebssystem aktiviert.

Dieses Beispiel ist ein Button, der normalerweise seinen Kontrast über box-shadow erhält. Im Modus für erzwungene Farben wird box-shadow auf none gesetzt, daher verwendet das Beispiel das Medienfeature forced-colors, um sicherzustellen, dass ein Rand der entsprechenden Farbe vorhanden ist (in diesem Fall ButtonText).

HTML

html
<button class="button">Press me!</button>

CSS

css
.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /* Use a border instead, since box-shadow is forced to 'none' in forced-colors mode */
    border: 2px ButtonText solid;
  }
}

Ergebnis

Spezifikationen

Specification
Media Queries Level 5
# forced-colors

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch