CSS Media Features - prefers-contrast

CSS media feature prefers-contrast checks if the user wants the website to have more or less contrast. It's helpful for people with vision issues who may need to adjust the contrast to read content comfortably.

Possible Values

  • no-preference − The user hasn't specified a contrast preference.

  • more − The user prefers a higher contrast interface.

  • less − The user prefers a lower contrast interface.

  • custom − The user specified specific colors, and the contrast level doesn't match more or less. This is often used with forced-colors: active settings.

Syntax

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

CSS prefers-contrast - no-preference Value

The following example demonstrates that prefers-contrast: no-preference media feature changes the background-color of the p element to green and text color to white, otherwise the background color remain pink −

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

The following example demonstrates that prefers-contrast: more media feature changes the background-color of the p element to red and text color to white, otherwise the background color remain pink −

Follow steps on this link to emulate prefers contrast mode and test this example.
<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 Value

The following example demonstrates that prefers-contrast: less media feature changes the background-color of the p element to blue and text color to white, otherwise the background color remain pink −

Follow steps on this link to emulate prefers contrast mode and test this example.
<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 Value

he following example demonstrates that prefers-contrast: custom media feature changes the background-color of the p element to green and text color to white, otherwise the background color remain pink −

Follow steps on this link to emulate prefers contrast mode and test this example.
<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>
Advertisements