prefers-reduced-transparency media query
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
prefers-reduced-transparency は CSS のメディア特性で、ユーザーが端末で使用される透明または半透明のレイヤー効果を縮小する設定を有効にしているかどうかを検出するために使用されます。この設定をオンにすると、一部のユーザーのコントラストや読みやすさを改善することができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 118 | 118 | 113 | | 118 | | |
| The HTTP Sec-CH-Prefers-Reduced-Transparency request header is a user agent client hint that indicates the user agent's preference for reduced transparency. | 119 | 119 | | | 119 | |
注釈 1件
実験的機能
- ブラウザの実験的フラグを有効にする必要があります
基本構文
CSS
.overlay {
background: rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-transparency: reduce) {
.overlay {
background: rgb(30, 30, 30);
}
}ライブデモ
実務での使いどころ
-
透過効果のフォールバック提供
透過効果の削減を希望するユーザーに対して、半透明な背景を不透明に切り替えてコントラストと可読性を向上させます。
注意点
- SafariとFirefoxでは未サポートのため、透過効果に依存しないデフォルトデザインを基本としてください。
アクセシビリティ
- 透過効果を使用する場合、テキストと背景のコントラスト比がWCAG基準を満たしているか、実際の背景上で確認してください。