forced-color-adjust

forced-color-adjust は CSS のプロパティで、特定の要素を強制カラーモードから除外することができます。これにより、これらの値の制御が CSS に戻されます。

構文

css
forced-color-adjust: auto;
forced-color-adjust: none;

/* グローバル値 */
forced-color-adjust: inherit;
forced-color-adjust: initial;
forced-color-adjust: revert;
forced-color-adjust: revert-layer;
forced-color-adjust: unset;

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

値

auto

強制カラーモードでは、要素の色がユーザーエージェントによって調整されます。これが既定値です。

none

強制カラーモードでも、要素の色はユーザーエージェントによって調整されません。

使用上のメモ

このプロパティは、ユーザーの色とコントラストの要求に適応するための変更を行う場合にのみ使用してください。例えば、ユーザーエージェントによる色の最適化によって、ハイコントラストやダークモードでの使い勝手が悪くなることを認識した場合などです。このプロパティを使用すると、そのモードでの結果を微調整して、使い勝手を高めることができます。ユーザーの選択を尊重しないために使用すべきではありません。

公式定義

初期値auto
適用対象すべての要素とテキスト
継承あり
計算値指定通り
アニメーションの種類アニメーション不可

形式文法

forced-color-adjust = 
  auto                   |
  none                   |
  preserve-parent-color

例

色の温存

下記の例では、最初のボックスはユーザーが設定した配色を使用します。例えば、 Windows の高コントラストモードの黒スキームでは、背景が黒、文字が白になります。 2 つ目のボックスは .box クラスに設定されたサイトの色を保持します。

forced-colors メディア特性を使用すると、強制カラーモードの最適化を forced-color-adjust プロパティと一緒に追加することができます。

CSS

css
.box {
  border: 5px solid grey;
  background-color: #ccc;
  width: 300px;
  margin: 20px;
  padding: 10px;
}

@media (forced-colors: active) {
  .forced {
    forced-color-adjust: none;
  }
}

HTML

html
<div class="box">
  <p>This is a box which should use your color preferences.</p>
</div>

<div class="box forced">
  <p>This is a box which should stay the colors set by the site.</p>
</div>

結果

次のスクリーンショットは、 Windows の高コントラストモードで表示したイメージです。

上の例では、高コントラストモードで、最初のボックスは黒い背景、 2 番目のボックスは CSS のグレーの背景で表示されています。

仕様書

Specification
CSS Color Adjustment Module Level 1
# forced-color-adjust-prop

ブラウザーの互換性

BCD tables only load in the browser

関連情報