CSS print-color-adjust Property

This property controls whether the browser can alter colors and background images to save ink when the page is printed.

selector { print-color-adjust: exact; }

economy	Allows the browser to optimize or omit colors and backgrounds to save ink based on the device settings.
exact	Forces the browser to render background colors and images exactly as defined in the CSS.

Code Examples

A basic example forcing a dark header background to appear on an invoice when printed.

@media print {
  .invoice-header {
    background-color: #222222;
    color: #ffffff;
    print-color-adjust: exact;
  }
}

An advanced example using JavaScript to set the print-color-adjust property right before the print dialog opens.

<div id="report-chart" style="background-color: #f0f0f0; padding: 20px;">
  <p>Data Visualization Content</p>
</div>
<button onclick="prepPrint()">Print Full Quality</button>

<script>
function prepPrint() {
  const chart = document.getElementById("report-chart");
  chart.style.printColorAdjust = "exact";
  chart.style.border = "1px solid #000000";
  window.print();
}
</script>

Pro Tip

You can use JavaScript to detect if a user is about to print and dynamically apply the "exact" value based on a checkbox in your web app. This gives the power to the user, letting them decide if the print job is worth the extra ink.

Deep Dive

Think of this property as a permissions slip for the printer. By default, browsers act like a frugal accountant, stripping away background colors to save the user money on expensive ink. This is the "economy" setting. When you set it to "exact", you are telling the browser that the colors are not just decoration, they are vital information. It is like telling a photocopier not to skip the subtle shades in a document. It ensures that your carefully picked background colors and images actually make it onto the physical paper exactly how they look on the monitor.

Best Practices

Only apply "exact" to specific elements that require it, like colorful charts, heat maps, or branding elements. Applying it globally to the entire body can frustrate users who are trying to save ink. Always wrap this property inside a "@media print" block to keep your screen-viewing CSS clean and focused.

Common Pitfalls

The most common mistake is forgetting that user printer settings can still override this. If a user has their printer hardware set to "Grayscale Only", your "exact" setting won't magically make color ink appear. Also, keep in mind that older browsers required the "-webkit-" prefix to work.

Accessibility

When forcing colors with "exact", ensure your text contrast remains high. If a printer fails to produce the background color correctly but your text is white, the user ends up with white text on white paper. Always provide a fallback high-contrast style for printing to ensure the information is readable regardless of ink levels.

Dev Data Table: print-color-adjust property

default	economy
animatable	no
inherited	yes
experimental	no
year_intro	2011
year_standard	2022
js_syntax_1	element.style.printColorAdjust = "exact";
js_syntax_2	element.style.setProperty("print-color-adjust", "exact");
js_note	Target this property to give users a "High Quality Print" toggle in your application UI.
browsers	{ "Chrome": 94, "Edge": 94, "Firefox": 97, "Safari": 15.4, "Opera": 80, "Chrome Android": 94, "Safari on iOS": 15.4, "Samsung Internet": 16, "Opera Mobile": 66 }