CSS print-color-adjust Property

Description

The print-color-adjust property controls how user agents and printers handle the colors and the color-related output of a document when producing a printed representation or print preview. It serves as a hint from the author about whether the agent should try to preserve the author-specified color appearance (including backgrounds, images and foreground text colors) or allow the agent to alter those colors for printing constraints such as printer capabilities, user preferences, or ink-saving heuristics. Because printing involves device color profiles, drivers and user settings, this property does not force a particular printing pipeline but influences the decisions the user agent may make when laying out and rasterizing content for paper or PDF output.

In practice, print-color-adjust affects whether background fills and background images are retained or may be suppressed/converted by the printing pipeline, and whether color transformations (such as converting to grayscale or adjusting saturation/contrast for legibility) are applied. This interacts directly with properties that define the colors being printed - for example, the element’s text color (color) and its background styling (background-color and background-image). Because printers and print previews can apply their own optimizations, authors typically use the property on high-level elements (such as the document root or major layout containers) to indicate their preference for preserving visual fidelity when the document is printed.

When deciding whether to request color preservation, authors should weigh visual fidelity against practical considerations: forcing full-color printing can increase ink or toner usage and might conflict with user settings (for example, a user’s preference to print in grayscale to save resources). It’s also important to consider accessibility - ensuring sufficient contrast and clarity in either color-preserved or color-adapted renditions. For compatibility, some environments expose vendor-prefixed alternatives; for instance, WebKit-based engines have historically provided -webkit-print-color-adjust to achieve similar effects. Ultimately, print-color-adjust is a tool for authors to communicate printing preferences to the UA, but authors should not rely on it to override user or device constraints.

Definition

Initial value: economy
Applies to: all elements
Inherited: yes
Computed value: as specified
Animatable: no
JavaScript syntax: object.style.printColorAdjust

Syntax

print-color-adjust: economy | exact

Values

economyThe user agent is allowed to make adjustments to the element as it deems appropriate and prudent in order to optimize the output for the device it's being rendered for. For example, when printing, a browser might opt to leave out all background images and to adjust text colors to be sure the contrast is optimized for reading on white paper. This is the default.
exactThe element's content has been specifically and carefully crafted to use colors, images, and styles in a thoughtful and/or important way, such that being altered by the browser might actually make things worse rather than better. The appearance of the content should not be changed except by the user's request. For example, a page might include a list of information with rows whose background colors alternate between white and a light grey. Removing the background color would decrease the legibility of the content.

Example

HTML

<div class="container">

  <h1>Print Color Adjust  -  Demo</h1>

  <div class="cards">

    <section class="card no-adjust">

      <h2>Default (no adjustment)</h2>

      <p class="swatch">Background may not print</p>

    </section>

    <section class="card exact-adjust">

      <h2>Exact (forces colors)</h2>

      <p class="swatch">Background should print</p>

    </section>

  </div>

  <p class="instructions">Use Print Preview / Print to see difference.</p>

</div>

CSS

/* Layout */
* {
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f6f6f8;
  color: #222;
  padding: 24px;
}
.container {
  max-width: 900px;
  margin: 0 auto;
}
.cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.card {
  flex: 1 1 280px;
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.card h2 {
  margin: 0 0 8px 0;
  font-size: 16px;
}
.swatch {
  margin: 8px 0 0 0;
  padding: 18px;
  border-radius: 6px;
  color: white;
  font-weight: 600;
  text-align: center;
  /* vivid background to demonstrate printing */
  background: linear-gradient(135deg,#ff7a7a 0%, #ffb86b 50%, #ffdd57 100%);
}
/* Without print-color-adjust: browsers may omit background colors when printing */
.no-adjust .swatch {
  /* default behavior: no explicit print-color-adjust */
}
/* Force printers to preserve colors/graphics for this element */
.exact-adjust .swatch {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Print-specific tweaks */
@media print {
  body {
    background: white; /* page background */
    padding: 0.5in;
    color: #000;
  }
  .instructions { display: none; }
  .card { box-shadow: none; }
}

Result

Editor

Browser Support

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