prefers-contrast

構文

no-preference

ユーザーが設定をシステムに通知していないことを示します。このキーワード値は、boolean のコンテキストでは false と評価されます。

more

ユーザーが、より高いコントラストを持つインターフェイスにしたいことをシステムに通知したことを示します。

less

ユーザーが、より低いコントラストを持つインターフェイスにしたいことをシステムに通知したことを示します。

custom

ユーザーが、特定の色のセットを使用することをシステムに通知しており、これらの色によって暗示されるコントラストが more も less にも一致しないことを示します。この値は、 forced-colors: active のユーザーによって指定されたカラーパレットと一致します。

ユーザー設定

様々なオペレーティングシステムがこのような設定に対応しており、ユーザエージェントはオペレーティングシステムによって提供される設定に依存することになるでしょう。

例

この例では、既定でいまいましい低いコントラストが与えられています。

HTML

<div class="contrast">low contrast box</div>

CSS

.contrast {
  width: 100px;
  height: 100px;
  outline: 2px dashed black;
}

@media (prefers-contrast: more) {
  .contrast {
    outline: 2px solid black;
  }
}

結果

仕様書

ブラウザーの互換性

関連情報

• CSS の forced-colors メディアクエリー