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 元素的背景顏色更改為紅色，文字顏色更改為白色，否則背景顏色保持粉紅色 -

按照此連結上的步驟模擬 prefers contrast 模式並測試此示例。

<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 模式並測試此示例。

<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 模式並測試此示例。

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

列印頁面