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.

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