CSS 颜色调整模块 第1级

1. 介绍

本规范引入了三个新功能 ，与用户代理自动调整颜色的控制相关：

• 配色方案 和 color-scheme 属性， 该属性控制页面的浏览器提供部分是否遵循用户选择的配色方案。

• 强制颜色模式 和 forced-color-adjust 属性， 该属性控制是否允许 强制颜色模式 应用于给定的元素。

• print-color-adjust 属性， 该属性控制浏览器是否可以根据用户的性能偏好 自动调整颜色，例如在打印时抑制背景颜色以节省墨水。

结合 prefers-color-scheme、prefers-contrast 和 forced-colors 媒体查询 [MEDIAQUERIES-5]， 本模块允许作者和用户之间的配色方案协商。

1.1. 值定义

本规范遵循 CSS 属性定义惯例， 来自 [CSS2]，使用来自 值定义语法， 来自 [CSS-VALUES-3]。 本规范中未定义的值类型由 CSS 值与单位定义 [CSS-VALUES-3]。 与其他 CSS 模块结合可能会扩展这些值类型的定义。

除了在属性定义中列出的特定值， 本规范中定义的所有属性 还接受 CSS 通用关键字 作为其属性值。 为了可读性，它们未被重复显式列出。

2. 首选配色方案

操作系统和用户代理通常会为用户提供选择用户界面元素的 首选配色方案 的功能。 此 配色方案 通常会反映在用户代理的导航界面呈现中， 以及页面内的界面元素（如表单控件和滚动条）中， 并期望也在 CSS 的 系统颜色 的值中反映出来。

用户代理还可以允许用户为他们查看的页面指示 配色方案 的偏好， 请求作者使页面适应这些颜色偏好。 （不需要表达这样的偏好； 用户可以对操作系统界面颜色有偏好， 但不希望将其强加到页面上。）

最常见的 配色方案 偏好有：

• 浅色配色方案（“日间模式”） 包括浅色背景和深色前景/文本颜色。

• 深色配色方案（“夜间模式”） 则相反，包括深色背景和浅色前景/文本颜色。

浅色 和 深色配色方案 并不代表精确的颜色调色板（例如黑白）， 而是一系列可能的调色板。 若要保证特定颜色，作者必须自己指定这些颜色。 此外，请注意， 因此，将默认或 <系统颜色> 与作者指定的颜色配对 不能保证任何特定的对比度级别； 可能需要同时设置前景和背景颜色 以确保可读性 [WCAG21]。

为了使页面能够适应用户的 首选配色方案， 用户代理将匹配 prefers-color-scheme 媒体查询 以用户的 首选配色方案。[MEDIAQUERIES-5] 此外，这里定义的 color-scheme 属性 使作者能够为用户代理提供的 UI 和页面中的颜色指示适当的 配色方案。

用户代理可以支持额外的 配色方案， 但是 CSS 并不支持协商额外的 配色方案： 用户代理应推动这些方案的标准化， 以便 prefers-color-scheme 和 color-scheme 能反映出额外的值。

2.1. 选择加入首选配色方案：color-scheme 属性

虽然 prefers-color-scheme 媒体特性 允许作者使页面的颜色适应用户的首选配色方案， 但页面的许多部分不在作者的控制范围内 （例如表单控件、滚动条等）。 color-scheme 属性允许一个元素指示 它设计为使用哪些 配色方案。 这些值与用户的偏好协商， 结果是一个影响表单控件和滚动条的默认颜色的 使用的配色方案， 以及 CSS 系统颜色的使用值。 （参见 § 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>。

注意： 浅色 和 深色 配色方案 不是特定的颜色调色板。 例如， stark 黑白方案和深棕色调的方案 都被视为 浅色配色方案。 若要确保特定的前景或背景颜色， 需要显式地进行指定。

注意：用户代理不要求支持任何特定的 配色方案， 因此仅使用一个关键字， 例如 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 的默认颜色，如“拼写检查”下划线

在根元素上， 使用的配色方案 还必须影响 画布的表面颜色， color 属性的初始值， 以及视口的滚动条。

为了保持预期的颜色对比度， 在通常通过透明画布渲染的嵌入文档中（例如通过 HTML iframe 元素提供的嵌入文档）， 如果该元素的使用的配色方案 与嵌入文档根元素的 使用配色方案 不匹配， 则 UA 必须使用不透明的 画布， 其颜色为适合嵌入文档的 Canvas 颜色， 而不是透明画布。 此规则不适用于通过用于图形的元素嵌入的文档 （如 img 元素嵌入的 SVG 文档）。

