CSSカラー調整モジュール レベル1

1. はじめに

この仕様は、ユーザーエージェントによる色の自動調整の制御に関連する3つの新しい機能を導入します：

• カラースキームとcolor-schemeプロパティは、 ブラウザーが提供するページのUI部分がユーザーが選択したカラースキームを尊重するかどうかを制御します。

• 強制色モードとforced-color-adjustプロパティは、 特定の要素に強制色モードを適用できるかどうかを制御します。

• print-color-adjustプロパティは、 ブラウザーが自動的に色をユーザーのパフォーマンスの好みに合わせて調整できるかどうかを制御します。 例えば、印刷時にインク節約のため背景色を抑制する場合などです。

prefers-color-scheme、prefers-contrast、forced-colorsのメディアクエリ [MEDIAQUERIES-5]と合わせて、 このモジュールは著者とユーザー間のカラースキームの調整を可能にします。

1.1. 値の定義

この仕様は、CSSプロパティ定義の慣例（[CSS2]）と、値定義の構文（[CSS-VALUES-3]）に従います。 本仕様で定義されていない値型はCSS Values & Units [CSS-VALUES-3]で定義されています。 他のCSSモジュールとの組み合わせにより、これらの値型の定義が拡張される場合があります。

定義ごとに記載されたプロパティ固有の値に加え、 この仕様で定義されるすべてのプロパティは、 CSS全体キーワードもプロパティ値として受け付けます。 可読性のため、これらは明示的に繰り返していません。

2. 優先カラースキーム

オペレーティングシステムやユーザーエージェントは、ユーザーにユーザーインターフェース要素の優先カラースキームを選択できる機能を提供することが多いです。 このカラースキームは、 通常、ユーザーエージェントのナビゲーションインターフェースやページ内のインターフェース要素（フォームコントロールやスクロールバーなど）のレンダリングに反映されます。

UAは、ユーザーが閲覧するページのカラースキームに対する好みを示すこともでき、 著者に対してページをその色の好みに合わせて調整するよう要求することができます。 （このような好みを必ずしも表明する必要はありません； ユーザーはオペレーティングシステムのインターフェースの色について好みを持っていても、 それをページに適用したくない場合もあります。）

最も一般的なカラースキームの好みは以下の通りです：

• ライトカラースキーム（「昼間モード」）は、明るい背景色と暗い前景／テキスト色で構成されます。

• ダークカラースキーム（「夜間モード」）はその逆で、 暗い背景色と明るい前景／テキスト色で構成されます。

ライトとダークカラースキームは、厳密なカラーパレット（白黒など）を示すものではなく、 さまざまなパレットの範囲を表します。 特定の色を保証するには、著者がその色を明示的に指定する必要があります。 そのため、 デフォルトや<system-color>の色と著者指定の色を組み合わせても、 特定のコントラストレベルは保証できません。 可読性を確保するためには、前景色と背景色の両方を同時に設定することが必要な場合があります [WCAG21]。

ページがユーザーの優先カラースキームに適応できるように、 ユーザーエージェントはprefers-color-schemeメディアクエリを ユーザーの優先カラースキームに一致させます。 [MEDIAQUERIES-5] これを補完するため、本仕様で定義されるcolor-schemeプロパティは、 UAが提供するUIおよびページ内の色に対して適切なカラースキームを著者が指定できるようにします。

ユーザーエージェントは追加のカラースキームをサポートしてもよいですが、 CSSは追加のカラースキームのネゴシエーションをサポートしません： ユーザーエージェントはこれらのスキームの標準化を推進すべきであり、 prefers-color-schemeやcolor-schemeで追加の値を反映できるようにすべきです。

2.1. 優先カラースキームの選択：color-schemeプロパティ

prefers-color-schemeメディア機能によって 著者はページの色をユーザーの優先カラースキームに合わせて調整できますが、 ページの多くの部分（フォームコントロール、スクロールバーなど）は著者が制御できません。 color-schemeプロパティは、 要素がどのカラースキームでレンダリングされるよう設計されているかを示すことができます。 これらの値はユーザーの設定とネゴシエートされ、 フォームコントロールやスクロールバーなどのデフォルト色に影響する 使用カラースキームを決定します。 （§ 2.2 使用カラースキームの効果参照。）

