CSS Media Features - forced-colors

CSS forced-colors media feature is used to check the user has activated a forced colors mode on their device. Forced colors mode is a setting on some operating systems and devices that allows users to choose a limited color palette for their interface.

Possible Values

none − This indicates that forced colors mode is not enabled.
active − This indicates that forced colors mode is enabled. The browser provides CSS system color keywords and sets the prefers-color-scheme media query value by considering the lightness of the Canvas system color, so that web developers can adapt their pages accordingly.

Syntax

forced-colors: none|active;

Following table lists properties affected by forced-color mode:

Property	Description
color	The color of the text.
background-color	The color of the background.
text-decoration-color	The color of the text decoration, such as underline or overline.
text-emphasis-color	The color of the text emphasis, such as a dot under a letter.
border-color	The color of the border.
outline-color	The color of the outline.
column-rule-color	The color of the column rule, which is the line that separates columns in a multi-column layout.
-webkit-tap-highlight-color	The color of the tap highlight, which is the visual cue that appears when the user taps on an element.
SVG fill attribute	The color of the fill of an SVG element.
SVG stroke attribute	The color of the stroke of an SVG element.

The following properties have unique behavior in forced colors mode:

Property	Forced Value
box-shadow	none
text-shadow	none
background-image	none (for non-url values)
color-scheme	light dark
scrollbar-color	auto

User agents (software like web browsers) determine the colors of elements based on their inherent characteristics, not on additional labels like ARIA roles. For instance, if you add the role "button" to a div element, it won't automatically change its color that is typically used for buttons.

CSS Forced Colors - None

The following example demonstrates the use of forced-colors: none media feature will make the body element black with a white background on all devices. However, the body element will be blue with a pink background on devices that do not have forced colors mode enabled −

Follow steps on this link to emulate forced colors mode and test this example.

<html>
<head>
<style>
   body {
      color: black;
      background-color: white;
   }
   @media (forced-colors: none) {
      body {
         color: blue;
         background-color: pink;
      }
   }
</style>
</head>
<body>
   <h1>CSS Media Feature forced-colors: none</h1>
   <p>This text will be displayed in black on devices with forced colors mode disabled and in blue on devices with forced colors mode enabled.</p>
</body>
</html>

CSS forced-color - active Value

The following example demonstrates that the use of forced-colors media features to change the color of the body element and the text inside of it on devices with forced colors mode enabled −

Follow steps on this link to emulate forced colors mode and test this example.

<html>
<head>
<style>
   body {
      color: blue;
      background-color: pink;
   }
   @media (forced-colors: active) {
      body {
      color: black;
      background-color: white;
      }
   }
</style>
</head>
<body>
   <h1>CSS Media Feature forced-colors: active</h1>
   <p>This text will be displayed in black on devices with forced colors mode disabled and in blue on devices with forced colors mode enabled.</p>
</body>
</html>