prefers-contrast
prefers-contrast は CSS のメディア特性で、ユーザーがウェブコンテンツをより高い（またはより低い）コントラストで表示するように要求したかどうかを検出するために使用します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 96 | 96 | 101 | 14.1 | 96 | 14.5 | |
基本構文
CSS
@media (prefers-contrast: more) {
:root {
--border-color: #000000;
--text-color: #000000;
--bg-subtle: #ffffff;
}
.card {
border: 2px solid var(--border-color);
}
.muted-text {
color: var(--text-color);
}
}
@media (prefers-contrast: less) {
:root {
--text-color: #666666;
}
}ライブデモ
実務での使いどころ
-
高コントラスト対応
視覚障害のあるユーザー向けに、ボーダーを太くしたりテキスト色を濃くしたりしてコントラストを強調する。
注意点
- forced-colors メディアクエリ（Windowsハイコントラストモード）との違いを理解しておく。prefers-contrast はより汎用的。
アクセシビリティ
- 高コントラストモードのユーザーが使いやすいように、薄い色や微妙なグラデーションによる情報伝達を避ける。
- WCAG AAA（コントラスト比 7:1）を目指すとより多くのユーザーに対応できる。