CSS print-color-adjust

The CSS print-color-adjust property gives web page authors control over whether a browser or printing system may modify colors and backgrounds on an element when the page is printed.

By default, most browsers apply an "economy" mode when printing — stripping background colors and images to save ink. The print-color-adjust property lets you override this behavior and explicitly signal that an element's colors are important and must be reproduced faithfully in print.

This is particularly useful for elements where background color carries essential meaning, such as colored table rows in a report, status badges, colored charts, or print-specific branded headers.

Syntax

Possible Values

economy: The default value. The browser (or print engine) may modify the element's colors and remove background colors or images to optimize the output for the printer — typically to save ink. The specific adjustments are left to the user agent.
exact: Instructs the user agent to reproduce colors and backgrounds exactly as specified by the author's CSS. The browser must not make any adjustments to the element's appearance for print.

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

Initial Value: economy
Applies To: All elements
Inherited?: Yes
Media: Visual
Animation Type: Not animatable (discrete)

Example Code

Working Example

<!DOCTYPE html>
<title>Example</title>
<style>
body {
  font-family: sans-serif;
  padding: 10px;
}
.print-demo {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.card {
  padding: 16px;
  border-radius: 8px;
  width: 160px;
  text-align: center;
  font-weight: bold;
  color: white;
  font-size: 14px;
}
.card-exact {
  background-color: #7c3aed;
  print-color-adjust: exact;
}
.card-economy {
  background-color: #059669;
  print-color-adjust: economy;
}
.label {
  display: block;
  color: #555;
  font-weight: normal;
  font-size: 12px;
  margin-top: 6px;
}
</style>

<p>These boxes demonstrate <code>print-color-adjust</code>. When printed, the purple box retains its background color; the green box may have it removed to save ink.</p>

<div class="print-demo">
  <div>
    <div class="card card-exact">print-color-adjust: exact</div>
    <span class="label">Background preserved when printing</span>
  </div>
  <div>
    <div class="card card-economy">print-color-adjust: economy</div>
    <span class="label">Background may be removed when printing</span>
  </div>
</div>

View Output Full Screen Preview

Browser Compatibility Note

The print-color-adjust property is the standardized successor to the non-standard -webkit-print-color-adjust vendor-prefixed property used in WebKit/Blink browsers. For broad compatibility, you may need to specify both:

CSS Specifications

The print-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.