注: 多くのページがカラースキーム対応前に作成されたため、 ユーザーエージェントは制御下の要素の色を自動で調整できず、 周囲のページと色のコントラストが読みにくくなる可能性があります。

ホスト言語はページ対応カラースキームを定義できます。 これはそのページ上の全要素でデフォルト対応しているカラースキームのリストです。

注: [HTML]はcolor-scheme meta タグを指定して、ページ対応カラースキームを設定できます。

値は以下の通りに定義されます：

normal

要素がページ対応カラースキームをサポートすることを示します。 それらが設定されていれば、またはそれ以外の場合はカラースキームを全くサポートしないことを示します。

light

要素がライトカラースキームをサポートすることを示します。

dark

要素がダークカラースキームをサポートすることを示します。

only

要素に対してユーザーエージェントがカラースキームの上書きを禁止することを示します。

<custom-ident>

<custom-ident>値は意味を持たず、将来の互換性のためだけに存在します。 将来追加されるカラースキームがレガシーユーザーエージェントでcolor-scheme宣言を無効化しないようにするためです。 ユーザーエージェントは<custom-ident>値に意味を持たせてはなりません。 追加で認識されるカラースキームはこのプロパティの文法に明示的に追加される必要があります。

注: 混乱を避けるため、 著者向けのチュートリアルやリファレンスでは<custom-ident>を省略するべきです。

normal、light、dark、onlyキーワードは、 このプロパティ内で有効な<custom-ident>ではありません。

注: ライトおよびダーク カラースキームは特定のカラーパレットではありません。 例えば、真っ白の背景に黒文字とセピア調の暗い背景に淡い文字の組み合わせはどちらもライトカラースキームとみなされます。 特定の前景色や背景色を保証したい場合は明示的に指定する必要があります。

注: ユーザーエージェントは特定のカラースキームを サポートする義務はありません。 そのため、color-scheme: darkのように単一キーワードのみを使用して 必須カラースキームを示しても、 要素のレンダリングに必ずしも影響するとは限りません。

:root {
  color-scheme: light dark;
}

:root {
  color-scheme: light;
}

:root {
  color-scheme: dark;
}

:root {
  color-scheme: light dark;
}

.light-theme-example {
  color-scheme: light;
}

.dark-theme-example {
  color-scheme: dark;
}

注: color-scheme: light lightのようにキーワードを繰り返しても、 最初のキーワードの効果以上にはなりません。

2.2. 使用カラースキームの効果

すべての要素に対し、 ユーザーエージェントは以下を使用カラースキームに合わせなければなりません：

• スクロールバーや他のインタラクションUIのデフォルト色

• フォームコントロールやその他の「特別に描画される」要素のデフォルト色

• その他のブラウザー提供UI（例：スペルチェックの下線）のデフォルト色

ルート要素では、 使用カラースキームはさらに canvasの表面色、 およびビューポートのスクロールバーにも影響を与えなければなりません。

期待される色のコントラストを維持するために、 通常透明なcanvas上で描画される埋め込み文書の場合 （HTMLの iframe 要素など）、 要素の使用カラースキームと 埋め込み文書ルート要素の使用カラースキームが一致しない場合、 UAは透明canvasの代わりに埋め込み文書の使用カラースキームに適した 不透明なcanvas色（Canvas色）を使用しなければなりません。 このルールは、グラフィックス用要素で埋め込まれる文書 （例： img 要素によるSVG文書）には適用されません。

注: 上記の少数の調整項目を除き、 ユーザーエージェントは一般にユーザーのカラースキームの好みに合わせて ページをさらに調整することはありません。 なぜなら、ページの表示を誤って損なうリスクが高いためです。 ただし、ユーザーが特定の色指定（アクセシビリティなど）が必要な場合、 より積極的な変更が適用される場合があります。 § 3 強制カラーパレット参照。

2.3. カラースキームの上書き

