prefers-contrast

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Mai 2022⁩.

Die prefers-contrast CSS Media-Funktion wird verwendet, um zu erkennen, ob der Benutzer die Webinhalte mit einem niedrigeren oder höheren Kontrast dargestellt haben möchte.

Syntax

no-preference: Gibt an, dass der Benutzer dem System keine Präferenz mitgeteilt hat. Dieser Schlüsselwortwert wird im booleschen Kontext als falsch ausgewertet.
more: Gibt an, dass der Benutzer dem System mitgeteilt hat, dass er eine Benutzeroberfläche mit einem höheren Kontrast bevorzugt.
less: Gibt an, dass der Benutzer dem System mitgeteilt hat, dass er eine Benutzeroberfläche mit einem niedrigeren Kontrast bevorzugt.
custom: Gibt an, dass der Benutzer dem System die Verwendung eines bestimmten Satzes von Farben mitgeteilt hat und der durch diese Farben implizierte Kontrast weder more noch less entspricht. Dieser Wert entspricht der Farbpalette, die von Benutzern von forced-colors: active angegeben ist.

Benutzerpräferenzen

Verschiedene Betriebssysteme unterstützen solche Präferenzen, und Benutzeragenten werden wahrscheinlich auf die vom Betriebssystem bereitgestellten Einstellungen zurückgreifen.

Beispiele

Dieses Beispiel hat standardmäßig einen störend niedrigen Kontrast.

HTML

html

<div class="contrast">low contrast box</div>

CSS

css

.contrast {
  width: 100px;
  height: 100px;
  outline: 2px dashed black;
}

@media (prefers-contrast: more) {
  .contrast {
    outline: 2px solid black;
  }
}

Ergebnis

Spezifikationen

Specification
Media Queries Level 5 # prefers-contrast

Browser-Kompatibilität

Siehe auch

CSS forced-colors Media Query

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden