| 属性名 | forced-color-adjust |
|---|---|
| 値 | auto | none | preserve-parent-color |
| 初期値 | auto |
| 適用可能要素 | すべての要素 |
| 継承 | 継承する |
| サポート | https://caniuse.com/?search=forced-color-adjust |
アクセシビリティのコントラスト設定など、強制カラーモードへの対応を指定します。強制カラーモードは、例えば Windows 11 の場合、[設定]-[アクセシビリティ]-[コントラストテーマ] で [夜空] などのハイコントラストのテーマを選択することで、弱視の方でも識別しやすいハイコントラストの強制カラーモードを適用することができます。
none と似た動作ですが、親要素が強制カラーモードの影響を受けている時は、強制カラーモードをうけた親要素の color プロパティを継承します。SVGアイコンなどを強制カラーモードのテキスト色と同調させる目的で追加されました。Chrome 106 で実装されました。現時点(2025年3月)では Safari, Firefox ではサポートされていません。
.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 で設定した色が優先されます。
下記も通常は同じに見えますが、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>