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 强制颜色媒体查询