ユーザーが特定のカラースキームに強制的な好みを示し、 著者が（onlyキーワードで）これを禁止していない場合、 ユーザーエージェントはカラースキームを上書きして、 使用カラースキームを ユーザーの優先カラースキームに強制します。 要素がそのカラースキームをサポートしない場合、 ユーザーエージェントはその他の色もこの選択したカラースキームに自動調整しなければなりません。 例：明度の反転などを行い、ページの可読性に必要な色コントラストを維持します。 この場合、UAは置換要素、背景画像、その他外部リソース内の色も適切に自動調整することがあります。

注: このような自動調整の詳細はUA定義であり、 UAごとに異なる場合があります。 ただし、強制色モードのように すべての色を固定パレットに強制することが目的ではなく、 ページ上のすべての色を ダークまたはライトカラースキームのいずれかに合わせることが目的です。

3. 強制カラーパレット

強制色モードは 色コントラストによってテキストの読みやすさを高めることを目的としたアクセシビリティ機能です。 視力が低い方は、 前景色と背景色の間に特定のコントラストがあると コンテンツをより快適に読むことができます。

オペレーティングシステムはWindowsの高コントラスト黒地白文字や高コントラスト白地黒文字など、 組み込みのカラーテーマを提供できます。 ユーザーは独自のテーマ（低コントラストや色相コントラストなど）を カスタマイズすることもできます。

強制色モードでは、 ユーザーエージェントがページ上でユーザーの好みのカラーパレットを強制し、 著者が選択した特定プロパティの色を上書きします。 § 3.1 強制色モードで影響を受けるプロパティ参照。 また、テキストの下に「裏板」（::selection疑似要素の背景のようなもの）を 強制して可読性のための十分なコントラストを確保することもあります。

ページが強制色モードに対応できるように、 ユーザーエージェントはforced-colorsメディアクエリを一致させ、 必要なカラーパレットをCSSシステム色で提供しなければなりません （[CSS-COLOR-4]参照）。 さらに、UAがLab明度に基づき Canvas色が明るい（L > 67%）または暗い（L < 33%）と判断した場合、 prefers-color-schemeメディアクエリの 適切な値に一致させ、color-schemeに対応する ユーザーの好みを反映させなければなりません。 これによりライト／ダークカラースキームをサポートするページは 強制カラースキームに自動調整しやすくなります。 上記の明／暗閾値間での挙動はUA定義で、 ユーザーの好みとしてlightまたはdarkのいずれかを仮定する場合があります。

強制色テーマエミュレーションデータ取得が "none"でない場合、 ユーザーエージェントは上記OSカラーテーマをバイパスし、 代わりにユーザーが強制色モードを 強制色モードエミュレーションカラーパレットで 有効化したかのように動作すべきです。 その値は強制色テーマエミュレーションデータで決定されます。

3.1. 強制色モードで影響を受けるプロパティ

強制色モードが有効で、 かつ要素のforced-color-adjustがauto（下記参照）の場合、 その要素のすべてのプロパティの<color>成分はユーザーの好みのカラーパレットに強制調整されます。

プロパティの各<color>成分について、 算出値がシステム色以外の色の場合、 使用値は以下のように強制的にシステム色に変更されます：

• 特にbackground-colorは、 colorプロパティの システム色値の反対色に、 システム色ペアとして強制されます。 CanvasTextはCanvasの反対色として扱われます。 ただし、アルファチャンネルは元のbackground-color値から引き継がれ、 透明な背景はそのまま透明になります。

• その他の場合は、UAが適切な強制システム色を決定します—これは、要素の影響を受けるすべてのプロパティがUAによって決定される場合に 空の著者スタイルシートから生じる色と一致するべきです。

  UAは色の継承時に注意を払う必要があります。 例えば、UAのボタンcolorと background-colorがcanvasのcolor・background-colorの逆になっているとします。 以下のようなマークアップの場合：

  <button>Push <em>this</em> button</button>
  

  通常、 em は button から継承し、可読性が保たれます。 しかし強制色モードでは、 colorは button と em の両方で強制されます。 buttonの色はボタン色に強制すべきですが、 em もボタン色に強制すべきです。 文書の他の箇所同様canvasのcolorに強制されると、 テキストが読めなくなります。

さらに：

