prefers-contrast

Baseline 2022

Newly available

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

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

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

構文

no-preference: ユーザーが設定をシステムに通知していないことを示します。このキーワード値は、boolean のコンテキストでは false と評価されます。
more: ユーザーが、より高いコントラストをもつインターフェイスを好むことをシステムに通知したことを示します。
less: ユーザーが、より低いコントラストを持つインタフェース好むことをシステムに通知したことを示します。

ユーザー設定

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

例

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

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

ブラウザーの互換性

BCD tables only load in the browser