CSS 媒体功能 prefers-contrast 检查用户是否希望网站具有更多或更少的对比度。对于有视力问题的人来说，这很有帮助，他们可能需要调整对比度以舒适地阅读内容。
可能的值
- no-preference - 用户未指定对比度偏好。
- more - 用户更喜欢对比度更高的界面。
- less - 用户更喜欢对比度较低的界面。
- custom - 用户指定了特定颜色，并且对比度级别或多或少不匹配。这通常与强制颜色一起使用：forced-colors: active。
语法
prefers-contrast: no-preference|more|less|custom;
CSS prefers-contrast - no-preference 值
以下示例演示了媒体功能 prefers-contrast： no-preference 将 p 元素的背景颜色更改为绿色，将文本颜色更改为白色，否则背景颜色将保持为粉红色 -
<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 元素的背景颜色更改为红色，将文本颜色更改为白色，否则背景颜色将保持粉红色 -
按照此链接上的步骤模拟首选对比度模式并测试此示例。
<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 元素的背景颜色更改为蓝色，将文本颜色更改为白色，否则背景颜色将保持为粉红色 -
按照此链接上的步骤模拟首选对比度模式并测试此示例。
<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 元素的背景颜色更改为绿色，将文本颜色更改为白色，否则背景颜色将保持粉红色 -
按照此链接上的步骤模拟首选对比度模式并测试此示例。
<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>
