CSS forced-color-adjust Property

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

<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>
.box {
  border: 5px solid grey;
  background-color: #ccc;
  width: 300px;
  margin: 20px;
  padding: 10px;
}

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

Browser Support

The following table will show you the current browser support for the CSS forced-color-adjust property.

Desktop
Edge Chrome Firefox Opera Safari
798911375x
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
8911363x1589

Last updated by CSSPortal on: 31st December 2023