Widely available 安全に使用可能。Windows ハイコントラストモード対応に必須。企業サイトやアクセシビリティ要件の厳しいプロジェクトで特に重要。

forced-colors media query

forced-colors は CSS のメディア特性で、ユーザーエージェントが強制カラーモードを有効にしているかどうかを検出するために使用されます。強制カラーモードの例としては、 Windows のハイコントラストモードがあります。

アクセシビリティハイコントラスト

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.media.forced-colors
89
79
89
16
89
16
css.properties.forced-color-adjust

forced-color-adjust は CSS のプロパティで、特定の要素を強制カラーモードから除外することができます。これにより、これらの値の制御が CSS に戻されます。
89
79
113
89
CSS プロパティ
auto
89
79
113
89
none
89
79
113
89
preserve-parent-color
実験的
106
106
106
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • 以前は別名で対応していました: -ms-high-contrast-adjust (12)

基本構文

CSS 
@media (forced-colors: active) {
  /* Use a border to clearly define the element's boundaries */
  .card {
    border: 1px solid ButtonText;
  }

  /* Apply system colors to SVG icons */
  .icon svg {
    fill: ButtonText;
  }

  /* Use outline instead of box-shadow */
  .focused:focus {
    outline: 2px solid Highlight;
  }
}

ライブデモ

Normalmode

forced-colors media query Normalmode demo.

プレビュー全画面表示

forcedcol-support

forced-colors media query forcedcol-support demo.

プレビュー全画面表示

borderemphasis

forced-colors media query borderemphasis demo.

プレビュー全画面表示

実務での使いどころ

  • ハイコントラストモード対応

    Windows のハイコントラストモードでカスタム UI が正しく表示されるよう調整する。ボタンやリンクの視認性を確保する。

  • システムカラーの活用

    forced-colors 環境では Canvas、CanvasText、ButtonText などのシステムカラーキーワードを使って色を指定する。

注意点

  • forced-colors 環境では box-shadow、text-shadow、background-image（グラデーション含む）が無効化される。代替手段を提供すること。
  • 色指定には CSS システムカラーキーワードのみが有効。hex や rgb() は上書きされる。

アクセシビリティ

  • ハイコントラストモードは視覚障害のあるユーザーにとって重要な支援機能。forced-colors 対応は WCAG 2.1 Level AA 準拠に大きく貢献する。
  • forced-colors 環境でもフォーカスインジケーターが見えることを確認すること。

参考リンク