CSS forced-color-adjust Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The forced-color-adjust CSS property is used to control how web browsers handle user-specified color preferences in the rendering of a web page. It allows web developers to specify whether or not certain CSS properties, such as background-color and color, should override user-defined color settings. This property is particularly useful for ensuring accessibility and maintaining design integrity, as it enables developers to prevent unintended color changes that may affect readability or visual aesthetics when users have set custom color schemes or high-contrast modes in their browsers. By using "forced-color-adjust," developers can strike a balance between accommodating user preferences and maintaining consistent design elements on their websites.

Initial value: auto
Applies to: all elements and text
Inherited: yes
Computed value: as specified
Animatable: no
JavaScript syntax: object.style.forcedColor-Adjust

Syntax

forced-color-adjust: auto | none

Values

autoThe element's colors are adjusted by the user agent in forced colors mode. This is the default.
noneThe element's colors are not automatically adjusted by the user agent in forced colors mode.

Example

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>

CSS

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

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

Result

Editor