1. 序論
この仕様は、 次に挙げる 3 種の新たな特能を導入する — それらは、［ ~UAが色を［ いつ, どう ］自動-調整するか ］を制御することに関係する： ◎ This specification introduces three new features related to controlling how/when colors are auto-adjusted by the user agent:
- `色~scheme$と `color-scheme$p ~propは、 次を制御する ⇒ ~page内で~browserが供した~UIの各部は、 利用者が選んだ`色~scheme$を尊重するかどうか ◎ Color schemes and the color-scheme property, which controls whether or not browser-provided parts of the page’s UI respect the user’s chosen color scheme.
- `強制d色~mode$と `forced-color-adjust$p ~propは、 次を制御する ⇒ 所与の要素に`強制d色~mode$を適用することは、 許容されるかどうか ◎ Forced colors mode and the forced-color-adjust property, which controls whether or not forced colors mode is allowed to apply to a given element.
- `print-color-adjust$p ~propは、 次を制御する ⇒ 利用者が想定した処理能~選好 — 印刷-時に~inkを節約するため背景~色を抑止するなど — に合わせて色を自動的に調整することは、 ~browserに許容されるかどうか ◎ The print-color-adjust property, which controls whether the browser is allowed to automatically adjust colors to the user’s assumed performance preferences, such as suppressing background colors when printing to save ink.
この~moduleは、 次に挙げる`媒体~query$ `MEDIAQUERIES-5$r との併用を介して，［ 作者, 利用者 ］間の色~scheme折衝を許容する。 ⇒＃ `prefers-color-scheme$d, `prefers-contrast$d, `forced-colors$d ◎ Together with the prefers-color-scheme, prefers-contrast, and forced-colors media queries [MEDIAQUERIES-5], this module allows color scheme negotiation between the author and the user.
1.1. 値~定義
【 この節の内容は `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。 】
2. 選好される色~scheme
~OSや~UAは、［ ~UI要素~用に `選好される色~scheme@ を選ぶ能 ］を利用者に与えることが多い。 この `色~scheme@ は、 概して，~page~UI要素 — ~UAの~form~controlや~scrollbarなど — に加えて［ ~navi~UIの描画 ］にも反映される。 ◎ Operating systems and user agents often give users the ability to choose their preferred color scheme for user interface elements. This color scheme is typically reflected in the user agent’s rendering of its navigation interface as well as in-page interface elements such as form controls and scrollbars.
~UAはまた、 利用者に次を許容できる ⇒ 自身が視る~pageに対し，`色~scheme$の選好を指示して、 その選好に~pageが順応するよう作者に要請する ◎終 （そのような選好を【作者へ】表出することは、 【~UAには】要求されない — 利用者は、［ ~OS~UI用の色~選好を~pageにも課したいとは求めない ］こともあるので）。 ◎ A UA can also allow the user to indicate a preference for the color scheme of the pages they view, requesting that the author adapt the page to those color preferences. (It is not required to express such a preference; users can have preferences for operating system interface colors that they do not want imposed on pages.)
最も共通的な`色~scheme$の選好は： ◎ The most common color scheme preferences are:
- `明な色~scheme@ （ “昼間~mode” ）は、 明な背景~色と暗な［ 前景／~text ］色からなる。 ◎ A light color scheme ("day mode") consists of light background colors and dark foreground/text colors.
- `暗な色~scheme@ （ “夜間~mode” ）は、 反対に， 暗な背景~色と明な［ 前景／~text ］色からなる。 ◎ A dark color scheme ("night mode") consists of the opposite, with dark background colors and light foreground/text colors.
［ `明な色~scheme$ ／ `暗な色~scheme$ ］は、 正確な色~palette（ `black-and-white^en など）ではなく，アリな~paletteの範囲を表現する。 特定の色を保証するためには、 作者は，それらの色を自身で指定しなければナラナイ。 その帰結として、［［ 既定の色／各種 `system-color$t 色 ］と作者が指定した色を併用しても，特定0の~contrast~levelは保証できない ］ことにも注意 — 判読能を確保するためには、［ 前景~色と背景~色を一緒に設定する ］ことも必要yあるかもしれない。 `WCAG21$r ◎ The light and dark color schemes don’t represent an exact color palette (such as black-and-white), but a range of possible palettes. To guarantee specific colors, authors must specify those colors themselves. Note also that, consequently, pairing default or <system-color> colors with author-specified colors cannot guarantee any particular contrast level; it might be necessary to set both foreground and background colors together to ensure legibility [WCAG21].
［ 利用者が`選好した色~scheme$に~pageが順応する ］のを可能化するため、 ~UAは，［ `prefers-color-scheme$d `媒体~query$ `MEDIAQUERIES-5$r を利用者が`選好した色~scheme$と照合する ］ことになる。 ここに定義される `color-scheme$p ~propは、 これを補うものとして，~UAにより~page内に供される［ ~UI, 色 ］用に適切な`色~scheme$を作者が指示できるようにする。 ◎ To enable pages to adapt to the user’s preferred color scheme, user agents will match the prefers-color-scheme media query to the user’s preferred color scheme. [MEDIAQUERIES-5] Complementing this, the color-scheme property defined here lets the author indicate appropriate color schemes for UA-provided UI and colors in the page.
~UAは，追加的な`色~scheme$を~supportしても`ヨイ^emが、 ~CSSは，そのような色~schemeの折衝は~supportしない： ~UAは、［ `prefers-color-scheme$d, `color-scheme$p ］が追加的な値を反映できるよう，これらの~schemeの標準~化を追求するベキである。 ◎ User agents may support additional color schemes, however CSS does not support negotiation of additional color schemes: user agents should pursue standardization of these schemes, so that prefers-color-scheme and color-scheme can reflect the additional values.
2.1. 選好される色~schemeの~opt-in法： `color-scheme^p ~prop
◎名 `color-scheme@p ◎値 `normal$v | [ `light$v | `dark$v | `custom-ident$t ]+ && `only$v? ◎初 `normal$v ◎適 すべての要素／~text ◎継 される ◎百 受容しない ◎算 ~keyword `normal$v ／ 指定された色~scheme~keywordたちが成す有順序~list 【`only^v の有無は、算出d値にどう反映される？】 ◎ the keyword normal, or an ordered list of specified color scheme keywords ◎順 文法に従う ◎ア 離散的 ◎表終`prefers-color-scheme$d 媒体~特能は，［ 利用者が`選好した色~scheme$に~page内の色を順応させる ］ことを作者に許容するが、 ~pageを成す各部には，作者が制御-下にないものも多くある （~form~control, ~scrollbar, 等々）。 `color-scheme$p ~propは、［ 要素は，どの`色~scheme$で描画されるものと設計されたか ］を指示することを許容する。 その値は，利用者の選好と折衝され、 その結果の `使用~色~scheme@ は，次に挙げるものなどに影響する （ `§ 使用~色~schemeの効果＠#color-scheme-effect$ を見よ） ⇒＃ ~form~controlの既定の色／ ~scrollbarの既定の色 ◎ While the prefers-color-scheme media feature allows an author to adapt the page’s colors to the user’s preferred color scheme, many parts of the page are not under the author’s control (such as form controls, scrollbars, etc). The color-scheme property allows an element to indicate which color schemes it is designed to be rendered with. These values are negotiated with the user’s preferences, resulting in a used color scheme that affects things such as the default colors of form controls and scrollbars. (See § 2.2 Effects of the Used Color Scheme.)
注記： 色~scheme~supportが存在する前に著作された~pageは数多くあるので、 ~UAは，要素~内で利用される色を自身の制御の下で自動的に順応することはできない — そうすると，周囲の~pageとの色~contrastが読取n不能になりかねないので。 ◎ Note: Because many pages were authored before color scheme support existed, user agents cannot automatically adapt the colors used in elements under their control, as it might cause unreadable color contrast with the surrounding page.
~host言語は、 `~pageが~supportする色~scheme群@ を定義し得る — それは、［ ~page上のすべての要素~用に既定で~supportされる`色~scheme$ ］たちが成す~listである。 ◎ Host languages can define the page’s supported color schemes, a list of color schemes supported by default for all elements on that page.
注記： `HTML$r は、 `meta$e 要素~用の~metadata名として `color-scheme$v を指定する — それを利用すれば、 `~pageが~supportする色~scheme群$を設定できる。 ◎ Note: [HTML] specifies a color-scheme meta tag which can be used to set the page’s supported color schemes.
各種 値の定義は、 次に従う： ◎ Values are defined as follows:
- `normal@v
- 次を指示する ⇒ 当の要素は、 `~pageが~supportする色~scheme群$は設定されて［ いるならば，それらを~supportする／ いないならば，どの`色~scheme$も~supportしない ］ ◎ Indicates that the element supports the page’s supported color schemes, if they are set, or that it supports no color schemes at all otherwise.
- `light@v
- 次を指示する ⇒ 当の要素は、 `明な色~scheme$を~supportする ◎ Indicates that the element supports a light color scheme.
- `dark@v
- 次を指示する ⇒ 当の要素は、 `暗な色~scheme$を~supportする ◎ Indicates that the element supports a dark color scheme.
- `only@v
- 次を指示する ⇒ ~UAが当の要素~用の`色~schemeを上書き$するのは、 禁止する ◎ Forbids the user agent from overriding the color scheme for the element.
- `custom-ident$t
- `custom-ident^t 値は無意味であり，将来の互換性を得る — 将来に色~schemeが追加されても、 旧来の~UAにおいて `color-scheme$p 宣言が無効~化されないようにする — ために限り存在する。 ~UAは、 どの `custom-ident^t 値も，意味があるとは解釈しない`モノトスル^em — 認識される追加的な色~schemeは、 この~propの文法に明示的に追加されなければナラナイ。 ◎ <custom-ident> values are meaningless, and exist only for future compatibility, so that future added color schemes do not invalidate the color-scheme declaration in legacy user agents. User agents must not interpret any <custom-ident> values as having a meaning; any additional recognized color schemes must be explicitly added to this property’s grammar.
- 注記： 混同を避けるため、 著作~用の~tutorialや文献の素材からは `custom-ident$t を省略するベキである。 ◎ Note: To avoid confusion, authoring tutorials and references should omit <custom-ident> from their materials.
- 次に挙げる~keywordは、 この~propにおいては，妥当な `custom-ident$t でない ⇒ `normal$v, `light$v, `dark$v, `only$v ◎ The normal, light, dark, and only keywords are not valid <custom-ident>s in this property.
注記： ［ `明な色~scheme$ ／ `暗な色~scheme$ ］は、 特定の色~paletteではない。 例えば、［ `stark black-on-white^en, `sepia dark-on-tan^en ］両~schemeとも，明な色~schemeと見なされる。 特定0の［ 前景~色／背景~色 ］を確保するためには、 明示的に指定される必要がある。 ◎ Note: Light and dark color schemes are not specific color palettes. For example, a stark black-on-white scheme and a sepia dark-on-tan scheme would both be considered light color schemes. To ensure particular foreground or background colors, they need to be specified explicitly.
要素の `使用~色~schemeを決定する@ ときは： ◎ To determine the used color scheme of an element:
- %値 ~LET 要素の `color-scheme$p の値 ◎ ↓
- ~IF［ %値 ~EQ `normal$v ］ ⇒ 【~RET ~browserの既定の色~scheme？（この場合に，この~algoが適用されるのかどうか、はっきりしない。）】 ◎ ↓
- %色~scheme~list ~LET %値 に~listされた`色~scheme$のうち，~UAが~supportするものからなる同順の~list ◎ ↓
- %選好d色~scheme ~LET `prefers-color-scheme$d 媒体~特能【の`実~値$】にて指示される，利用者が`選好した色~scheme$ ◎ ↓
- ~IF［ %選好d色~scheme ~IN %色~scheme~list ］ ⇒ ~RET %選好d色~scheme ◎ If the user’s preferred color scheme, as indicated by the prefers-color-scheme media feature, is present among the listed color schemes, and is supported by the user agent, that’s the element’s used color scheme.
-
~IF［ 利用者は、 自身が選んだ色~schemeで上書きする選好を指示した ］~AND［ %値 に `only$v ~keywordは指定されていない ］ ⇒ ~RET %選好d色~scheme — ~UAは、 %選好d色~scheme で`色~schemeを上書き$するモノトスル†。 `§ 色~schemeの上書き法＠#color-scheme-override$を見よ。
【† ここでは “上書きするモノトスル” と記されているが、 § 色~schemeの上書き法では “上書きしてもヨイ” と記されていて，紛らわしい。 】
◎ Otherwise, if the user has indicated an overriding preference for their chosen color scheme, and the only keyword is not present in color-scheme for the element, the user agent must override the color scheme with the user’s preferred color scheme. See § 2.3 Overriding the Color Scheme. - ~IF［ %色~scheme~list は空でない ］ ⇒ ~RET %色~scheme~list を成す最初の色~scheme ◎ Otherwise, if the user agent supports at least one of the listed color schemes, the used color scheme is the first supported color scheme in the list.
- ~RET ~browserの既定の色~scheme （ `normal$v のときと同じ） ◎ Otherwise, the used color scheme is the browser default. (Same as normal.)
注記：
~UAには、
特定0の`色~scheme$を~supportするよう要求されてはいない。
なので、
単独の~keywordを利用して要求される`色~scheme$を指示しても
— 例： `color-scheme$p: `dark^v —
要素の描画に何か効果を及ぼすことは保証されない。
◎
Note: User agents are not required to support any particular color scheme, so only using a single keyword, such as color-scheme: dark, to indicate a required color scheme is still not guaranteed to have any effect on the rendering of the element.
ある~pageは、 利用者からの［ 明な／暗な ］表示~用の選好に応答して，自身が利用する色を `prefers-color-scheme$d 媒体~特能を利用して改めているとする。 ~pageは、 単純な大域的な宣言で容易に， ~browserが制御する~UI（~scrollbar, ~form入力, 等々）も合致させるよう~opt-inできる： ◎ A page that responds to user preferences for light or dark display by using the prefers-color-scheme media feature to alter the colors it uses can easily opt the browser-controlled UI (scrollbars, inputs, etc) to match with a simple global declaration:
:root {
color-scheme: light dark;
}
~pageが `system-color$t `しか利用しない^emよう自身を制限している場合、 上の `color-scheme$p 宣言は，利用者が選好した色~schemeを~supportすることになる — 作者は `media$at を利用する必要はまったくない。 ◎ If a page limits itself to using only the <system-color>s, the color-scheme declaration, above, will support the user’s preferred color scheme even without the author needing to use @media at all.
ある~pageが銘柄や演出上の理由などから，すべての色~schemeを適度に収容できない場合でも、 ~pageは， `color-scheme$p で［ どの色~schemeを`~supportできる^emか指示する ］ことはでき，~UIを それに合致させれる。 ◎ If a page cannot reasonably accommodate all color schemes, such as for branding or theatrical reasons, color-scheme can still indicate which color schemes the page can support, causing the UI to match.
当の~pageの色~schemeは首に明な場合、 次は，そのことを明示的に指示することになる： ◎ If the page’s color scheme is primarily light, the following will indicate that explicitly:
:root {
color-scheme: light;
}
一方で，当の~pageは首に暗な場合、 次により そのことを明示的に指示すれば， ~pageの見かけは より首尾一貫したものになる： ◎ While if the page is primarily dark, indicating that explicitly will make the page look more coherent as well:
:root {
color-scheme: dark;
}
もちろん、 両~色~schemeとも~supportする方が良いが。 ◎ However, it is better to support both color schemes, of course.
ある~pageは、 複数の色~schemeを一般に取扱う能力があるが，特定0の色~schemeで描画される必要がある下位節もあるかもしれない。 ◎ A page might be generally capable of handling multiple color schemes, while still having a sub-section that needs to be rendered in a particular color scheme.
例えば，ある~style手引きは、［ 明な色／暗な色 ］を利用して，いくつかの~UI例を与えることもあろう — ［ 明な~theme／暗な~theme ］を特定的に見せつけるよう。 これは、 次で指示できる： ◎ For example, a style guide might give several UI examples that are using light or dark colors, showing off the light or dark theme specifically. This can be indicated as:
:root {
color-scheme: light dark;
}
.light-theme-example {
color-scheme: light;
}
.dark-theme-example {
color-scheme: dark;
}
下位節のうち［ `.light-theme-example^css ／ `.dark-theme-example^css ］を根とするものに限り，［ `light$v ／ `dark$v ］~themeを特定的に~opt-inすることになる — ~pageを成す残りは、 利用者の選好を尊重することになる。 ◎ Only the subsections rooted at .light-theme-example or .dark-theme-example will be opted into the light or dark themes specifically; the rest of the page will respect the user’s preference.
注記： `color-scheme$p にあてがう値は， `light light^v のように~keywordを繰返しても妥当であるが、 その効果は 1 個だけのときと同じになる。 ◎ Note: Repeating a keyword, such as color-scheme: light light, is valid but has no additional effect beyond what the first instance of the keyword provides.
2.2. 使用~色~schemeの効果
~UAは、 どの要素に対しても，次に挙げるものを`使用~色~scheme$に合致させるベキである。 ◎ For all elements, the user agent must match the following to the used color scheme:
- ~scrollbarその他の対話~UIの既定の色 ◎ the default colors of scrollbars and other interaction UI
- ~form~controlや他の “特別に描画される” 要素の既定の色 ◎ the default colors of form controls and other "specially-rendered" elements
- “~spellcheck-underline” など，~browserが供する他の~UIの既定の色 ◎ the default colors of other browser-provided UI, such as "spellcheck" underlines
`根~要素$に対しては、 `使用~色~scheme$は，次に挙げるものにも影響するモノトスル ⇒＃ `~canvas$の表面~色, 表示域の~scrollbar ◎ On the root element, the used color scheme additionally must affect the surface color of the canvas, and the viewport’s scrollbars.
埋込d文書（~HTML `iframe$e 要素を介して供されるものなど）は、 概して，透明な`~canvas$上に描画される。 その事例において，期待される色~contrastを保全するためには、 ~UAは［ 当の要素【埋込んでいる要素】の`使用~色~scheme$が，埋込d文書の`根~要素$のそれと合致しない場合 ］には，透明な~canvasに代えて［ 不透明な，埋込d文書の`使用~色~scheme$に適切な `Canvas$v 色にされた~canvas ］を利用するモノトスル。 この規則は、［ ~graphic用に意図された要素を介して埋込まれた文書 ］には，適用されない（~SVG文書を埋込んでいる `img$e 要素など）。 ◎ In order to preserve expected color contrasts, in the case of embedded documents typically rendered over a transparent canvas (such as provided via an HTML iframe element), if the used color scheme of the element and the used color scheme of the embedded document’s root element do not match, then the UA must use an opaque canvas of the Canvas color appropriate to the embedded document’s used color scheme instead of a transparent canvas. This rule does not apply to documents embedded via elements intended for graphics (such as img elements embedding an SVG document).
注記： 上に挙げた数種の調整は別として、 一般に~UAは，利用者から選好された`色~scheme$に合致するよう~pageを更に調整することはない — ~pageが事故り易くなり過ぎるので。 しかしながら，利用者から特定0の色を選ぶよう要求された場合 （例えば，~accessibilityの理由から）、 より浸潤的な変更が適用されるかもしれない。 `§ 強制d色~scheme＠#forced$を見よ。 ◎ Note: Aside from the small list of adjustments given above, user agents generally do not further adjust a page to match the user’s preferred color scheme, because the chance of accidentally ruining a page is too high. However, when particular color choices are required by the user (for accessibility reasons, for example), more invasive changes might be applied; see § 3 Forced Color Schemes.
2.3. 色~schemeの上書き法
利用者が特定0の色~schemeに対し`上書き^emする選好を指示していて， 作者が（ `only$v ~keywordを利用しないことにより）それを許容している場合、 ~UAは，［ `使用~色~scheme$を利用者が`選好した色~scheme$に強制する ］ことにより `色~schemeを上書き@ してもヨイ。 当の要素は，その`色~scheme$を~supportしない場合【例：`normal$v】、 ~UAは， 他の色もこの選ばれた`色~scheme^の中に自動-調整するモノトスル 【この要件は何を意味する？ “他の色も” とは？】 — ~pageの可読性に必要yな色~contrastは保全しつつ，それらの明るさを反転するなどにより。 この事例では、 ~UAは，［ `置換d要素$, 背景~画像, その他の外部の資源 ］の中の色も適切に自動-調整してヨイ。 ◎ If the user has indicated an overriding preference for a particular color scheme, and the author has not disallowed this (by using the only keyword), the user agent may override the color scheme, forcing the used color scheme to the user’s preferred color scheme. If the element does not support that color scheme, the user agent must also auto-adjust other colors into this chosen color scheme, such as by inverting their brightness, while preserving any color contrast necessary for readability of the page. In this case, UA may also auto-adjust colors within replaced elements, background images, and other external resources as appropriate.
注記： そのような自動-調整の仔細は、 ~UAにより定義され，~UAごとに相違し得る。 が、 すべての色を固定的な~paletteに強制することは意図されていない — `強制d色~mode$が強制するのは、 ~pageのすべての色を［ `暗な色~scheme$／`明な色~scheme$ ］に適合させることに限られるので。 ◎ Note: The specifics of such auto-adjustments are UA-defined, and can differ from UA to UA. But it is not intended to force all colors into a fixed palette, as forced colors mode does, only to force all colors on the page to conform to either a dark or light color scheme.
例えば，~UAは、［ すべての~pageを`暗な色~scheme$に強制する ］ような［ “暗な部屋” 用の~mode ］を備えるかもしれない。 この~modeは、 所与の~pageが`暗な色~scheme$を： ◎ For example, a UA might have a “dark room” mode, which forces all pages into a dark color scheme.
- すでに~supportしていて，［ `color-scheme$p ~prop／ `meta$e 要素~用の~metadata名 `color-scheme$v ］を利用して そのことが指示されている下では、 次以外に効果は無い ⇒＃ `prefers-color-scheme$d `媒体~query$用に `dark$vM 値【その`実~値$は `dark^v をとること】を報告して、 `使用~色~scheme$として`暗な色~scheme$を選定する。 ◎ For pages that already support dark color schemes, and have indicated so using the color-scheme property or color-scheme meta name, this has no effect other than reporting a dark value for the prefers-color-scheme media query and selecting a dark used color scheme.
- 明示的に~supportしていない【すなわち、前項でない】下では ⇒ ~pageの色に対する自動-調整を誘発して，［ ~pageが欲された`暗な色~scheme$に適合する ］よう`強制する^em — `color-scheme$p に `only light^v を指定することにより， この自動-調整が明示的に禁止されている要素を除き。 ◎ But for pages that do not explicitly support a dark color scheme, and have not explicitly forbidden this auto-adjustment by specifying color-scheme: only light, this mode triggers auto-adjustment of the page’s colors to force the page to conform to the desired dark color scheme.
3. 強制d色~palette
`強制d色~mode@ は、［ 色~contrastを通して~textの可読性を高める ］ために意図される~accessibility特能である。 個々の弱視者は、［ 前景~色, 背景~色の間に 特定0の型の~contrastがある ］とき，内容を読取るのが快適と見出すことが多い。 ◎ Forced colors mode is an accessibility feature intended to increase the readability of text through color contrast. Individuals with limited vision often find it more comfortable to read content when there is a particular type of contrast between foreground and background colors.
~OSは、 組込みの色~themeを供せる — Windows の高~contrastな［ `black-on-white^en ／ `white-on-black^en ］~themeなど。 利用者はまた、 自前の~themeを~customizeできる — 例えば、 低~contrastや色相~contrastを供するように。 ◎ Operating systems can provide built-in color themes, such as Windows’ high contrast black-on-white and high-contrast white-on-black themes. Users can also customize their own themes, for example to provide low contrast or hue contrast.
`強制d色~mode$においては、 ~UAは，利用者が選好した色~paletteを~page上で施行して， 特定の~propに対し作者が選んだ色を上書きする — `§ 強制d色~modeに影響される~prop＠#forced-colors-properties$を見よ。 また、 可読性に必要十分な~contrastを確保するため， ~textの~~背後に “裏板” を施行することもある （ `selection$pe 疑似要素に対し背景が塗られる仕方に類似する）。 ◎ In forced colors mode, the user agent enforces the user’s preferred color palette on the page, overriding the author’s chosen colors for specific properties, see § 3.1 Properties Affected by Forced Colors Mode. It may also enforce a “backplate” underneath text (similar to the way backgrounds are painted on the ::selection pseudo-element) to ensure adequate contrast for readability.
~pageが`強制d色~mode$に順応するのを可能化するため、 ~UAは，それを `forced-colors$d 媒体~queryに合致させることになる 【すなわち，その`実~値$は、強制d色~modeの有無を反映する値をとる】 — ~UAは、 要求された色~paletteを`~system色$（ `CSS-COLOR-4$r ）を通して供するモノトスル。 加えて，~UAは、 ~Lab明度に基づく `Canvas$v 色が明瞭に［ 暗なもの（ L ~LT 33% ）／明なもの（ L ~GT 67% ） ］と決定した場合には、 `prefers-color-scheme$d 媒体~queryの適切な値に合致させ， `color-scheme$p 用の対応する利用者-選好を表出するモノトスル。 これにより，［ 明な／暗な ］色~schemeを~supportする~pageは、 強制d色~schemeにより近く合致するよう自動的に調整できるようになる。 上の［ 明な, 暗な ］の境目をどこにおくかは，~UAにより定義され、 利用者から選好された`色~scheme$としての結果は，［ `light^v, `dark^v ］のいずれにも見做され得ることに注意。 ◎ To enable pages to adapt to forced colors mode user agents will match the forced-colors media query and must provide the required color palette through the CSS system colors (see [CSS-COLOR-4]). Additionally, if the UA determines, based on Lab lightness, that the Canvas color is clearly either dark (L < 33%) or light (L > 67%), then it must match the appropriate value of the prefers-color-scheme media query and express a corresponding user preference for color-scheme. This will allow pages that support light/dark color schemes to automatically adjust to more closely match the forced color scheme. Behavior between the above dark vs. light thresholds is UA-defined, and may result in assuming either light or dark as the user’s preferred color scheme.
3.1. 強制d色~modeに影響される~prop
`強制d色~mode$が作動中にあって，要素の `forced-color-adjust$p は `auto$vF であるときは（下を見よ）、 当の要素の色は［ 利用者から選好された色~palette ］に強制的に調整される。 ◎ When forced colors mode is active and forced-color-adjust is auto (see below) on an element, colors on the element are force-adjusted to the user’s preferred color palette.
特定的には、 次に挙げる各~propに対しては： ◎ Specifically, for each of the following properties:
- `color$p
- `fill$p
- `stroke$p
- `text-decoration-color$p
- `text-emphasis-color$p
- `border-color$p
- `outline-color$p
- `column-rule-color$p
- `scrollbar-color$p
- `-webkit-tap-highlight-color^p
- `background-color$p
- `caret-color$p
- `flood-color$p
- `lighting-color$p
- `stop-color$p
その`算出d値$ %値 が`~system色$以外になる場合でも、 `使用~値$は，次に従って得られる`~system色$に強制される： ◎ if its computed value is a color other than a system color, its used value is instead forced to a system color as follows:
- ~IF［ 当の~propは `background-color$p である ］ ⇒ ~RET ［ `color$p ~propに対し，この手続きを適用して得られる`~system色$ ］に対する，`~system色の~pair法$を成すもう片方の色 — ただし ⇒＃ `Canvas$v に対する もう片方の色には `CanvasText$v を利用する／ 透明な背景はそうあり続けるよう、その~alpha~channelは %値 から採る ◎ For background-color in particular, it is forced to the color opposite the color property’s system color value in the system color pairings, using CanvasText as the opposite of Canvas. However, its alpha channel is taken from the original background-color value so that transparent backgrounds remain transparent.
-
~RET ~UAが決定する適切な`~system色$ — それは、［ 要素の影響される~propすべてが，~UAにより同様に決定される ］とするとき，［ `作者~stylesheet$は空であったとするときの結果の色 ］に合致するベキである。 【再帰を孕む妙に回りくどい言い回しだが、要するに， “作者が指定した~styleは、結果の色に影響しないベキである” と解釈できよう。】 ◎ In all other cases, the UA determines the appropriate forced system color—which should match the color that would result from an empty author style sheet whenever all of the element’s affected properties are likewise UA-determined.
注記： ~UAは、 色を強制する際に，継承について気を付ける必要がある。 例えば，~UAの~buttonと~canvasとでは、 その［ `color$p, `background-color$p ］どちらの~propも，互いに~~反対色にされているとする。 次の~markupが与えられたとき： ◎ UAs need to be careful about inheritance when forcing colors. For example, suppose the UA’s button color and background-color are the opposite of its canvas color and background-color. Given markup such as
<button>この<em>~button</em>を押せ</button>
`em$e は、 通常は， `button$e から継承して自身の可読性を確保することになる。 しかしながら，`強制d色~mode$においては、 `button$e, `em$e どちらの `color$p も強制される必要がある。 `button$e の色が~button用の色に強制されるベキであるのは容易にわかるが、 `em$e もまた，~button用の色に強制される必要がある — 文書~内の他所と同様に~canvasの `color$p に強制されたとする場合、 その~textは読取n不能になるので。 ◎ Normally, em will inherit from button, ensuring its readability. However in forced colors mode, the color of both button and em will need to be forced. It’s easy to see that button’s color should be forced to the button color, but em also needs to be forced to the button color; if it were forced to the canvas color like it is everywhere else in the document, its text will be unreadable.
加えて： ◎ Additionally:
- `box-shadow$p は `none^v に算出される。 ◎ ↓
- `text-shadow$p は `none^v に算出される。 ◎ box-shadow and text-shadow compute to none
- `background-image$p は、 元の値が `url$f 関数を包含していないならば， `none^v に算出される。 ◎ background-image computes to none unless the original value contains a url() function
- `color-scheme$p は `light dark^v に算出される ◎ color-scheme computes to light dark
- `scrollbar-color$p は `auto^v に算出される ◎ scrollbar-color computed to auto
- `accent-color$p は `auto^v に算出される ◎ accent-color computed to auto
~UAは、 より良い利用者~体験を供するためとして，これらの`強制d色~mode$用の経験則を更に手直ししてもヨイ。 ◎ UAs may further tweak these forced colors mode heuristics to provide better user experience.
3.2. 強制d色~paletteの~opt-out法： `forced-color-adjust^p ~prop
◎名 `forced-color-adjust@p ◎値 `auto$vF | `none$vF | `preserve-parent-color$vF ◎初 `auto$vF ◎適 すべての要素／~text ◎継 される ◎百 受容しない ◎算 指定された~keyword ◎順 文法に従う ◎ア ~animate不可 ◎表終`forced-color-adjust$p ~propは、 次を作者に許容する ⇒ 特定0の要素に対し、 `強制d色~mode$を~opt-outして【~~任意で外して】，色に対する全部的な制御を~CSSに戻す ◎ The forced-color-adjust property allows authors to opt particular elements out of forced colors mode, restoring full control over the colors to CSS.＼
各種 値の意味は： ◎ Values have the following meanings:
- `auto@vF
- 要素の色は、 `強制d色~mode$において，~UAにより自動的に調整される。 ◎ The element’s colors are automatically adjusted by the UA in forced colors mode.
- `none@vF
- 要素の色は、 `強制d色~mode$において，~UAにより自動的に調整されない。 ◎ The element’s colors are not automatically adjusted by the UA in forced colors mode.
- 作者は、 この値を利用するのを，次に該当するときに限るベキである ⇒ 利用者が必要とする［ 色, ~contrast ］を~supportするために，自身で色を調整していて、 当の要素~用に もっと適切な利用者~体験を供するよう，~UAによる既定の調整に対し変更を為す必要がある。 ◎ Authors should only use this value when they are themselves adjusting the colors to support the user’s color and contrast needs and need to make changes to the UA’s default adjustments to provide a more appropriate user experience for those elements.
- `preserve-parent-color@vF
- `強制d色~mode$において，親から `color$p ~propを継承する場合 （すなわち，要素の`~cascaded値$は、 無いか［ `currentcolor$v ／ `inherit$v ／ 親から継承する別の~keyword ］である）、 `color$p ~propの`算出d値$は親の `color$p の`使用~色$になる。 ◎ In forced colors mode, if the color property inherits from its parent (i.e. there is no cascaded value or the cascaded value is currentColor, inherit, or another keyword that inherits from the parent), then it computes to the used color of its parent’s color value.
- 他のすべてに関しては，`none^v と同じに挙動する。 ◎ In all other respects, behaves the same as none.
- 注記： この値は、 もっぱら次が意図される ⇒ 埋込まれた~SVG要素のうち，~text色を外縁~文書から受取ることを期待するものが、 適度な挙動を取得する （および`強制d色~mode$による調整と一貫させる） 一方で、 他では，~SVGの正確な色を既定で保全する — `強制d色~mode$は、 一般に，~~絵図には有用に適用し得ないので。 ◎ Note: This value is intended solely to get a reasonable behavior from embedded SVG elements that expect to receive the outer document’s text color (and stay consistent with adjustments from forced colors mode), while otherwise defaulting SVGs to preserving their exact colors, as forced colors mode can’t generally be usefully applied to illustrations.
~SVG内容を非互換化しないよう、 ~UAには，［ 自身の~UA~stylesheetに，次の規則を追加する ］ことが期待される： ◎ In order to not break SVG content, UAs are expected to add the following rules to their UA style sheet:
@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$p 値を文書の表示域へ伝播させるモノトスル （例えば~canvasの背景など、それが影響し得る所では）。 `forced-color-adjust^p は、 ~HTML `body$e 要素からは`伝播しない^emことに注意。 ◎ UAs must propagate the forced-color-adjust value set on the root element to the document viewport (where it can affect e.g. the canvas background). Note that forced-color-adjust is not propagated from HTML body.
4. 処理能に基づく色~調整
ほとんどの~monitor上では，作者が何~色を選ぼうが、 機器がどう描画するかに関して，有意な相違が生じることはない。 文書の背景が~white／~blackどちらであろうが，表示する容易さは ほぼ等しい。 ◎ On most monitors, the color choices that authors make have no significant difference in terms of how the device performs; displaying a document with a white background or a black background is approximately equally easy.
しかしながら、 この前提が成り立たないような機器も中にはあり，制限があったり, 品質が変わることがある。 例えば，印刷機は白い紙に印刷する傾向にあるので、 背景が白い文書では，~inkを費やすことなく背景を描く一方で、 背景が黒い文書では，背景~色を埋めるために多量の~inkを費やす。 これは、 印刷費を跳ね上げるのは言うまでもなく，紙に有害な物理-効果をもたらすこともある。 ~text色を［ 黒にするか暗な~grayにするか ］のような，さほど違いはない場合でも、 印刷-時には まったく異なることはある — 利用する~inkを単独の黒~inkから［ ~cyan, ~magenta, ~yellow ］~inkの混合に切替えるので、 ~inkを余計に費やしたり解像度が低下する。 ◎ However, some devices have limitations and other qualities that make this assumption untrue. For example, printers tend to print on white paper; a document with a white background thus has to spend no ink on drawing that background, while a document with a black background will have to expend a large amount of ink filling in the background color. This tends to look fairly bad, and sometimes has deleterious physical effects on the paper, not to mention the vastly increased printing cost from expending the extra ink. Even fairly small differences, such as coloring text black versus dark gray, can be quite different when printing, as it switches from using a single black ink to a mixture of cyan, magenta, and yellow ink, resulting in higher ink usage and lower resolution.
その結果，一部の状況下では、 ~UAは［ 特定0の文脈において，作者が指定した~styleを改める ］こともある — それらを出力~機器~用に より適切に調整して，利用者が選好すると見做されるものを収容するよう。 しかしながら，文書が［ 利用者に快適aになるよう，重要かつ熟慮された仕方で色を利用している ］事例もあり、 そのような~pageでは，［ 選ばれた色を尊重するよう，何らかの仕方で~UAに~hintする ］よう求まれるであろう。 `color-adjust$p ~propは、 これを制御する。 この節では、 これらの自動的な調整を制御するための~propを定義する。 ◎ As a result, in some circumstances user agents will alter the styles an author specifies in some particular context, adjusting them to be more appropriate for the output device and to accommodate what they assume the user would prefer. However, in some cases the document may be using colors in important, well-thought-out ways that the user would appreciate, and so the document would like some way to hint to the user agent that it might want to respect the page’s color choices. This section defines properties for controlling these automatic adjustments.
4.1. ~inkの~~節約： `print-color-adjust^p ~prop
◎名 `print-color-adjust@p ◎値 `economy$v | `exact$v ◎初 `economy$v ◎適 すべての要素 ◎継 される ◎百 受容しない ◎算 指定された~keyword ◎順 文法に従う ◎ア 離散的 ◎表終`print-color-adjust$p ~propは、 所与の［ 印刷機や，それに類似な機器 ］において［ 高価に，より一般には無分別に ］なり得るときに（例：暗な背景に明な~textを利用するなど），［ 色や~styleの~~選択をどう扱うべきか ］についての~hintを~UAに供する。 ~UAは、［ 文書~表示を成す この側面を制御すること ］を利用者に許容する場合には，［ この~propが供する~hintより，利用者-選好を強く尊重する ］モノトスル。 とり得る値は： ◎ The print-color-adjust property provides a hint to the user-agent about how it should treat color and style choices that might be expensive or generally unwise on a printer or similar device, such as using light text on a dark background. If user agents allow users to control this aspect of the document’s display, the user preference must be respected more strongly than the hint provided by print-color-adjust. It has the following values:
- `economy@v
- ~UAは、 ~pageの~style付けに対し，［ 出力~機器に必要かつ賢明と判断される調整 ］を施すべきである。 ◎ The user agent should make adjustments to the page’s styling as it deems necessary and prudent for the output device.
- 例えば，文書が印刷されるとき、 ~UAは，費やす~ink量を~~抑えるために［ 背景を無視して，~textを十分~暗な色になるよう調整する ］こともあり得る。 ◎ For example, if the document is being printed, a user agent might ignore any backgrounds and adjust text color to be sufficiently dark, to minimize ink usage.
- `exact@v
- この値は、 次を指示する ⇒ 当の~pageは，［ 重要かつ有意な仕方で，要素の色や~style付けを指定している ］ので、［ 利用者から要請されない限り，手直しされたり変更されるべき ］でない。 ◎ This value indicates that the page is using color and styling on the specified element in a way which is important and significant, and which should not be tweaked or changed except at the user’s request.
- 例えば、 方向指示（ `printed directions^en ）を提供している地図siteは、 方向指示の背景を［ ~whiteと明な~grayが交互に並ぶ “縞模様” ］にするかもしれない。 背景を純~whiteにすると、 この縞模様は失われ，［ ~~車の~~運転時に方向指示を~~一目で読み取る ］のは難しくなる。 ◎ For example, a mapping website offering printed directions might "zebra-stripe" the steps in the directions, alternating between white and light gray backgrounds. Losing this zebra-striping and having a pure-white background would make the directions harder to read with a quick glance when distracted in a car.
~UAは、 `根~要素$に設定された `print-color-adjust$p 値を文書の表示域へ伝播させるモノトスル （例えば，~canvasの背景など、それが影響し得る所では）。 `print-color-adjust^p は、 ~HTML `body$e 要素からは`伝播しない^emことに注意。 ◎ UAs must propagate the print-color-adjust value set on the root element to the document viewport (where it can affect e.g. the canvas background). Note that print-color-adjust is not propagated from HTML body.
4.2. `color-adjust^p 略式~prop
◎名 `color-adjust@p ◎値 `print-color-adjust$tp ◎初 個々の~propを見よ ◎適 個々の~propを見よ ◎継 個々の~propを見よ ◎百 個々の~propを見よ ◎算 個々の~propを見よ ◎順 文法に従う ◎ア 個々の~propを見よ ◎表終`color-adjust$p 略式~propは、［ 色~調整~propのうち，処理能が動機にあるものすべて ］を 1 個の宣言で設定することを作者に許容する。 （該当する~propは，現時点では `print-color-adjust$p しかないが、 将来には，もっと追加されるかもしれない。） ◎ The color-adjust shorthand allows an author to set all of the performance-motivated color adjustment properties in one declaration. (Currently, there is only one such property—print-color-adjust—but more might be added in the future.)
`color-adjust$p は、 現時点では，`非推奨dである^em。 作者は、［ 意図された以外の文脈における，処理能に基づく色~調整 ］を［ 不用意に設定し直すのを避ける ］よう，より特定な `print-color-adjust$p ~propを利用するベキである。 ◎ The color-adjust shorthand is currently deprecated. Authors should use the more specific print-color-adjust property, to avoid accidentally resetting performance-based color adjustments in other contexts than the one intended.
~privacyの考慮点
［ `色~scheme$／`強制d色~mode$ ］を介して利用者の色~選好を適用した場合、 その選好は `getComputedStyle()$c を介して~pageに公開されるので， 指紋収集~表口が広がり得る。 ◎ Applying user color preferences via color schemes or forced colors mode exposes the user’s color preferences to the page via getComputedStyle(), which can increase fingerprinting surface.
注記： あいにく，これを避けることには、 無視するわけにいかないと判断される欠点もついて来る — すなわち： ◎ Avoiding this comes with unfortunate drawbacks that were deemed too significant to be ignored. Namely:
- `~system色$を［ `実際の値$の時点まで，~keywordとして保全する ］と、 有意な量の配備-済みな~scriptを非互換化することになる — `color$p の初期~値は、 すでに，~system色なので （その一方、 `color$p からは~RGB色が得られるものと暗黙的に期待する~scriptは，大量にある）。 ◎ preserving system colors as keywords until actual-value time would break a significant amount of deployed script, as the initial value of color is a system color already (but a huge amount of script implicitly expects to see an RGB color from color)
- ~script用の~APIが`~system色$について嘘をつく （常に，何らかの静的な値であるフリをする）と、 ~script内で，それに基づいて計算された色は、 `実際の^em~system色が利用されるとき，読取n不能になりかねない。 ◎ lying about system colors from the scripting APIs (pretending they’re always some static values) can result in any colors calculated from page colors in script being unreadable when used with the actual system colors.
この論題についての論点は `5710$issue を見よ。 ◎ See Issue 5710 for discussion on this topic.
~securityの考慮点
埋込d文書 %文書 にとっては、 計時~攻撃を利用して，［ %文書, %文書 を埋込んでいる `iframe$e ］の `color-scheme$p が合致するかどうか決定することもアリになり得る。 ◎ It may be possible for an embedded document to use timing attacks to determine whether its own color-scheme matches that of its embedding iframe or not.
謝辞
この仕様は、［ Apple, Google, Microsoft, および www-style における印刷~調整についての論点 ］による［ 色~調整の様々な特能に対する開発 ］の労なくしてはアリでなかった。 特に，~CSS~WGは、 次の方々に感謝したい ⇒ `Alison Maher^en, `François Remy^en, イアンフェッティ ◎ This specification would not be possible without the development efforts of various color adjustment features at Apple, Google, and Microsoft as well as discussions about print adjustments on www-style. In particular, the CSS Working Group would like to thank: Alison Maher, François Remy, イアンフェッティ
ここに［ MSFT / Apple / Google ］の方々を追加的に挙げる。 ◎ List additional MSFT / Apple / Google people here.
変更点
- `2022年 2月 10日 勧告候補~snapshot＠~TR/2022/CR-css-color-adjust-1-20220210/$ からの変更点 ◎ Changes since the 10 February 2022 Candidate Recommendation Snapshot:
- `color$f 用の~fallback~system色に対する特別な取扱いを除去した — その特能は `CSS-COLOR-4$r から除去されたので。 （ `7007$issue ） ◎ Removed special handling of color() fallback system colors, since the feature was removed from [CSS-COLOR-4]. (Issue 7007)
上述した勧告候補までの `変更点＠~TR/2022/CR-css-color-adjust-1-20220210/#changes$も見よ。 【便宜のため、それらの日本語訳も以下に与える。】 ◎ See also Changes prior to Candidate Recommendation.
- `2021年 6月 16日 作業草案＠~TR/2021/WD-css-color-adjust-1-20210616/$ からの変更点： ◎ Changes since the 16 June 2021 Working Draft:
- `color-scheme$p 用の値 `normal$v は、 ~HTMLにより `meta$e ~tagで~hook可能になるよう定義した。 ◎ Defined color-scheme: normal to be hookable by HTML with a meta tag.
- `2020年 11月 9日 作業草案＠~TR/2020/WD-css-color-adjust-1-20201109/$ からの変更点： ◎ Changes since the 9 November 2020 Working Draft:
- `強制d色~mode$により設定し直される~propとして，次に挙げるものを追加した （ `5778$issue, `5873$issue, `5987$issue ） ⇒＃ `scrollbar-color$p, `caret-color$p, `flood-color$p, `lighting-color$p, `stop-color$p, `accent-color$p ◎ Added scrollbar-color, caret-color, flood-color, lighting-color, stop-color, and accent-color resets to forced colors mode. (Issue 5778, Issue 5873, Issue 5987)
- `color-adjust$p を `print-color-adjust$p に改称した。 それに伴い， `color-adjust$p を［ 別名／略式 ］~propとして追加し直した （ `3880$issue ） ◎ Renamed color-adjust to print-color-adjust, and re-added color-adjust as an alias/shorthand. (Issue 3880)
- `forced-color-adjust$p に `preserve-parent-color$vF ~keywordを追加した上で、 それを利用するよう【~UA】~stylesheetを調整した — 一般的な “~SVG色は弄らない” 挙動を，~SVG~iconの様な［ `強制d色~mode$が効果を`発揮した後^emに，継承された~text色を利用する ］よう求める利用事例を非互換化することなく保全するため。 （ `6310$issue ） ◎ Added the preserve-parent-color keyword to forced-color-adjust and adjusted the stylesheet to use it, to preserve the general "don’t mess with SVG colors" behavior without breaking use-cases like SVG icons that want to use the inherited text color after forced colors mode has taken effect. (Issue 6310)
- `2020年 4月 2日 作業草案＠~TR/2020/WD-css-color-adjust-1-20200402/$ からの変更点 ◎ Changes since the 2 April 2020 Working Draft:
- `color-scheme$p ~prop用の `only^v ~keywordを除去した。 （ `3881$issue ） ◎ Removed the only keyword. (Issue 3881)
- `meta$e 要素~用の `color-scheme$v 値の定義を `HTML$r 仕様に移動した。 ◎ Moved the definition of the color-scheme meta value to the [HTML] specification.
- `強制d色~mode$に影響される~propの~listに `color-scheme$p を追加した。 （ `3885$issue ） ◎ Added color-scheme to list of properties affected by forced colors mode. (Issue 3885)
- すでに~system色に設定された~propは、 色の強制-法から免除するようにした。 （ `4178$issue ） ◎ Exempted properties already set as system colors from color forcing. (Issue 4178)
- 色の強制-法は、 `算出d値$ではなく`使用~値$に対し演算するよう切替えた。 （ `4915$issue ） ◎ Switched color forcing to a used value rather than computed value operation. (Issue 4915)
- `2019 年 5 月 23日 作業草案＠~TR/2019/WD-css-color-adjust-1-20190523/$ からの変更点： ◎ Changes since the 23 May 2019 Working Draft:
- 強制d背景~色は、 【~UA~stylesheetにて】 `revert$v するのでなく，~alpha以外の色~channelに限り強制するようにした（作者が与える透明度を保全するよう）。 （ `4175$issue ） ◎ Forced background colors don’t revert, they force all color channels other than alpha (to preserve author’s transparency). Issue 4175.
- 他の~prop 【すなわち，`強制d色~modeに影響される＠#forced-colors-properties$ `background-color$p 以外の~prop】 は — ~cascadeの中に `revert !important^css 規則を注入するのではなく — `revert$v を指定するよう書直すことにより，作者~levelの規則を `revert^v するようにした。 （ `4020$issue ） ◎ Other properties revert by rewriting author-level rules to specify revert, not by injecting revert !important rules into the cascade. Issue 4020.
- `iframe$e に対しては、 それを埋込んだ文書と互いの `color-adjust$p が合致しない場合には，不透明な背景に強制することにした。 （ `4472$issue ） ◎ Force opaque background if color-adjust mismatches between iframe and embedded document. Issue 4472.
- ~SVG~textに対しては、 色を強制しないようにした。 ◎ Don’t force colors on SVG text.
- `color-scheme$p 用の値 `auto^v を `normal^v に改称した。 （ `3849$issue ） ◎ Rename color-scheme: auto to color-scheme: normal. Issue 3849.
- 諸々の明確化。 ◎ Miscellaneous clarifications.