prefers-contrast

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

草案: このページは完成していません。

注:この機能はどのユーザーエージェントも対応しておらず、仕様が変更されることがあります。

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

構文

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

ユーザー設定

現在のところ、この機能を実装しているユーザエージェントはありませんが、様々なオペレーティングシステムがこのような設定をサポートしており、このメディアクエリが実装されると、ユーザエージェントはおそらくオペレーティングシステムによって提供される設定に依存することになるでしょう。

注: 現在、この機能を実装しているブラウザはないため、次の例は動作しません。

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

HTML

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

CSS

.contrast {
  color: grey;
}

@media (prefers-contrast: high) {
  .contrast {
    color: black;
  }
}

結果

仕様書

仕様書 状態 備考
Media Queries Level 5
prefers-contrast の定義
編集者草案 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報