CSS forced-color-adjust

The CSS forced-color-adjust property allows web authors to opt specific elements out of the color adjustments imposed by the browser when Forced Colors Mode is active.

Users with low vision or sensitivity to glare frequently activate a Forced Colors Mode on their operating system (such as Windows Contrast Themes or High Contrast Mode). When active, the user agent overrides author-defined colors across the page — replacing text colors, background colors, and borders with a restricted, user-selected high-contrast system color palette (such as Canvas, CanvasText, and Highlight).

While this automatic recoloring is necessary for accessibility across general text and navigation, it can also break the functionality of elements whose primary purpose depends on distinguishing specific colors (such as color pickers, e-commerce product color swatches, status indicators, or data visualizations). The forced-color-adjust property allows you to preserve author-defined colors on these critical elements while letting the rest of the page adhere to the user's high-contrast theme.

Syntax

Possible Values

auto

The default behavior. The element's colors (such as text, background, and borders) are automatically adjusted by the user agent to match the active forced colors palette.

none

The element opts out of forced colors mode. The browser preserves the author-defined colors on this element and its descendants rather than overriding them with system colors.

preserve-parent-color

If the element's parent was adjusted by forced colors mode, this value preserves the parent's computed color on the element rather than resetting it.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial

Represents the value specified as the property's initial value.

inherit

Represents the computed value of the property on the element's parent.

unset

This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Working Example

Accessibility Considerations

Users who enable Forced Colors Mode typically do so because they have difficulty reading standard web designs. For this reason, using forced-color-adjust: none should be reserved strictly for situations where color carries essential functional information:

• Legitimate Use Cases: Color selection palettes (e.g. choosing a t-shirt color), photo editing previews, status chips where color identity is essential, and syntax highlighters.
• Avoid on General Content: Do not use forced-color-adjust: none simply to preserve a corporate brand color or decorative theme on text, headings, or buttons. Doing so will make your content unreadable for users who rely on high contrast.
• Provide Boundaries: When preserving an element's background color with forced-color-adjust: none, ensure it includes a border using a system color like CanvasText so that it remains visible regardless of the user's chosen contrast scheme.

CSS Specifications

• The forced-color-adjust property is defined in CSS Color Adjustment Module Level 1 (W3C Candidate Recommendation Snapshot).

Browser Support

Browser support for CSS properties can vary, particularly for newer or experimental features. Check current browser compatibility before using a property in production, especially when supporting older browsers.

Initial Value

CSS properties have an initial value that applies when the property has not been explicitly set. The initial value is different from the value inherited from a parent element and may vary between properties.

Inheritance

Some CSS properties inherit their computed value from their parent element by default, while others do not. The inherit, initial, unset, and revert keywords can also be used to control how a property gets its value.

Vendor Prefixes

Most modern CSS properties use the standard, unprefixed syntax. Vendor-prefixed properties such as -webkit- are mainly relevant to older browser versions or specific features and should only be used when required by your browser support targets.