CSS - forced-color-adjust

• トップ
• CSSリファレンス
• forced-color-adjust

概要

説明

アクセシビリティのコントラスト設定など、強制カラーモードへの対応を指定します。強制カラーモードは、例えば Windows 11 の場合、[設定]-[アクセシビリティ]-[コントラストテーマ] で [夜空] などのハイコントラストのテーマを選択することで、弱視の方でも識別しやすいハイコントラストの強制カラーモードを適用することができます。

auto

強制カラーモードに従います。デフォルト値

none

強制カラーモードを無視します。

preserve-parent-color

none と似た動作ですが、親要素が強制カラーモードの影響を受けている時は、強制カラーモードをうけた親要素の color プロパティを継承します。SVGアイコンなどを強制カラーモードのテキスト色と同調させる目的で追加されました。Chrome 106 で実装されました。現時点(2025年3月)では Safari, Firefox ではサポートされていません。

使用例

auto と none の違い

.my-example {
  width: 300px;
  padding: 8px;
  margin: 8px;
  border: 1px solid #ccc;
  background-color: #ddd;
  color: #444;
}

<div class="my-example" style="forced-color-adjust: auto;">
  Lorem ipsum dolor sit amet...
</div>
<div class="my-example" style="forced-color-adjust: none;">
  Lorem ipsum dolor sit amet...
</div>

下記は通常は同じに見えますが、Windows 11 の場合、[設定]-[アクセシビリティ]-[コントラストテーマ] で [夜空] などを選択した場合、前者(auto) は強制カラーモードの色になりますが、後者(none) は CSS で設定した色が優先されます。

auto と none と preserve-parent-color の違い

下記も通常は同じに見えますが、Windows 11 の場合、[設定]-[アクセシビリティ]-[コントラストテーマ] で [夜空] などを選択した場合、auto は CSS を無視して強制カラーモードの色になります。none は強制カラーモードを無視して CSS で指定した色になります。preserve-parent-color は背景色などは none と同じく CSS で指定した色になりますが、color だけは、強制カラーモードの影響を受けた親要素の色を継承し、周りのテキストと同じ色となります。

<div style="color:#800;">
  <svg width="14" height="14" style="background-color:#888; forced-color-adjust: auto;">
    <circle cx="7" cy="8" r="4" fill="currentColor" />
  </svg>
  auto
</div>
<div style="color:#800;">
  <svg width="14" height="14" style="background-color:#888; forced-color-adjust: none;">
    <circle cx="7" cy="8" r="4" fill="currentColor" />
  </svg>
  none
</div>
<div style="color:#800;">
  <svg width="14" height="14" style="background-color:#888; forced-color-adjust: preserve-parent-color;">
    <circle cx="7" cy="8" r="4" fill="currentColor" />
  </svg>
  preserve-parent-color
</div>

リンク

• https://drafts.csswg.org/css-color-adjust/#forced-color-adjust-prop
• https://developer.mozilla.org/ja/docs/Web/CSS/forced-color-adjust
• https://caniuse.com/?search=forced-color-adjust