Candidate Recommendation Snapshot · css-color-adjust

CSS Color Adjustment

4 properties defined by this specification, all known to at least one browser .

Modern CSS features in this module: print-color-adjust.

Read the Editor's Draft ↗ W3C Candidate Recommendation Snapshot ↗

Each feature in detail

`color-adjust`

Property Deprecated

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'print-color-adjust'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: see individual properties
Applies to: see individual properties
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Canonical order: per grammar
Animation type: see individual properties
Longhands: print-color-adjust

Browser support

First browser version supporting color-adjust
Chrome	No
Edge	No
Firefox	48
Safari	15.4
Chrome Android	No
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗

`color-scheme`

Property Baseline: widely availablesince August 2024

MDN The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in. User agents change the following aspects of the UI chrome to match the used color scheme:

Live preview Example from MDN

#example-element {
  width: 80%;
  height: 50%;
}

<section class="default-example container" id="default-example">
  <textarea id="example-element">Text Area</textarea>
</section>

Syntax

normal | [ light | dark | <custom-ident> ]+ && only?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: normal
Applies to: all elements and text
Inherited: yes
Percentages: n/a
Computed value: the keyword normal, or a color scheme support
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting color-scheme
Chrome	81
Edge	81
Firefox	96
Safari	13
Chrome Android	81
Safari iOS	13

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`forced-color-adjust`

Property Baseline: widely availablesince March 2025

MDN The forced-color-adjust CSS property allows authors to opt certain elements out of forced colors mode. This then restores the control of those values to CSS.

Live preview Example from MDN

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

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

<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>

Syntax

auto | none | preserve-parent-color

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: all elements and text
Inherited: yes
Percentages: n/a
Computed value: as specified
Canonical order: per grammar
Animation type: not animatable

Browser support

First browser version supporting forced-color-adjust
Chrome	89
Edge	79
Firefox	113
Safari	No
Chrome Android	89
Safari iOS	No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`print-color-adjust`

Property Baseline: newly availablesince May 2025 Modern CSS: print-color-adjust

MDN The print-color-adjust CSS property sets what, if anything, the user agent may do to optimize the appearance of the element on the output device. By default, the browser is allowed to make any adjustments to the element's appearance it determines to be necessary and prudent given the type and capabilities of the output device.

Live preview Example from MDN

.my-box {
  background-color: black;
  background-image: linear-gradient(rgb(0 0 180 / 50%), rgb(70 140 220 / 50%));
  color: #990000;
  width: 15rem;
  height: 6rem;
  text-align: center;
  font:
    24px "Helvetica",
    sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  print-color-adjust: exact;
}

<div class="my-box">
  <p>Need more contrast!</p>
</div>

Syntax

economy | exact

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: economy
Applies to: all elements
Inherited: yes
Percentages: N/A
Computed value: specified keyword
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting print-color-adjust
Chrome	136
Edge	136
Firefox	97
Safari	15.4
Chrome Android	136
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