Nuestros voluntarios aún no han traducido este artículo al Español. ¡Únete a nosotros y ayúdanos a traducirlo!
También puedes leer el artículo en English (US).

The color-adjust CSS property sets what, if anything, the user agent may do to optimize the appearance of the element on the output device. By default, the browser is allowed to make any adjustments to the element's appearance it determines to be necessary and prudent given the type and capabilities of the output device.

In the example above, the text color, #411, is so dark that it's difficult to read given the black background-color. Depending on the browser, its configuration, and the device on which the example is being viewed, the browser may opt to remove the black background or change the text color in order to improve contrast and make the text more legible.


color-adjust: economy;
color-adjust: exact;

The color-adjust property's value must be one of the following keywords.


The user agent is allowed to make adjustments to the element as it deems appropriate and prudent in order to optimize the output for the device it's being rendered for. For example, when printing, a browser might opt to leave out all background images and to adjust text colors to be sure the contrast is optimized for reading on white paper. This is the default.
The element's content has been specifically and carefully crafted to use colors, images, and styles in a thoughtful and/or important way, such that being altered by the browser might actually make things worse rather than better. The appearance of the content should not be changed except by the user's request. For example, a page might include a list of information with rows whose background colors alternate between white and a light grey. Removing the background color would decrease the legibility of the content.

Formal syntax

economy | exact

Usage notes

There are a number of reasons a browser might wish to deviate from the specified appearance, such as:

  • The content uses text and background colors that will be too similar on the output device for legibility purposes.
  • If the output device is a printer, and to save ink, dark or extremely dense background images might be removed.
  • When printing a page, the browser might want to replace light-colored text on a dark background with dark text on a white background.

Any options the user agent offers the user to allow them to control the use of color and images will take priority over the value of color-adjust. In other words, there isn't any guarantee that color-adjust will do anything. Not only can the user override the behavior, but each user agent is allowed to decide for itself how to handle color-adjust in any given situation.


In this example, a box is shown which uses a background-image and a translucent linear-gradient() function atop a black background color to have a dark blue gradient behind medium red text. For whatever reason, this is the desired appearance in any rendering environment, including on paper, so we also use color-adjust: exact to tell the browser not to make color or style adjustments to the box when rendering it.


.my-box {
  background-color: black;
  background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));
  color: #900;
  width: 15rem;
  height: 6rem;
  text-align: center;
  font: 24px "Helvetica", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  color-adjust: exact;


<div class="my-box">
  <p>Need more contrast!</p>



Specification Status Comment
CSS Color Module Level 4
The definition of 'color-adjust' in that specification.
Working Draft Initial definition.
Initial valueeconomy
Applies toall elements
Computed valueas specified
Animation typediscrete
Canonical orderper grammar

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
color-adjustChrome Full support 49
Full support 49
Prefixed Implemented with the vendor prefix: -webkit-
Edge No support NoFirefox Full support 48IE No support NoOpera Full support 15
Full support 15
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 6
Full support 6
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 49
Full support 49
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 49
Full support 49
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile No support NoFirefox Android Full support 48Opera Android ? Safari iOS ? Samsung Internet Android ?


Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

Etiquetas y colaboradores del documento

Colaboradores en esta página: mdnwebdocs-bot, mfuji09, ddbeck, XPiRED, wbamberg, Siilwyn, Sheppy
Última actualización por: mdnwebdocs-bot,