prefers-contrast

prefers-contrast CSS 媒体特性用于检测用户是否要求以较低或较高对比度呈现网页内容。

语法

no-preference: 表示用户尚未向系统告知其偏好。此关键字值在布尔上下文中被评估为 false。
more: 表示用户已通知系统，他们更喜欢具有更高对比度级别的界面。
less: 表示用户已通知系统，他们更喜欢具有较低对比度级别的界面。
custom: 表示用户已通知系统使用特定的一组颜色，并且这些颜色所隐含的对比度既不匹配 more 也不匹配 less。此值将匹配 forced-colors: active 用户指定的颜色调色板。

用户偏好

各种操作系统都支持此类偏好，并且用户代理可能会依赖操作系统提供的设置。

示例

此示例默认情况下具有令人讨厌的低对比度。

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

结果

规范

规范
媒体查询级别 5 # prefers-contrast

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

CSS forced-colors 媒体查询