prefers-reduced-transparency media query

概要

prefers-reduced-transparencyは、ユーザーがデバイス設定で透過効果の削減を選択しているかどうかを検出するメディアクエリです。透過効果はコントラストの低下を招き、一部のユーザーにとって読みにくさの原因となります。この設定を検出することで、背景の透過度を下げたり、不透明な背景に置き換えたりする対応が可能です。

対応ブラウザ

基本構文

.overlay {
  background: rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-transparency: reduce) {
  .overlay {
    background: rgb(30, 30, 30);
  }
}

実務での使いどころ

• 透過効果のフォールバック提供

  透過効果の削減を希望するユーザーに対して、半透明な背景を不透明に切り替えてコントラストと可読性を向上させます。

注意点

アクセシビリティ

• 透過効果を使用する場合、テキストと背景のコントラスト比がWCAG基準を満たしているか、実際の背景上で確認してください。

参考リンク

• MDN Web Docs — prefers-reduced-transparency media query