• box-shadowとtext-shadowはnoneに算出されます。

• background-imageは元の値がurl()関数を含まない限りnoneに算出されます。

• color-schemeはlight darkに算出されます。

• scrollbar-colorはautoに算出されます。

• accent-colorはautoに算出されます。

• font-variant-emojiがnormalまたはunicodeに算出される場合、 UAはページ上の絵文字を可能ならモノクロバリアントに強制すべきです。

UAはこれらの強制色モードのヒューリスティックをさらに調整し、 より良いユーザー体験を提供してもかまいません。

.example {
  color: color-mix(in srgb, CanvasText, Canvas);
}

3.2. 強制カラーパレットから除外する：forced-color-adjustプロパティ

forced-color-adjustプロパティは、 著者が特定の要素を強制色モードから除外し、 CSSによる色の完全な制御を復元することを可能にします。 値の意味は以下の通りです：

auto

要素の色は強制色モードでUAによって自動的に調整されます。

none

要素の色は強制色モードでUAによって自動的に調整されません。

著者は自身でユーザーの色・コントラストニーズに対応した色調整を行う場合、 及びその要素に対してUAのデフォルト調整を変更し、より適切なユーザー体験を提供する必要がある場合のみこの値を使うべきです。

preserve-parent-color

強制色モードでは、 colorプロパティが親から継承される場合 （カスケード値が無い、またはカスケード値がcurrentColor、inheritや他の親から継承されるキーワードの場合）、 親の使用色のcolor値に算出されます。

その他の点ではnoneと同様に動作します。

注: この値は埋め込みSVG要素に外部ドキュメントのテキスト色を受け取らせ （強制色モードの調整とも一貫性を保つ）合理的な挙動を得るためだけに意図されています。 それ以外の場合はSVGの色をそのまま保持するためのデフォルトとなります。 強制色モードは通常イラストには有効に働きません。

SVGコンテンツを壊さないために、 UAはUAスタイルシートに以下のルールを追加することが期待されます：

@namespace "http://www.w3.org/2000/svg";
svg|svg { forced-color-adjust: preserve-parent-color; }
svg|foreignObject { forced-color-adjust: auto; }

UAは、ルート要素に設定されたforced-color-adjust値を ドキュメントビューポートに伝搬させる必要があります （例えばcanvasの背景などに影響します）。 ただしforced-color-adjustは HTMLのbodyからは 伝搬しません。

4. パフォーマンスに基づく色調整

ほとんどのモニターでは、 著者が選択した色によってデバイスのパフォーマンスに大きな違いはありません。 白背景で表示しても黒背景で表示しても、どちらもほぼ同じ容易さで表示できます。

しかし、いくつかのデバイスではこの前提が当てはまらない制約や特性があります。 例えば、プリンターは白い紙に印刷するのが一般的です。 白背景の文書は背景描画にインクを使いませんが、黒背景の文書は背景色を塗りつぶすため大量のインクを消費します。 これは見た目が悪くなるだけでなく、紙自体に悪影響を及ぼすこともあり、インクの追加消費による印刷コストも大幅に増加します。 また、テキストを黒にするか濃いグレーにするかといった小さな違いでも、印刷時には黒インク単体とシアン・マゼンタ・イエローの混合インクの使用となり、 インク消費量と解像度に違いが生じます。

そのため、状況によってはユーザーエージェントが著者の指定したスタイルを特定のコンテキストで変更し、 出力デバイスにより適したものに調整したり、ユーザーの意向に沿うようにします。 ただし、文書が重要で配慮された色使いをしている場合は、ユーザーもその配色を尊重してほしいと考えることがあります。 そこで、ユーザーエージェントにページの色指定を尊重するよう示唆できるプロパティを本節で定義します。

4.1. インク節約：print-color-adjust プロパティ

print-color-adjustプロパティは、 プリンター等の出力デバイスでコストが高くなったり不適切となる可能性のある色指定やスタイル（例：暗背景に明るい文字など）を ユーザーエージェントがどう扱うべきかを示唆します。 ユーザーエージェントがユーザーにこの表示方法を制御させる場合は、 print-color-adjustによるヒントよりも ユーザーの意向を優先して尊重しなければなりません。 値は以下の通りです：

