`forced-color-adjust` CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It's been available across browsers since September 2022.

The forced-color-adjust CSS property allows authors to opt certain elements out of forced colors mode. This then restores the control of those values to CSS.

Syntax

forced-color-adjust: auto;
forced-color-adjust: none;
forced-color-adjust: preserve-parent-color;

/* Global values */
forced-color-adjust: inherit;
forced-color-adjust: initial;
forced-color-adjust: revert;
forced-color-adjust: revert-layer;
forced-color-adjust: unset;

Values

This property is specified as one of the following keyword values:

auto: The element's colors are adjusted by the user agent in forced colors mode. This is the default value.
none: The element's colors are not automatically adjusted by the user agent in forced colors mode.
preserve-parent-color: In forced colors mode, if the color property inherits from its parent (i.e., there is no cascaded value or the cascaded value is currentColor, inherit, or another keyword that inherits from the parent), then it computes to the used color of its parent's color property. In all other cases, it behaves the same as none.

Usage notes

This property should only be used to makes changes that will support a user's color and contrast requirements. For example, if you become aware that the color optimizations made by the user agent result in a poor experience when in a high contrast or dark mode. Using this property would enable tweaking of the result in that mode to provide a better experience. It should not be used to prevent user choices being respected.

Formal definition

Initial value	auto
Applies to	all elements and text
Inherited	yes
Computed value	as specified
Animation type	Not animatable

Formal syntax

forced-color-adjust = 
  auto |
  none |
  preserve-parent-color

Examples

Preserving colors

In the example below the first box will use the color scheme that the user has set. For example in Windows High Contrast mode black scheme it will have a black background and white text. The second box will preserve the site colors set on the .box class.

By using the forced-colors media feature, you could add any other optimizations for forced color mode alongside the forced-color-adjust property.

CSS

.box {
  border: 5px solid grey;
  background-color: #cccccc;
  width: 300px;
  margin: 20px;
  padding: 10px;
}

@media (forced-colors: active) {
  .forced {
    forced-color-adjust: none;
  }
}

HTML

<div class="box">
  <p>This is a box which should use your color preferences.</p>
</div>

<div class="box forced">
  <p>This is a box which should stay the colors set by the site.</p>
</div>

Result

The following screenshot shows the image above in Windows High Contrast Mode:

The example above in high contrast mode shows the first box with a black background the second with the gray background of the CSS.

Specifications

Specification
CSS Color Adjustment Module Level 1 # forced-color-adjust-prop

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`forced-color-adjust`	89	79 12	113	75	No	89	113	63	No	15.0	89	No
`auto`	89	79	113	75	No	89	113	63	No	15.0	89	No
`none`	89	79	113	75	No	89	113	63	No	15.0	89	No
`preserve-parent-color`	106	106	No	92	No	106	No	72	No	20.0	106	No