forced-colors

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

構文

forced-colors メディア特性は、ブラウザーが現在強制カラーモードになっているかどうかを示します。

値

none

強制カラーモードは有効ではありません。ページの色が限られたパレットに強制されていません。

active

強制カラーモードが有効であることを示します。ブラウザーは、CSS システム色キーワードを通じてカラーパレットを提供し、必要に応じて prefers-color-scheme の適切な値をトリガーして、ページを適応できるようにします。ブラウザーは prefers-color-scheme の値を Canvas のシステム色の明度に基づいて選択します (詳細は color adjust spec を参照してください)。

使用上の注意

強制カラーモードの影響を受けるプロパティ

強制カラーモードでは、以下のプロパティの値は、作者レベルの値が指定されていないかのように扱われます。つまり、ブラウザーで指定された値が代わりに使用されます。ブラウザー指定の値は、スタイルのカスケードには影響せず、描画時にブラウザーによって強制的に設定されます。

ブラウザーで指定された値は、システム色のセットから選択されます。これにより、強制カラーを有効にしているユーザーに対して、共通の UI 要素の一貫したコントラストが保証されます。

また、以下のプロパティは、強制カラーモードでは特別な動作をします。

上記のプロパティで強制されるシステム色は、要素のコンテキストに依存します。例えば、 button 要素の color プロパティは ButtonText に強制されます。通常のテキストでは CanvasText に強制されます。様々な UI コンテキストにおいて、それぞれがどのような場合に適切かについての詳細はシステム色の一覧を参照してください。

メモ: ユーザーエージェントは、追加された ARIA ロールではなく、本来の要素の意味に基づいてシステム色を選択します。 例えば、 role="button" を div に追加しても、要素の色が ButtonText に強制されることはありません。

これらの調整に加えて、ブラウザーはテキストの後ろに「バックプレート」を描くことで、テキストの読みやすさを確保します。これは、テキストが画像の上に配置されている場合にコントラストを保つために特に重要です。

ユーザーエージェントが上記のプロパティの値を強制的に変更しないケースが 2 つあります。forced-color-adjust 値が none の要素に適用されている場合と、作者がシステム色を指定している場合です。

要素で forced-color-adjust が none に設定されている場合は、強制カラーの値は適用されず、作者の指定したスタイルが通常どおり適用されます。また、テキストのバックプレートは無効になります。

システム色が指定された場合は、強制的に設定された値の代わりにシステム色が使用されます。

また、強制カラーモードで利用できる制限されたカラーパレットとページの他の部分が統合されるように、上記以外のプロパティでシステム色を使用することもできます。

アクセシビリティの考慮

一般的に、ウェブ制作者は forced-colors メディア特性を使用して、この機能が有効になっているユーザー向けに個別のデザインを作成することはすべきではありません。この機能は、既定の強制カラーの適用ではページの一部がうまく機能しない場合に、使いやすさや読みやすさを向上させるための細かい調整を行うことを目的としています。

強制カラーモードの縮小されたパレットとテキストバックプレートによる高いコントラストは、一部のユーザーがウェブサイトを読んだり利用したりするのに不可欠な場合が多いため、コンテンツに影響を与える調整は慎重に行い、他の方法では読み取れないコンテンツを対象とする必要があります。

ユーザー設定

このメディア特性は、ユーザーがオペレーティングシステムで配色設定を有効にしている場合にのみ有効です。このような機能の例として、 Windows のハイコントラストモードがあります。

例

メモ: 以下の例は、このメディア特性に対応したブラウザーを使用し、 OS のハイコントラストモードなどの環境設定を有効にしている場合にのみ動作します。

この例は、通常 box-shadow によってコントラストを得るボタンです。強制カラーモードでは、 box-shadow は強制的に none になります。そのため、この例では強制カラーメディア機能を使用して、適切な色（この場合は ButtonText）の境界線を確保しています。

HTML

html
<button class="button">Press me!</button>

CSS

css
.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /* 強制カラーモードでは box-shadow が 'none' に強制されるため、代わりに border を使用します。 */
    border: 2px ButtonText solid;
  }
}

結果

仕様書

Specification
Media Queries Level 5
# forced-colors

ブラウザーの互換性

BCD tables only load in the browser

関連情報