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.
economy
exact
economy | exact
There are a number of reasons a browser might wish to deviate from the specified appearance, such as:
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> </div>
Specification | Status | Comment |
---|---|---|
CSS Color Module Level 4 The definition of 'color-adjust' in that specification. | Working Draft | Initial definition. |
Initial value | economy |
---|---|
Applies to | all elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | per grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 49
|
No | 48 | No | 15
|
6
|
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | No | 48 | ? | ? | ? |
color
, background-color
, border-color
, outline-color
, text-decoration-color
, text-emphasis-color
, text-shadow
, caret-color
, and column-rule-color
background-image
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/color-adjust