Jan. 16th,2019
＃
“prefers-contrast”メディア・フィーチャーについて
| 値 | キーワード値(“no-preference”、“less”、“more”、“custom”) |
| タイプ | 離散型 |
“prefers-contrast”メディア・フィーチャーはユーザーが高いコントラストを望むか低いコントラストを望むかを表すメディア・フィーチャーです。
視覚障害のあるユーザーなどは背景色と前景色(文字色)のコントラストが低いと文字を読むのが困難な場合があり、一方で高いコントラストを苦痛に感じるユーザーもいます。“prefers-contrast”メディア・フィーチャーを使用することでユーザーの設定に応じて低コントラストのスタイルと高コントラストのスタイルを切り替えることができます。
＃
＃
サンプルコード
@media all and (prefers-contrast: no-preference) {
p.sample {
background-color: #00a497; /*■*/
text-decoration: underline dotted;
}
}
@media all and (prefers-contrast: less) {
p.sample {
background-color: #e198b4; /*■*/
text-decoration: underline wavy;
}
}
@media all and (prefers-contrast: more) {
p.sample {
background-color: #fabf14; /*■*/
text-decoration: underline dashed;
}
}
@media all and (prefers-contrast: custom) {
p.sample {
background-color: #884898; /*■*/
text-decoration: underline double;
}
}
<p class="sample">
猫は、上のかぎり黒くて、ことはみな白き。
</p>
猫は、上のかぎり黒くて、ことはみな白き。
