この記事は翻訳作業中です。

CSS の color-adjust プロパティは、ユーザーエージェントが出力端末への要素の表示方法を最適化するために何をするかをウェブ作者が制御することができるものです。既定では、ブラウザーは出力端末の種類と機能を考慮して、要素の外観を必要に応じて慎重に調整することが許可されています。

上記の例では、 color#411 のテキストが暗すぎて、指定された blackbackground-color では読むのが難しくなっています。この例を見るブラウザーの設定や端末によっては、ブラウザーは黒い背景を外すか、テキストの色を変更するかして、コントラストを高めてテキストをより読みやすくすることがあります。

構文

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

color-adjust プロパティの値は、以下のキーワードのうちの一つでなければなりません。

economy
ユーザーエージェントは、適切で賢明であると考えられるときは、要素に調整を行い、表示する端末のために出力を最適化することができます。例えば、印刷時にブラウザーはすべての背景画像を除去し、テキストの色を調整して、コントラストが白い紙の上で読むために最適化することを確実にすることがあります。これが既定値です。
exact
要素の内容が色、画像、スタイルを思慮深く、または重要な方法で使用して、具体的に慎重に作成されており、ブラウザーによって変更されると良くなるのではなく悪くなる可能性があります。コンテンツの外観はユーザーの要求なく変更するべきではありません。例えば、ページに白と明るい灰色の背景色を交互に持った行があるリストが含まれている場合です。背景色を削除すると、コンテンツの読みやすさが低下します。

形式文法

economy | exact

使用上のメモ

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.

CSS

.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;
}

HTML

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

結果

仕様書

仕様書 状態 備考
CSS Color Module Level 4
color-adjust の定義
草案 初回定義
初期値economy
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序構文通り

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 49
接頭辞付き
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 未対応 なしFirefox 完全対応 48IE 未対応 なしOpera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 6
接頭辞付き
完全対応 6
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 完全対応 48Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報