prefers-contrast

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

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

構文

no-preference

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

more

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

less

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

ユーザー設定

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

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

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;
  }
}

結果

仕様書

Specification
Media Queries Level 5 (Media Queries 5)
# prefers-contrast

ブラウザーの互換性

BCD tables only load in the browser

関連情報