注意：除上述的小范围调整外， 用户代理通常不会进一步调整页面以匹配用户的首选 配色方案， 因为意外破坏页面的可能性太高。 但是，当用户需要特定的颜色选择（例如出于无障碍原因）时， 可能会应用更具侵入性的更改； 参见 § 3 强制配色方案。

2.3. 覆盖配色方案

如果用户指示对特定配色方案的覆盖偏好， 且作者未禁止此操作（通过使用 only 关键字）， 则用户代理可以覆盖配色方案， 强制使用的配色方案为用户的 首选配色方案。 如果元素不支持该 配色方案， 用户代理还必须将其他颜色自动调整为所选的 配色方案， 例如通过反转其亮度， 同时保持页面可读性所需的颜色对比度。 在这种情况下，UA 也可以自动调整替换元素、背景图像和其他外部资源中的颜色。

注意：此类自动调整的具体细节由 UA 定义， 并且在不同的 UA 之间可能有所不同。 但它的目的是不将所有颜色强制为固定调色板， 如 强制颜色模式 所做的那样， 而是将页面上的所有颜色 强制为 深色 或 浅色 配色方案。

3. 强制配色方案

强制颜色模式是一项无障碍功能， 旨在通过颜色对比提高文本的可读性。 视力有限的人 通常在前景和背景颜色之间有特定类型对比时， 更容易阅读内容。

操作系统可以提供内置的颜色主题， 例如 Windows 的高对比度黑底白字 和高对比度白底黑字主题。 用户也可以自定义自己的主题， 例如提供低对比度或色相对比度。

在强制颜色模式下， 用户代理在页面上强制使用用户的首选颜色调色板， 覆盖作者为特定属性选择的颜色， 详见 § 3.1 强制颜色模式影响的属性。 它还可以在文本下方强制执行“背板” （类似于在 ::selection 伪元素上绘制背景的方式）， 以确保足够的对比度来提高可读性。

为了使页面能够适应强制颜色模式， 用户代理将匹配 forced-colors 媒体查询， 并且必须通过 CSS 系统颜色提供所需的颜色调色板 （参见 [CSS-COLOR-4]）。 另外， 如果用户代理根据 Lab 亮度判断 Canvas 颜色 显然是深色（L < 33%）或浅色（L > 67%）， 则必须匹配 prefers-color-scheme 媒体查询的适当值， 并表达相应的用户偏好 color-scheme。 这将允许支持浅色/深色配色方案的页面 自动调整以更接近匹配强制配色方案。 上述深色与浅色阈值之间的行为 由用户代理定义， 可能会假定用户首选配色方案为 light 或 dark。

3.1. 强制颜色模式影响的属性

当 强制颜色模式 激活时， 如果某个元素上的 forced-color-adjust 为 auto（见下文）， 元素上的颜色会被强制调整为用户首选的颜色调色板。

具体来说，对于以下每个属性：

• color
• fill
• stroke
• text-decoration-color
• text-emphasis-color
• border-color
• outline-color
• column-rule-color
• scrollbar-color
• -webkit-tap-highlight-color
• background-color
• caret-color
• flood-color
• lighting-color
• stop-color

如果其 计算值 是除 系统颜色 以外的颜色， 则其 使用值 会被强制为 系统颜色，具体如下：

• 特别地，对于 background-color， 它被强制为 与 color 属性的 系统颜色 值相反的颜色， 使用 CanvasText 作为 Canvas 的相对颜色。 但是，其 alpha 通道取自 原始的 background-color 值， 以便透明背景保持透明。

• 在所有其他情况下，UA 确定 适当的强制 系统颜色— 它应与在元素所有受影响的属性 同样由 UA 确定时， 从空的 作者样式表 中得到的颜色相匹配。

  UA 在强制颜色时需要小心处理继承。 例如， 假设 UA 的按钮的 color 和 background-color 与其画布的 color 和 background-color 相反。 给定如下的标记：

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

  通常情况下， em 会继承自 button， 确保其可读性。 但是在 强制颜色模式 下， color 属性的 button 和 em 都需要被强制设置颜色。 显然 button 的颜色 应该被强制为按钮颜色， 但是 em 也需要被强制为按钮颜色； 如果它被强制为画布的 颜色， 就像文档中其他地方一样， 其文本将无法阅读。

