forced-color-adjust

Syntax

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

Parameters

Examples

.brand-logo {
  forced-color-adjust: none;
}

@media (forced-colors: active) {
  .card { border: 2px solid ButtonText; }
}

Browser Support

Tailwind Equivalent

You can achieve similar results in Tailwind CSS using the following utility classes:

No direct utility. Use arbitrary CSS or @media (forced-colors: active) in Tailwind v4 CSS

Related Functions

• color-contrast()— The color-contrast() function selects the color with the highest contrast ratio against a base color from a list of candidates.
• accent-color— The accent-color property sets the accent color for UI controls like checkboxes, radio buttons, range sliders, and progress bars.
• caret-color— The caret-color property sets the color of the text insertion cursor (caret) in editable elements like inputs and textareas.
• color-scheme— The color-scheme property declares which color schemes an element supports (light, dark, or both), affecting UA default styles.
• print-color-adjust— The print-color-adjust property controls whether the browser may adjust colors for optimal print output or screen readability.
• text-decoration-color— The text-decoration-color property sets the color of text decorations such as underlines, overlines, and line-throughs.

Frequently Asked Questions