CSS の優先透明度（Reduced-transparency）

不透明な UI を好むユーザー向けに最適化して調整します。

Adam Argyle

Chrome 118 以降では、CSS メディアクエリ 5 の新しいメディアクエリ機能 prefers-reduced-transparency が利用可能になります。不透明でないインターフェースは、さまざまな種類の視覚障害で頭痛や視覚的な苦痛を引き起こす可能性があります。そのため、Windows、macOS、iOS には、UI の透明度を減らしたり、透明度を完全に消したりできるシステム設定があります。

ブラウザのこの新しいメディアクエリにより、CSS は透明度の低下を希望するユーザーに合わせてインターフェースを適応させることができます。

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

上のコードサンプルでは、CSS 変数に 50% の不透明度値が保持され、HSL とともに使用されて半透明の青色の背景が作成されます。ネストされたメディアクエリは、透明度の低下に関するユーザー設定を確認し、true の場合、不透明度変数を 95%（ほぼ不透明な不透明度値）に調整します。

このメディアクエリは、他の設定メディアクエリとよく合います。これにより、デザイナーとデベロッパーは、ユーザーに合わせて調整しながら創造性を発揮できます。これらのメディアクエリは、ユーザーに合わせて位置を自動的に調整する自動車のシートのようなものです。ユーザーがウェブサイトにアクセスすると、ユーザーがリクエストしなくても自動的に調整されます。すごい

透明度を下げるユースケース

以降のセクションでは、透明性を意味のある方法で低減できるタイミングと機会について説明します。

画像の半透明字幕

画像や動画のサムネイルに半透明のキャプションや概要を重ねることは、よく行われます。次の例は、透明度を下げる設定を処理する 1 つの方法を示しています。オーバーレイが完全に削除され、同じ字幕の内容がオーバーレイではなく画像の下に表示されます。

透明なモーダル、通知、ポップオーバー

UI 要素がコンテンツをオーバーレイするもう 1 つの方法は、モーダル、通知、ポップオーバーを使用する方法です。この場合、多くの場合、不透明度の要素が存在します。このような場合は、不透明度を上げることで、ユーザーの設定を尊重しながら、オーバーレイの背後から色がわずかに透けて見えるようにすることができます。

.card {
  background: hsl(none none 100% / 20%);

  @media (prefers-reduced-transparency: reduce) {
    background: hsl(none none 0% / 80%);
  }
}

適応型フロストガラス

人気のある画像オーバーレイ スタイルのもう 1 つは、すりガラスです。次の例では、キャプションの背後にある画像は商品画像の鏡像です。これにはいくつかの利点があります。画像が切り抜かれることはなく、明るい色や暗い色の設定が最終的な結果に反映されます。

.adaptive-glass {
  --glass-lightness: 100%;
  --glass-alpha: 50%;

  background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
  backdrop-filter: blur(40px);

  @media (prefers-color-scheme: dark) {
    --glass-lightness: 0%;
  }

  @media (prefers-reduced-transparency: reduce) {
    --glass-alpha: 85%;
  }
}

ヒーロー ヘッダー

一般的なホームページ要素には、ループする動画やアニメーション画像に重ねて表示される太字のメッセージがあります。次の例では、カラフルな半透明のグラデーション オーバーレイと、無限にアニメーション化する背景画像を使用しています。これは多くの人の注目を集める可能性がありますが、透明性と制御できない動きによるコントラストの低さにより、多くの問題も発生します。

これは、prefers-reduced-motion と prefers-reduced-transparency の 2 つの CSS メディアクエリで修正できます。モーション低減メディア クエリ内で無限アニメーションを適用できるのは、ユーザーがモーション低減に対して「設定なし」に設定している場合に限られます。この設定は、このユーザーがモーションを使用しても問題ないことをコードに通知します。

さらに、透明度を下げたメディアクエリを使用すると、不透明度を下げてオーバーレイの色をほぼ 100% にすることができます。動きによる注意散漫やコントラストの問題を回避して、メッセージを簡単に読むことができます。

これらをすべて組み合わせることで、クリエイティブな UI デザインをデプロイしながら、ターゲット ユーザーが読み取ってメッセージを受け取れるようにすることができます。

.Hero img {
  @media (prefers-reduced-motion: no-preference) {
    animation: zoom 30s ease infinite;
  }
}

.Hero .overlay {
  background: hsl(none none 0% / 95%);

  @media (prefers-reduced-transparency: no-preference) {
    background: linear-gradient(
      to top right in oklab,
      oklch(40% 0.3 340 / 70%),
      oklch(40% 0.4 200 / 70%)
    );
  }
}

ユーザー設定に対する加算型と減算型の視点

前の例では、これらのユーザー設定が低減されているかどうかは確認せず、設定がないことを確認しています。

@media (prefers-reduced-transparency: no-preference) {
  …
}

デベロッパーとデザイナーは、多くの場合、減算的な考え方で、これらの設定に基づいてユーザー エクスペリエンスを「フォールバック」します。これは、メディアクエリで「縮小」のチェックとして現れ、この時点で UI から何かが削除されます。この例は、ユーザーが許可した場合にモーションと透明性が追加される、追加型の考え方を示しています。

このアプローチは、それ自体が堅牢な健全なベースライン エクスペリエンスについて考えるうえで役立ちます。ユーザーが同意している場合は、エクスペリエンスに追加します。

DevTools

Chrome DevTools の [レンダリング] タブでは、この設定をエミュレートして透明度を下げることができます。次の動画では、prefers-color-scheme メディア クエリと prefers-reduced-transparency メディア クエリを切り替えて、フロストガラス カードの明るい色、暗い色、透明、半透明のバリエーションを表示する方法について説明します。