此外：

• box-shadow 和 text-shadow 计算为 none

• background-image 计算为 none，除非原始值包含 url() 函数

• color-scheme 计算为 light dark

• scrollbar-color 计算为 auto

• accent-color 计算为 auto

UA 可以进一步调整这些 强制颜色模式 的启发式方法， 以提供更好的用户体验。

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 值 传播到文档视口 （它可以影响例如画布背景）。 请注意，forced-color-adjust 不会 从 HTML body 传播。

4. 基于性能的颜色调整

在大多数显示器上， 作者选择的颜色对设备性能没有显著影响； 使用白色背景或黑色背景显示文档都同样容易。

然而，一些设备的限制和其他特性使得这种假设不成立。 例如， 打印机往往在白纸上打印； 使用白色背景的文档不需要消耗墨水来绘制背景， 而黑色背景的文档则需要花费大量墨水填充背景颜色。 这往往会导致打印效果较差， 有时甚至对纸张产生不良的物理影响， 更不用说花费额外墨水导致的打印成本增加了。 即使是较小的差异， 如将文本颜色设为黑色与深灰色， 在打印时也可能有很大不同， 因为这将从使用单一的黑色墨水切换到使用青色、洋红和黄色墨水的混合， 从而增加墨水的使用量并降低分辨率。

因此，在某些情况下用户代理会在特定的上下文中调整作者指定的样式， 使其更适合输出设备并符合用户的预期喜好。 但在某些情况下，文档可能以重要且深思熟虑的方式使用颜色，而用户可能会欣赏这些选择， 因此文档希望能提示用户代理可能需要尊重页面的颜色选择。 本节定义了控制这些自动调整的属性。

4.1. 墨水经济：print-color-adjust 属性

print-color-adjust 属性向用户代理提供了有关如何处理可能在打印机或类似设备上昂贵或不明智的颜色和样式选择的提示， 例如在深色背景上使用浅色文本。 如果用户代理允许用户控制文档显示的这一方面， 则必须更强地尊重用户的偏好，而不是 print-color-adjust 提供的提示。 它有以下值：

economy

用户代理应根据输出设备的需要和谨慎程度对页面样式进行调整。

例如，如果正在打印文档， 用户代理可能会忽略任何背景并调整文本颜色使其足够深， 以最小化墨水的使用量。

exact

该值表示指定元素上的页面正在使用颜色和样式，这种使用方式非常重要且具有意义， 不应进行调整或更改，除非用户请求。

例如， 一个提供打印导航的网站可能会对导航步骤使用“斑马条纹”， 即白色和浅灰色背景交替显示。 失去这种斑马条纹并使用纯白背景会使得在开车时匆忙一瞥时很难快速阅读这些导航。

UA 必须将根元素上设置的 print-color-adjust 值 传播到文档视口 （它可以影响例如画布背景）。 请注意，print-color-adjust 不会 从 HTML body 传播。

4.2. color-adjust 简写

color-adjust 简写允许作者在一个声明中设置所有与性能相关的颜色调整属性。 （目前只有一个这样的属性——print-color-adjust——但将来可能会添加更多。）

color-adjust 简写目前已弃用。 作者应使用更具体的 print-color-adjust 属性， 以避免在非预期上下文中意外重置基于性能的颜色调整。

5. 隐私和安全考量

通过 颜色方案 或 强制颜色模式 应用用户颜色偏好时， 会通过 getComputedStyle() 方法将用户的颜色偏好暴露给页面， 这可能增加指纹识别的表面。

此外，嵌入的文档可能通过计时攻击来确定其自己的 颜色方案 是否与其嵌入的 iframe 相匹配。

6. 致谢

本规范的实现离不开 Apple、Google 和 Microsoft 在各种颜色调整功能方面的开发努力， 以及在 www-style 上关于打印调整的讨论。 特别是，CSS 工作组感谢以下人员的贡献： Alison Maher， François Remy， イアンフェッティ

在此列出其他 MSFT / Apple / Google 的人员。

7. 变更

自 2022年2月10日候选推荐快照 以来的变更：

• 删除了对 color() 回退系统颜色的特殊处理，因为该功能已从 [CSS-COLOR-4] 中删除。 (Issue 7007)

另见 候选推荐之前的变更。