カラー・スキーム
“カラー・スキーム”とは？
多くのデバイスやユーザー・エージェントではユーザーがユーザー・インターフェースなどの色遣いである“カラー・スキーム(Color scheme)”を設定することができます。カラー・スキームはユーザー・エージェントのアドレスバーやタブなどのナビゲーション・インターフェースなどに反映されます。
もっとも一般的なカラー・スキームは以下の2つです。
- 明るいカラー・スキーム
- 明るい色の背景に暗い色のテキストで表現
- 暗いカラー・スキーム
- 暗い色の背景に明るい色のテキストで表現
ユーザーは閲覧するウェブページが望んでいるカラー・スキームに適応することを求めることもできます。ウェブページが求められたカラー・スキームに適応できるようにユーザー・エージェントはメディア・クエリの“prefers-color-scheme”メディア・フィーチャーを検査します。そのうえで、“color-scheme”プロパティによって示された適切なカラー・スキームでユーザー・エージェントによるインターフェースが描画されます。
カラー・スキームは以下の個所に使用される色に影響します。
また、ルート要素ではカラー・スキームは文書が描画される領域の色(背景色)や“color”プロパティの初期値やビューポートのスクロールバーの色に影響します。
“iframe”要素で埋め込まれる文書は通常は透明な描画領域に表示されますが、可読性を確保するため、埋め込む要素と埋め込まれる文書のルート要素のカラー・スキームが異なる場合には描画領域の色は埋め込まれる文書のカラー・スキームにおけるシステムカラーの“canvas”で表現される色になります。
使用されるカラー・スキームの決定
要素を描画するのに使用されるカラー・スキームは以下の手順で決定されます。
- メディア・クエリの“prefers-color-scheme”メディア・フィーチャーによって示されたユーザーが望むカラー・スキームが“color-scheme”プロパティの値の中にあり、ユーザー・エージェントもそのカラー・スキームに対応していればそれが使用されるカラー・スキームです。
- そうでなければ、ユーザーがカラー・スキームの上書を求めていて、それが“color-scheme”プロパティの“only”キーワードによって禁止されていなければ、ユーザーが求めるカラー・スキームを強制的に使用します。
- そうでなければ、ユーザー・エージェントが“color-scheme”プロパティで示されたカラー・スキームのうち少なくとも1個に対応していれば最初に記述されているものが使用されるカラー・スキームです。
- そうでなければ、使用されるカラー・スキームはブラウザのデフォルトのものです。
カラー・スキームの上書き
ユーザーが特定のカラー・スキームを上書きするように求めていて、“color-scheme”プロパティの“only”キーワードによって禁止されていない場合にはユーザー・エージェントはカラー・スキームを上書きすることができ、使用されるカラー・スキームをユーザーが求めているカラー・スキームに強制的に変更できます。
要素が選択されたカラー・スキームに対応していない場合にはユーザー・エージェントは要素の明度を反転させるなどして自動的にカラー・スキームを調整します。ユーザー・エージェントは置換要素や背景画像、その他の外部リソースも色を調整する場合がありますが、どのような調整を行うかはユーザー・エージェントに依ります。
“color-scheme”プロパティや“meta”要素で該当するカラー・スキームに対応していることが示されている場合にはそのままそのカラー・スキームで要素が描画され、メディア・クエリの“prefers-color-scheme”メディア・フィーチャーによって適用条件が指定されたスタイルが適用されます。
Jul. 19th,2021
