prefers-contrast

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since May 2022.

prefers-contrast は CSS のメディア特性で、ユーザーがウェブコンテンツをより高い（またはより低い）コントラストで表示するように要求したかどうかを検出するために使用します。

構文

no-preference

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

more

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

less

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

custom

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

ユーザー設定

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

例

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

HTML

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

CSS

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

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

結果

仕様書

Specification
Media Queries Level 5
# prefers-contrast

ブラウザーの互換性

関連情報