economy

ユーザーエージェントは出力デバイスに適した必要かつ適切な調整をページのスタイルに加えるべきです。

例：印刷時は背景を無視したり、テキスト色を十分に暗く調整して インク消費を最小限に抑えることがあります。

exact

この値は、指定要素で色やスタイルを重要かつ意味のある用途で使っていることを示し、 ユーザーからの指示がない限り調整や変更をしないよう求めます。

例：地図サイトで印刷用の案内に白とライトグレー背景で段差を付けた「ゼブラストライプ」を使う場合、 このストライプが消えて真っ白な背景になると、車内で素早く見分ける際に案内が読みづらくなります。

UAはルート要素に設定されたprint-color-adjust値を ドキュメントビューポートに伝搬させなければなりません （canvasの背景などに影響します）。 ただしprint-color-adjustは HTMLのbodyからは 伝搬しません。

4.2. color-adjustショートハンド

color-adjustショートハンドは、 パフォーマンス重視の色調整プロパティを一括で設定できます。 （現時点ではprint-color-adjustのみですが、 将来的に追加される可能性があります。）

color-adjustショートハンドは 現在非推奨です。 著者はより具体的なprint-color-adjustプロパティを使い、 他の文脈で意図せずパフォーマンスベースの色調整をリセットしてしまうことを避けてください。

5. エミュレーション

5.1. 強制色モードのエミュレート

各トップレベルトラバーサブルは、強制色テーマエミュレーションデータを持ちます。 これは、ForcedColorsModeAutomationThemeを表すデータで、 初期値は"none"です。

enum ForcedColorsModeAutomationTheme {
  "none",
  "light",
  "dark"
};

強制色テーマエミュレーションデータの設定を行うには、navigable navigable と emulatedThemeData を受け取ります:

1. emulatedThemeDataがForcedColorsModeAutomationThemeであることを確認します。

2. traversableをnavigableのトップレベルトラバーサブルとします。

3. traversableがnullでなければ:

   1. traversableの強制色テーマエミュレーションデータを emulatedThemeDataに設定します。

   2. UAはこの変更をスタイル再計算が必要な変更として扱わなければなりません。

強制色テーマエミュレーションデータの取得を行うには、ForcedColorsModeAutomationTheme themeを受け取ります:

1. navigableをthemeの関連グローバルオブジェクトの関連Documentのノードナビゲーブルとします。

2. navigableがnullなら、nullを返します。

3. traversableをnavigableのトップレベルトラバーサブルとします。

4. traversableがnullなら、nullを返します。

5. traversableの強制色テーマエミュレーションデータを返します。

5.2. 強制色モードのカラーパレット

6. プライバシーに関する考慮事項

カラースキームや強制色モードを通じてユーザーの色の好みを適用すると、 ページ側がgetComputedStyle()で ユーザーの色の好みを取得できるようになり、 フィンガープリントの手段が増える可能性があります。

7. セキュリティに関する考慮事項

埋め込み文書がタイミング攻撃を使って、 自身のcolor-schemeが 埋め込み先のiframe と一致しているかどうかを判定できる可能性があります。

8. 謝辞

この仕様は Apple、Google、Microsoftによる各種色調整機能の開発努力やwww-styleでの印刷調整の議論がなければ 実現しませんでした。 特にCSSワーキンググループは Alison Maher、 François Remy、 イアンフェッティ に感謝します。

MSFT / Apple / Google関係者を追加で記載してください。

9. 変更点

2022年2月10日 勧告候補スナップショット以降の変更：

• color() フォールバックシステム色の特別扱いを削除（この機能は[CSS-COLOR-4]から削除済み）。 (Issue 7007)
• 強制色モードのテスト用エミュレーションサポートを追加。 (Issue 11824)
• 強制色モードで影響を受けるプロパティを より一般的にすべてのプロパティの<color>成分に適用するように更新し、 既知プロパティは注記に移動。 (Issue 11857)
• 強制色モードのフォント絵文字フォールバックロジックを追加。 (Issue 8064)

さらに勧告候補以前の変更点も参照してください。