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.
Das prefers-contrast CSS Medienmerkmal wird verwendet, um zu erkennen, ob der Benutzer angefordert hat, dass der Webinhalt mit einem niedrigeren oder höheren Kontrast dargestellt wird.
Syntax
no-preference-
Gibt an, dass der Benutzer kein Präferenz an das System übermittelt hat. Dieser Schlüsselwortwert wird im Booleschen Kontext als falsch ausgewertet.
more-
Gibt an, dass der Benutzer dem System mitgeteilt hat, dass er eine Schnittstelle mit höherem Kontrast bevorzugt.
less-
Gibt an, dass der Benutzer dem System mitgeteilt hat, dass er eine Schnittstelle mit niedrigerem Kontrast bevorzugt.
custom-
Gibt an, dass der Benutzer dem System eine spezifische Farbpalette mitgeteilt hat und der durch diese Farben implizierte Kontrast weder
morenochlessentspricht. Dieser Wert entspricht der Farbpalette, die von Benutzern vonforced-colors: activeangegeben wurde.
Benutzerpräferenzen
Verschiedene Betriebssysteme unterstützen solche Präferenzen, und es ist wahrscheinlich, dass Benutzeragenten auf die vom Betriebssystem bereitgestellten Einstellungen zurückgreifen.
Beispiele
Dieses Beispiel hat standardmäßig einen ärgerlich niedrigen Kontrast.
HTML
<div class="contrast">low contrast box</div>
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 Medienabfrage