CSS forced-color-adjust Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The forced-color-adjust property lets an author control whether the user agent may apply its forced-colors / high-contrast color mapping to an element. In environments where the user has requested a system-level high-contrast or forced-colors theme, the user agent commonly remaps author-specified color values to a small system palette to ensure legibility and respect the user’s preference. By using this property an author can prevent those automatic remappings for specific elements when preservation of the original colors is important (for example, a brand logo or a deliberately styled icon), or allow the UA to perform its normal adjustments where accessibility takes priority.

When the UA does perform forced-color adjustments it typically affects many visual properties: foreground and background painting, borders and outlines, and even decorative effects such as shadows and SVG fills. That means author decisions about color and background-color can be overridden by the UA’s palette in forced-colors mode unless the author has used the property to opt out. Similarly, effects like box-shadow and focus treatments such as outline can be affected by the UA’s recoloring; preserving an element’s exact appearance across forced-color modes may require preventing UA adjustments and then taking on responsibility for accessible styling yourself.

From an accessibility standpoint this property should be used carefully. Letting the UA map colors in forced-colors mode is usually the safest way to ensure text remains readable and focus indicators remain visible for users who rely on the system palette. Authors should only opt out for specific, well-justified cases (for example, preserving non-essential brand artwork) and when they can provide an accessible fallback: ensure contrast and visible focus, supply alternative text for critical imagery, and test with actual forced-colors/high-contrast settings. If you choose to preserve author colors, you’re taking responsibility for ensuring those elements remain perceivable and operable under the user’s chosen color scheme.

In practice, use this property selectively and test across real user-agent implementations. Consider whether preserving a specific visual detail is worth the trade-off in accessibility; often a better approach is to create alternate styling that respects the forced-colors palette while maintaining brand recognition. When debugging, inspect how UA-level recoloring is being applied and check how your preserved elements behave in keyboard navigation and screen-reader contexts so you don’t inadvertently remove essential contrast or focus cues.

Definition

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

<body>

  <main class="container">

    <h1>CSS forced-color-adjust demo</h1>



    <section class="card preserve">

      <h2>Preserve colors</h2>

      <p>This card uses <code>forced-color-adjust: none;</code> to keep the author's colors in forced-color modes.</p>

      <button class="btn">Primary action</button>

    </section>



    <section class="card adapt">

      <h2>Adapt to forced colors</h2>

      <p>This card uses <code>forced-color-adjust: auto;</code> so user/system colors are applied.</p>

      <button class="btn">Primary action</button>

    </section>



    <p class="note">Try enabling a high-contrast/forced-color mode to see the difference.</p>

  </main>

</body>

CSS

/* Base layout */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f3f4f6;
  color: #111827;
  padding: 40px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

h1 {
  grid-column: 1 / 3;
  margin: 0 0 8px;
  font-size: 1.25rem;
}

/* Card common */
.card {
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.05);
  background: #1e90ff;
  color: #fff;
}

/* Preserve  -  keep author colors even in forced-color mode */
.card.preserve {
  forced-color-adjust: none;
}
.card.preserve .btn {
  background: #fff;
  color: #1e90ff;
  border: 0;
}

/* Adapt  -  allow system forced colors to override */
.card.adapt {
  forced-color-adjust: auto;
  /* Use system color tokens that adapt to forced colors */
  background: Highlight;
  color: HighlightText;
  border: 2px solid ButtonText;
}
.card.adapt .btn {
  background: ButtonFace;
  color: ButtonText;
  border: 1px solid ButtonText;
}

/* Button common */
.btn {
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

/* Note */
.note {
  grid-column: 1 / 3;
  color: #6b7280;
  margin: 12px 0 0;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS forced-color-adjust property. Hover over a browser icon to see the version that first introduced support for this CSS property.