print-color-adjust | CSS-Tricks

CSS Almanac → Properties → P → print-color-adjust

Sunkanmi Fafowora on Jul 14, 2022

The print-color-adjust CSS property is sort of like a cost-cutting measure when it comes to printing a webpage. You know how you can literally print a webpage on a piece of paper? That’s what we’re talking about. By applying print-color-adjust, we give the browser a “hint” for how to handle colors when printing, such as ignoring dark backgrounds, that can save users the cost of expensive ink.

.element {
  print-color-adjust: economy;
}

According to the spec, print-color-adjust replaces the color-adjust property, which has been deprecated. Originally, color-adjust was designed to be a shorthand for a collection of “performance-motivated” color adjust properties, but print-color-adjust was the only supported constituent property. Note that there is also a version named webkit-print-color-adjust supported by Chrome and Safari

Why this matters

You might be thinking something along the lines of, “Wait, isn’t red just red?” And, yes, that is absolutely true. What’s the point of optimizing or adjusting a color that’s true no matter where it is displayed?

The point is that browsers already tend to make these determinations and adjust colors on their own, like outputting a slightly different red if the user agent is incapable of rendering a specific hex because of the screen quality of some other factor. The property is effectively saying to the browser, “Hey, I’d like you to use this color, but it’s cool if you can’t and want apply your best alternative for the situation.” Or, conversely, it can instruct the browser to exactly match the color at any and all costs.

Why does this matter? The spec describes a use case where maintaining the zebra striping of a styled table on a printed page could help legibility:

For example, a mapping website offering printed directions might “zebra-stripe” the steps in the directions, alternating between white and light gray backgrounds. Losing this zebra-striping and having a pure-white background would make the directions harder to read with a quick glance when distracted in a car.

Comparing print-adjust-color exact and economy, side-by-side.

Syntax

print-color-adjust: [economy | exact];

Initial: economy
Applies: all elements
Inherited: yes
Computed value: specified keyword
Animation type: discrete

Values

/* Keyword values */
print-color-adjust: economy;
print-color-adjust: exact;

/* Global values */
print-color-adjust: inherit;
print-color-adjust: initial;
print-color-adjust: revert;
print-color-adjust: revert-layer;
print-color-adjust: unset;

economy (initial value): This value allows the browser to make adjustments to the color and styling of an element where it decides it needs to, whether it’s to improve legibility, replace a color a device is incapable of displaying, or some other factor. Note that this is the default value and, even if the property is not applied, this is how browsers will behave.
exact: This value instructs the browser to match a color at all costs for the sake of preserving the declared styling. It would be used to call out styles that are “important” or “significant” to the element.

Note that the default usage of economy — whether the property is called or not — suggests that print-color-adjust is designed to provide a signal to browsers indicating styles that are important enough to preserve. The browser makes the final judgment.

Demo

Here, we have some sections with a heading, a paragraph, and some colors. The colors on the text are intentionally illegible to portray how the browser would fix it when printed. print-color-adjust is set to its default economy value. But let’s compare a couple of screenshots showing the difference between that and if we had declared exact colors instead.

Specification

The print-color-adjust property is defined in the CSS Color Adjustment Module Level 1 specification, which is in Editor’s Draft status at the time of this writing. This means it is yet to be endorsed by the W3C and could be updated, changed, or even dropped in later revisions. As such, this property is not production-ready and is considered experimental.