prefers-contrast

語法

no-preference

表示使用者未向系統表明任何偏好。此關鍵字值在布林上下文中求值為 false。

更多

表示使用者已通知系統，他們偏好具有更高對比度級別的介面。

更少

表示使用者已通知系統，他們偏好具有更低對比度級別的介面。

自定義

表示使用者已通知系統使用一組特定的顏色，並且這些顏色所隱含的對比度既不符合 more 也不符合 less。此值將匹配 forced-colors: active 使用者指定的調色盤。

使用者偏好

各種作業系統確實支援此類偏好，使用者代理可能會依賴作業系統提供的設定。

示例

此示例預設具有令人不適的低對比度。

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;
  }
}

結果

規範

瀏覽器相容性

另見

• CSS 強制顏色媒體查詢