color

颜色

此技能包含适用于每个屏幕的颜色规则，涵盖对比度、角色令牌、半透明中性色、深色模式，以及强调色的用途。

比率精确，以屏幕上的实际显示为准

此处的对比度比率是精确值，适用于每种主题。比率应根据屏幕实际渲染的颜色读取，不能从令牌名称推测。任何样式下，低于阈值的比率都属于问题。

查找现有令牌属于 reuse。color-scheme、theme-color、主题切换，以及仅通过颜色显示的状态属于 defaults。某种颜色是否应该存在，则属于 restraint。

正文文字对比度达到 4.5:1

小于 24px 的文字，或加粗时小于 18.66px 的文字，相对于其背后的内容，需达到 4.5:1。更大的文字需达到 3:1。占位符和辅助文字也包括在内，禁用控件则不包括。白色背景上的 #999 文字，对比度为 2.8:1，属于 color-text-contrast。

字段边缘和图标对比度达到 3:1

用于显示字段边界的边缘、切换开关的轨道，以及表达含义的图标，相对于周围内容需达到 3:1。白色背景上唯一边缘为 #e5e5e5 边框、对比度为 1.3:1 的字段，属于 color-ui-contrast。分隔线和浮动表面上的环形边框属于装饰，不受此要求约束。

测量屏幕上的颜色

半透明颜色和 opacity 会与其后方的每一层合成后再计算比率。每种主题及文字出现的每个表面都要分别读取。如果文字处于 opacity: 0.6 状态，却直接使用令牌的十六进制颜色计算比率，则属于 color-measure-composited。

通过浏览器的 evaluate 调用，在页面中运行 contrast.js。将每个结果视为候选项，并在放大裁剪图中确认后再报告。

图片上的文字需要添加遮罩

照片或视频上的文字应置于渐变遮罩或纯色底板上。文字下方图像最亮处的对比度也必须达标。明亮天空上使用白色文字，属于 color-scrim-under-text。

组件使用角色令牌

组件应引用以角色命名的令牌，例如 --text-secondary 或 --surface-raised。只有主题文件可以将角色映射到调色板色阶。在组件中使用 color: var(--gray-500)，属于 color-role-tokens。

表面上的中性色应为半透明

边框、分隔线、悬停填充色和按下填充色应使用 alpha 中性色，以便在其下方的任何表面上都能清晰显示。灰色卡片上无法显示的纯色 #f5f5f5 悬停填充色，属于 color-alpha-neutrals。

深色模式有独立的调色板

深色表面应通过变亮来体现层次，因为阴影在深色页面上几乎不可见。与页面同色、仅靠阴影凸显的深色弹出层，属于 color-dark-raises-lighter。

强调色和状态色应采用经过调整、适合深色模式的值。将浅色 #2563eb 链接用于 #0a0a0a 页面上、对比度仅为 3.8:1，属于 color-dark-tuned-accents。

强调色用于标记操作

强调色用于标记主要操作、选中状态和焦点。强调色标题或一排强调色图标，属于 color-one-accent。

每种状态色都应保持单一含义。红色仅用于错误和破坏性操作。红色的“New”徽标属于 color-status-meaning。

配对示例

每条检查都成对出现。问题代码旁边就是替换代码。

规则	问题代码	替换代码
color-text-contrast	白色背景上的 color: #999，对比度为 2.8:1	color: #737373，对比度为 4.7:1
color-ui-contrast	白色背景上边框为 #e5e5e5 的字段，对比度为 1.3:1	border-color: #8a8a8a，对比度为 3.5:1
color-measure-composited	“色值是 #171717，所以符合要求”	屏幕上读取 opacity: 0.6 时绘制出的颜色的对比度
color-scrim-under-text	白色文字直接叠在照片上	在文字下方添加 linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent)
color-role-tokens	Card 中的 color: var(--gray-500)	color: var(--text-secondary)
color-alpha-neutrals	悬停时的 background: #f5f5f5	悬停时的 background: var(--gray-a3)
color-dark-raises-lighter	深色弹出层与页面同为 #0a0a0a	弹出层为 #1a1a1a，页面为 #0a0a0a
color-dark-tuned-accents	#0a0a0a 上的 #2563eb 链接，对比度为 3.8:1	深色主题中的 #60a5fa，对比度为 7.8:1
color-one-accent	分区标题使用强调色	标题使用 --text-primary，主按钮使用强调色
color-status-meaning	红色的“New”徽标	中性色或强调色徽标

报告

严重程度。 HIGH 表示正文在主表面上的对比度低于要求、字段边缘对比度未达到 3:1，或图像上的文字没有遮罩层。MEDIUM 表示组件内部的调色板色阶问题、在某个表面上消失的纯色中性色，或从未在屏幕上读取的对比度。仅靠阴影抬高的深色表面，或在深色模式下重复使用的浅色强调色，也属于此级别。LOW 表示用于装饰的强调色，或具有第二种含义的状态颜色。

格式。 每个根本原因报告一项：

file:line - [rule-id] what is wrong (measured ratio)

然后提供 Rule | Count | Severity 汇总。只要还有任何 HIGH 问题，就标记为 Block；否则标记为 Approve。未打开检查过的主题绝不标记为 Approve。将画布、视频和跨域框架上的文字标记为 Not verified。