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

forced-colors media query

forced-colors: active は Windows のハイコントラストモードなどで OS がページのカラーパレットを上書きしている状態を検出する。この環境ではほとんどの色指定が無視されるため、ボーダーや SVG のアイコン表示などで意図しない消失を防ぐ調整が必要になる。

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

概要

forced-colors: active は Windows のハイコントラストモードなどで OS がページのカラーパレットを上書きしている状態を検出する。この環境ではほとんどの色指定が無視されるため、ボーダーや SVG のアイコン表示などで意図しない消失を防ぐ調整が必要になる。

対応ブラウザ

デスクトップ

Chrome 89+
Edge 79+
Safari 16+
Firefox 89+

モバイル

Chrome Android 89+
Safari iOS 16+
Firefox Android 89+

基本構文

CSS 
@media (forced-colors: active) {
  /* ボーダーで要素の境界を明示 */
  .card {
    border: 1px solid ButtonText;
  }

  /* SVG アイコンにシステムカラーを適用 */
  .icon svg {
    fill: ButtonText;
  }

  /* box-shadow の代わりにアウトライン */
  .focused:focus {
    outline: 2px solid Highlight;
  }
}

実務での使いどころ

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

    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 環境でもフォーカスインジケーターが見えることを確認すること。

参考リンク