CSS 媒体功能 - prefers-contrast

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>

打印本页