Print-color-adjust - Property CSS

print-color-adjust

Summary of characteristics of the print-color-adjust property

Quick description
Specifies whether the browser should optimize colors when printing the document.
Status
Standard
Usable for
HTML
Predefined values
economy | exact
Percentages
Not applicable.
Initial value
economy
Inherited by default
Yes.
Animation type
Discrète : during an animation, the print-color-adjust property passes from one value to another without transition.
W3C Module
CSS Color Adjustment Module
References (W3C)
Document status: CR (Candidate Recommendation)

print-color-adjust - Syntax DiagramSyntax diagram of the print-color-adjust CSS property. economy economy exact exactprint-color-adjust:;print-color-adjust:;
Syntax diagram of the print-color-adjust property.
The links in the diagram provide more details about the values.

Description of the print-color-adjust property.

print-color-adjust indicates whether the browser is allowed to optimize colors at print time. This optimization can have the following benefits:

  • Save ink. Large flat areas of color consume a lot of ink. The browser can then decide to invert the colors of elements that have a dark background (inverted the colors of the foreground (text) and background.)
    Another example: a print of the text in gray on a color printer uses all three cartridges red, green and blue ink, to create gray, whereas a black print would have consumed only black ink.
  • Improve readability, especially on black and white printing. Some colors may be easy to distinguish on a color screen but too close on monochrome printing.

The user can usually disable the printing of background images and solid colors from the print options. In this case, the options chosen by the user take precedence: the print-color-adjust property no longer has any effect.

The color-adjust property was envisioned as a shortcut property that would group all properties optimization. Its standardization has been deferred for the time being.

Values for print-color-adjust.

  • print-color-adjust: economy;

    Default. The browser is allowed to optimize colors to save ink or improve readability. For example, solid colors will not be printed.

  • print-color-adjust: exact;

    The browser must print the colors as defined by the style sheet. This value can be used when colors bring meaning and not only have an aesthetic role.
    However, the user may decide, at the time of printing, to opt for the opposite option.

  • print-color-adjust: initial; (economy) print-color-adjust: inherit; print-color-adjust: revert; print-color-adjust: revertLayer; print-color-adjust: unset;

    See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animation of print-color-adjust.

Animating print-color-adjust is technically possible but of little interest insofar as the effect of this property is only visible when printed.

Interactive example.

To see the effect of optimization, you will need to either print this page or preview it before printing. You'll find that, if color optimization is requested...

  • The first frame will print with a different text color (for better readability). Indeed, it is almost unreadable because of the foreground and background colors that are too close.
  • The second frame will print with black text on a white background (inversion of colors to save ink).
  • The third frame will not have a background image.
print-color-adjust :
-webkit-print-color-adjust :
This text is written in a color very close to that of the background.
When printing, the color of the text will be changed to improve readability.
This text, written on a black background, consumes a lot of ink when printed.
Show preview to see the effect of the print-color-adjust property.
The background of this element has an image. Show preview to see the effect of the print-color-adjust property.

Browsers compatibility.

The print-color-adjust property is pretty much well supported by browsers, but there are a lot of peculiarities.

Column 1
Support for the print-color-ajust property that decides whether colors should be optimized for printing.

Notes:

(2) With the browser prefix: -webkit-.
Does not print the background of the body but only of its descendants.

(3) Does not print the background of the body but only of its descendants.

1
print-color-adjust
property
Estimated overall support.
96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Safari

Safari sur IOS

Opéra Mobile

2

QQ Browser

Baidu Browser

Chrome

2

Edge

2

Firefox

Opéra

3

Chrome pour Androïd

2

Samsung Internet

2

Androïd Brower

2

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse

print-color-adjust property historic.

See also, about color adjustment.

The W3C publishes its specifications in modules. The print-color-adjust property is part of the CSS Color Adjustment Module module. The following definitions are also described in this module.

Properties:

✗
color-adjust
Whether or not allows the browser to optimize colors.
color-scheme
Langue française
Defines whether an element should be displayed in dark mode or light mode. These two modes are generally supported by all operating systems.
⚠
forced-color-adjust
Defines how colors are adjusted.

Functions:

light-dark()
Langue française
Allows you to choose between two colors to adapt the appearance of an element to the color sheme used (light or dark).