CSS 媒体特性 - prefers-contrast

CSS 媒体特性prefers-contrast 检查用户是否希望网站具有更高或更低的对比度。这对有视力问题的人很有帮助，他们可能需要调整对比度才能舒适地阅读内容。

可能的值

no-preference − 用户没有指定对比度偏好。
more − 用户更喜欢高对比度的界面。
less − 用户更喜欢低对比度的界面。
custom − 用户指定了特定的颜色，对比度级别与更多或更少不匹配。这通常与forced-colors: active设置一起使用。

语法

prefers-contrast: no-preference|more|less|custom;

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS prefers-contrast - no-preference 值

以下示例演示了prefers-contrast: no-preference媒体特性如何将 p 元素的背景颜色更改为绿色，文本颜色更改为白色，否则背景颜色保持粉红色 -

Open Compiler

<html>
<head>
<style>
   p {
      width: 200px;
      background-color: pink;
   }
   @media (prefers-contrast: no-preference) {
      p {
         background-color: green;
         color: white;
      }
   }
</style>
</head>
<body>
   <p>This is an example of the prefers-contrast: no-preference media feature.</p>
</body>
</html>

CSS prefers-contrast - more 值

以下示例演示了prefers-contrast: more媒体特性如何将 p 元素的背景颜色更改为红色，文本颜色更改为白色，否则背景颜色保持粉红色 -

按照此链接上的步骤模拟 prefers contrast 模式并测试此示例。

Open Compiler

<html>
<head>
<style>
   p {
      width: 200px;
      background-color: pink;
   }
   @media (prefers-contrast: more) {
      p {
         background-color: red;
         color: white;
      }
   }
</style>
</head>
<body>
   <p>This is an example of the prefers-contrast: more media feature.</p>
</body>
</html>

CSS prefers-contrast - less 值

以下示例演示了prefers-contrast: less媒体特性如何将 p 元素的背景颜色更改为蓝色，文本颜色更改为白色，否则背景颜色保持粉红色 -

按照此链接上的步骤模拟 prefers contrast 模式并测试此示例。

Open Compiler

<html>
<head>
<style>
   p {
      width: 200px;
      background-color: pink;
   }
   @media (prefers-contrast: less) {
      p {
         background-color: blue;
         color: white;
      }
   }
</style>
</head>
<body>
   <p>This is an example of the prefers-contrast: less media feature.</p>
</body>
</html>

CSS prefers-contrast - custom 值

以下示例演示了prefers-contrast: custom媒体特性如何将 p 元素的背景颜色更改为绿色，文本颜色更改为白色，否则背景颜色保持粉红色 -

按照此链接上的步骤模拟 prefers contrast 模式并测试此示例。

Open Compiler

<html>
<head>
<style>
   p {
      width: 200px;
      background-color: pink;
   }
   @media (prefers-contrast: custom) {
      p {
         background-color: green;
         color: white;
      }
   }
</style>
</head>
<body>
   <p>This is an example of the prefers-contrast: custom media feature.</p>
</body>
</html>

打印页面