prefers-contrast

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

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

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 の定義
編集者草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
prefers-contrast media feature
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 80
無効
完全対応 80
無効
無効 From version 80: this feature is behind the layout.css.prefers-contrast.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報