color-adjust

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

構文

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

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

economy
ユーザーエージェントは、それがレンダリングされているデバイスのために出力を最適化するために、適切かつ慎重に要素に調整を加えることが許されています。例えば、印刷するときに、ブラウザは背景画像をすべて削除して、白い紙で読むときにコントラストが最適化されるようにテキストの色を調整することを選ぶかもしれません。これがデフォルトです。
exact
要素の内容は、ブラウザによって変更されると、実際には良くなるどころか悪くなるかもしれないような、思慮深い重要な方法で色や画像やスタイルを使用するように、特別に慎重に作られています。コンテンツの外観は、ユーザーの要求がない限り変更されるべきではありません。例えば、あるページでは、背景色が白と薄い灰色の間で交互に変化する行を持つ情報のリストが含まれているかもしれません。背景色を削除すると、コンテンツの読みやすさが低下します。

使用上の注意

ブラウザーが指定された外観から逸脱したいと思う理由はいくつかあります。

  • コンテンツがテキストや背景色を使用しているため、出力機器上では読みやすさの点で似たような色になってしまう。
  • 出力デバイスがプリンターの場合、インクを節約するために、暗い背景画像や非常に濃い背景画像が削除されることがあります。
  • ページを印刷するとき、ブラウザは、暗い背景の明るい色のテキストを、白い背景の濃いテキストに置き換えることを望むかもしれません。

ユーザーが色や画像の使用を制御するためにユーザーエージェントが提供しているおぷh損は、 color-adjust の値よりも優先されます。言い換えれば、 color-adjust が何かをするという保証はありません。ユーザーが動作を上書きすることができるだけでなく、各ユーザエージェントは、与えられた状況で color-adjust をどのように扱うかをそれ自身で決定することが許されています。

公式定義

初期値economy
適用対象すべての要素
継承あり
計算値指定値
アニメーションの種類個別

形式文法

economy | exact

低コントラストの維持

この例では、黒の背景色の上に background-image と半透明の linear-gradient() 関数を使用して、中程度の赤のテキストの後ろに濃い青のグラデーションを持つボックスが表示されています。理由はどうあれ、これは紙の上を含めたあらゆるレンダリング環境で望ましい外観ですので、 color-adjust: exact を使用して、レンダリング時にボックスの色やスタイルを調整しないように指示します。

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 Adjustment Module Level 1
color-adjust の定義
編集者草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
color-adjustChrome 完全対応 49
代替名
完全対応 49
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。
Edge 完全対応 79
代替名
完全対応 79
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。
Firefox 完全対応 48IE 未対応 なしOpera 完全対応 15
代替名
完全対応 15
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。
Safari 完全対応 6
代替名
完全対応 6
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。
WebView Android 完全対応 49
代替名
完全対応 49
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。
Chrome Android 完全対応 49
代替名
完全対応 49
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。
Firefox Android 完全対応 48Opera Android 完全対応 36
代替名
完全対応 36
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。
Safari iOS 完全対応 6
代替名
完全対応 6
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。
Samsung Internet Android 完全対応 5.0
代替名
完全対応 5.0
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。

凡例

完全対応  
完全対応
未対応  
未対応
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報