color-adjust, forced-color-adjust and print-color-adjust - CSS Property

Syntax schema.

On the diagrams, 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.

• forced-color-adjust: initial; (auto) forced-color-adjust: inherit; forced-color-adjust: revert; forced-color-adjust: revertLayer; forced-color-adjust: unset;

  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.

Access the color-adjust property via a program

The code examples below are provided for the property forced-color-adjust but can easily be adapted for the property print-color-adjust.

Managing color optimization with Javascript

In other words, modify the value of color-adjust. We see that Javascript offers a syntax with the typical CSS notation, in kebab-case, and another syntax with the property name written in camel-case.

let el = document.getElementById('id'); el.style['forced-color-adjust'] = 'none'; // or let el = document.getElementById('id'); el.style.forcedColorAdjust = 'none';

With Javascript, read the value of forced-color-adjust.

The code works if the property has been assigned directly to the element itself via its style attribute, and not through a CSS selector.

let el = document.getElementById('id'); let value = el.style['forced-color-adjust']; // or let el = document.getElementById('id'); let value = el.style.forcedColorAdjust;

With Javascript, read the computed value of forced-color-adjust.

The computed value is the one that results from the assigned value, failing that from the inherited value, and if none of these values exist, from the initial value of the property, that is economy. The calculated value is always defined.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('forced-color-adjust');

With JQuery, change the value of forced-color-adjust.

JQuery is a library written in JavaScript. Its syntaxes are generally shorter than those of JavaScript.


$('#id').css('forced-color-adjust', 'none');
// or
$('#id').css('forcedColorAdjust', 'none');


With JQuery, read the computed value of forced-color-adjust.

let value = $('#id').css('forced-color-adjust');

Other code examples.

Other examples of Javascript and JQuery code for manipulating CSS are given on the page Javascript and CSS.

Test it yourself.

The buttons below apply the entered value to the property color-adjust and then display either the value as it was applied or the computed value. This second option allows you to see how the value of color-adjust is serialized.

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

3

Firefox

Chrome

3

Safari

Edge

3

Opéra

3

Chrome pour Androïd

3

Safari sur IOS

Samsung Internet

3

UC Browser pour Androïd

Androïd Brower

3

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

  Regarding color-adjust. 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:

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).