Color-adjust, forced-color-adjust et print-color-adjust - CSS Property

Syntax schema.

On the diagram, the links give access to a more precise description of the values.

Description of the color-adjust, forced-color-adjust et print-color-adjust property.

These three properties indicate whether the browser is allowed to optimize colors. Currently this optimization mainly concerns printing, but other optimizations are planned in the future, for example, to improve readability, even on a screen.

color-adjust is a shorthand property which includes the following properties:

• forced-color-adjust: On-screen color optimization.
• print-color-adjust: Color optimisation in print.

Need for on-screen optimization.

• On the screen, when the text color and background color are very close to each other, optimization can improve readability.

Need for print optimization.

• When printed, large flat areas of color consume a lot of ink. They can also soak the paper and cause ripples. This is the case if you try to print white text on a black background. The browser can then decide to invert the colors of the foreground (text) and background.
• Another example: a print of the text in gray on a color printer uses the three red, green and blue ink cartridges to create gray, whereas a black print would have consumed only black ink.
• Color distinction problem on a black and white print. Some colors may be easy to distinguish on a color screen, but too close in brightness on monochrome printing.

Interaction with operating system settings.

Operating systems offer a "high contrast" mode. The user can decide to opt for this mode. This option interacts with the effect of the properties described on this page.

Normal display mode on Windows

High-contrast display mode on Windows

Note: Enabling High Contrast Mode can be tested with a media query. See the directive @media , and more especially forced-colors.

When it comes to printing, the user can usually disable the printing of background images and solid colors. The options chosen by the user take precedence: the print-color-adjust property has no longer any effect.

Values for color-adjust or print-color-adjust.

• color-adjust: economy;

  Default. The browser is allowed to optimize colors to save ink or improve readability.

• 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 always decide, at the time of printing, to opt for the opposite option.

Values for forced-color-adjust.

• color-adjust: auto;

  The browser follows the operating system settings, especially if the high-contrast display mode is enabled.

• color-adjust: none;

  The browser does not optimize readability, even if a high-contrast display has been requested by the operating system. This value is not of much interest, except in very special cases. The developer must then write the styles himself to adapt to the chosen display mode, for example by using a Media Query query forced-colors.

• color-adjust: preserve-parent-color;

  If the element's color is inherited from the parent (inherit or currentColor), the browser does not change the color to optimize readability. If the color is not inherited from the parent, this value is equivalent to none.

Values ​​common to all properties:

Simulator.

You can manipulate the simulator by changing the system's display mode (normal mode or high-contrast mode). For printing, you will need to preview and see if the second frame is printed on a black background or not. The third frame will have a background image or not, when printed or on the preview.

Browser support (compatibility).

The color-adjust property is not standardized by the W3C, so it is recommended that it be used with caution and to decline syntaxes with the prefixes -moz- and -webkit-.

Notes:

(1) Use the non-standard -ms-hight-contrast-adjust property.

(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

color-adjust
property

2

forced-color-adjust
property

3

print-color-adjust
property

Estimated overall support.

19%

78%

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1

Baidu Browser

QQ Browser

Opéra Mobile

2

Firefox

Chrome

2

Safari

Edge

2

Opéra

3

Chrome pour Androïd

2

Safari sur IOS

Samsung Internet

2

UC Browser pour Androïd

Androïd Brower

2

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

color-adjust properties historic.

• CSS Color Adjustment Module Level 1

  Introduction of three properties to manage color optimization, on screen or in print: color-adjust (deprecated), print-color-adjust and forced-color-adjust.
  

  May 21, 2019

  Working Draft.

  

  February 10, 2022

  Candidate Recommendation.

  

  

Color adjustment. See also...

Color adjustment is handled in a specific module of the CSS standard: CSS Color Adjustment Module. The following definitions are described in this module:

Properties:

color-scheme

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.

print-color-adjust

Specifies whether the browser should optimize colors when printing the document.

Functions:

light-dark()

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