CSS print-color-adjust Property

Description

The print-color-adjust CSS property is used to control how colors are adjusted when a web page is printed. It is particularly useful for ensuring that the printed version of a page maintains color accuracy and legibility. By setting this property to values like "exact" or "economy," web developers can specify whether they want the colors to be adjusted to match the original screen display as closely as possible or to be optimized for economical printing, which may result in color conversions or simplifications to save ink or toner. This property helps designers fine-tune the printed output of web content, ensuring it meets their intended visual standards while being mindful of print resource conservation.

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="my-box">

  <p>Need more contrast!</p>

</div>

CSS

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

Result

Editor