color-adjust, forced-color-adjust et print-color-adjust - Propriétés CSS

Schéma de la syntaxe de color-adjust..

Sur les schémas, les liens donnent accès à une description plus précise des valeurs.

Description des propriétés color-adjust, forced-color-adjust et print-color-adjust.

Ces trois propriétés indiquent si le navigateur est autorisé à optimiser les couleurs. Actuellement cette optimisation concerne surtout l'impression, mais d'autres optimisations sont envisagées dans le futur, par exemple pour améliorer la lisibilité, même sur un écran.

color-adjust est une propriété résumée qui regroupe les propriétés suivantes :

• forced-color-adjust : optimisation des couleurs à l'écran.
• print-color-adjust : optimisation des couleurs à l'impression.

Nécessité d'une optimisation à l'écran.

• A l'écran, lorsque la couleur du texte et la couleur de l'arrière-plan sont très proches l'une de l'autre, l'optimisation peut améliorer la lisibilité.

Nécessité d'une optimisation à l'impression.

• A l'impression, les grands aplats de couleurs consomment beaucoup d'encre. Ils peuvent également trop imbiber le papier et provoquer des ondulations. C'est le cas si on essaie d'imprimer un texte blanc sur un fond noir. Le navigateur peut alors décider d'inverser les couleurs du premier-plan (texte) et de l'arrière-plan.
• Autre exemple : une impression du texte en gris sur une imprimante couleur utilise les trois cartouches d'encre rouge, verte et bleue, pour créer le gris, alors qu'une impression en noir n'aurait consommé que de l'encre noire.
• Problème de distinction des couleurs sur une impression en noir et blanc. Certaines couleurs peuvent être faciles à distinguer sur un écran en couleurs mais de luminosités trop proches sur une impression monochrome.

Interaction avec les paramètres du système d'exploitation.

Les systèmes d'exploitation proposent un mode "à contraste élevé". L'utilisateur peut décider d'opter pour ce mode. Cette option interagit avec l'effet des propriétés décrites sur cette page.

Mode d'affichage normal sous Windows

Mode d'affichage à fort contraste sous Windows

Remarque : l'activation du mode à fort contraste peut être testé avec une requête media query. Voir la directive @media, et plus particulièrement forced-colors.

En ce qui concerne l'impression, l'utilisateur peut généralement désactiver l'impression des images d'arrière-plan et des aplats de couleur. Les options choisies par l'utilisateur sont prioritaires : la propriété print-color-adjust n'a plus d'effet.

Valeurs pour color-adjust ou print-color-adjust.

• color-adjust: economy;

  Valeur par défaut. Le navigateur est autorisé à optimiser les couleurs en vue d'économiser l'encre ou d'améliorer la lisibilité.

• color-adjust: exact;

  Le navigateur doit imprimer les couleurs telles qu'elles sont définies par la feuille de styles. Cette valeur peut être utilisée lorsque les couleurs apportent une signification et n'ont pas uniquement un rôle esthétique.
  Cependant, l'utilisateur peut toujours décider, au moment d'imprimer, d'opter pour l'option contraire.

Valeurs pour forced-color-adjust.

• color-adjust: auto;

  Le navigateur suit les paramètres du système d'exploitation, en particulier, si le mode d'affichage à fort contraste est activé.

• color-adjust: none;

  Le navigateur n'optimise pas la lisibilité, même si un affichage à fort contraste a été demandé par le système d'exploitation. Cette valeur ne présente pas beaucoup d'intérêt, sauf dans des cas très particuliers. Le développeur doit alors lui-même écrire les styles pour s'adapter au mode d'affichage choisi, en utilisant par exemple une requête media query forced-colors.

• color-adjust: preserve-parent-color;

  Si la couleur de l'élément est héritée du parent (valeurs inherit ou currentColor), le navigateur ne modifie pas la couleurs pour optimiser la lisibilité. Si la couleur n'est pas héritée du parent, cette valeur est équivalente à 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;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété color-adjust.

Vous pouvez manipuler le simulateur en changeant le mode d'affichage du système (mode normal ou mode à fort contraste). Pour l'impression vous devrez afficher l'aperçu et constater si le deuxième cadre s'imprime sur un fond noir ou pas. Le troisième cadre aura une image de fond ou pas, à l'impression ou sur l'aperçu.

Compatibilité des navigateurs avec color-adjust.

La propriété color-adjust n'étant pas standardisée par le W3C, il est recommandé de l'utiliser avec précautions et de décliner les syntaxes avec les préfixes -moz- et -webkit-.

Remarques :

(1) Utilisez la propriété non standard -ms-hight-contrast-adjust.

(2) Avec le préfixe du navigateur -webkit-.
N'imprime pas l'arrière-plan du body mais uniquement de ses descendants.

(3) N'imprime pas l'arrière-plan du body mais uniquement de ses descendants.

1

Propriété
color-adjust

2

Propriété
forced-color-adjust

3

Propriété
print-color-adjust

Estimation de la prise en charge globale.

19%

78%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

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

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Historique des propriétés ...-color-adjust.

• Module CSS - Ajustement des couleurs - Niveau 1

  Concernant color-adjust. Introduction de trois propriétés pour gérer l'optimisation des couleurs, à l'écran ou à l'impression : color-adjust (déclarée obsolète), print-color-adjust et forced-color-adjust.
  

  21 Mai 2019

  Document de travail.

  

  10 Février 2022

  Candidat à la recommandation.

  

  

Ajustement des couleurs. Voir aussi...

L'ajustement des couleurs est traité dans un module spécifique de la norme CSS : module CSS - Ajustement des couleurs. Les définition suivantes sont décrites dans ce module :

Propriétés :

Fonctions :