跳到正文
定位、使用者与职责边界
定位、使用者与职责边界
搜索 YUDS 文档

YUDS 文档

色彩语义与可辨状态

色彩如何按七角色映射业务用途与状态,以及配对对比、焦点、主题和强制颜色的验收门槛。

状态:七角色与固定职责 step 保持不变,沿用已确认的六条原则。D01-R1 的 TeaCSS 对齐主题映射与本页配对/构造由代理依用户授权采用;D01-R2(2026-10-22)修订默认 primary-200/300 后已按同一算法重算,198 项允许配对满足静态 sRGB 阈值。实际合成、系统强制颜色、视觉与实现验收均未执行。 更新:2026-10-22(D01-R2 修订);官方资料核查于 2026-10-19(UTC)。 所属章节:视觉与语义基础

1. 先规定用途,再选择色值

色彩用于建立信息层级、识别操作与状态、辅助比较。任何单独色号都不天然代表“可访问”,必须结合实际背景、文字、透明度及状态判断。品牌色可以进入强调角色,但不能自动成为正文、错误、链接和图表的通用色。

本页沿用 Token 契约、主题与状态 的七角色与 D01 唯一物理值表,不另建用途/组件颜色角色,也不复制 HEX。本页定义允许配对及构造;新品牌、渐变或透明效果属于另需登记与实测的变更,不把演示图当作主档。

2. 七角色与业务用途映射

公共 UI 颜色仅使用 primary(操作与选择信号)、neutral(表面、边界、文字等结构)、focused(焦点)及 success/warning/failure/general(成功、警告、错误或危险、信息状态),均与固定职责色阶组合。主题和平台不得改写同一 Token ID 的职责;物理色板仅作中心配置。允许色阶与固定职责以 Token 契约、主题与状态 的 FND-C01 为唯一主档;下文只规定消费组合和测量,不维护第二份允许清单。

下表说明业务用途如何对应公共角色;页面、正文、反色、悬浮等是用途描述,不生成额外公共 Token 别名。

业务用途 公共角色或独立字典 使用边界
页面、内容区、浮层、控件与边界 neutral 的职责色阶 普通结构及悬浮不借用品牌色;材质契约主档见 基础组件与交互契约「CMP-MAT 六材质设计职责」,实现 API 待定
正文、标题、辅助信息与反色文字 依所在表面选择已定义职责的角色色阶配对 次要不等于可以看不清;单位和错误是必要信息
主操作、链接与持久选择 primary 的相应职责色阶 主操作按独立任务上下文;选择不等同于焦点
当前焦点 focused 是独立状态标记,不被选择或错误替代
成功、警告、错误或危险、信息反馈 success/warning/failure/general 只在相应状态上下文使用,并有可理解文本
中性待处理 neutral 不虚构第八个 UI 颜色角色,不伪装成成功
数据类别、顺序、发散、缺失、预测 独立数据语义字典 不冒充 UI 状态色,详见 图表选择、交互与可访问等效

每个实际前景/背景配对记录 Token ID、主题与用途限制。透明色以最终合成结果检查,不以源色值单独评估。复杂背景不稳定时给文本提供稳定表面,不能要求用户在不同图像区域碰运气。

3. 状态色需要明确语义

  • 成功(success):某项已请求动作确实完成;“已保存草稿”不表示“审批已通过”。
  • 错误(failure):校验或执行出现必须处理的问题;错误说明应具体到字段、记录或任务。
  • 警告(warning):存在风险或限制,但当前是否能继续由规则决定;不要将所有待办都变成警告。
  • 信息提示(general):补充上下文或说明发生了什么变化,不让用户误以为操作失败。
  • 中性(neutral):未开始、待处理或没有积极/消极含义的状态;“未知”不能画成成功。

业务状态需要单独名称。例如“未付款”可能正常处于账期内,并不自动等于错误;“逾期”阈值由产品规定。“增长”是否有利取决于指标,成本增长不能因为数字带正号就显示成功色。

当状态同时存在时,保留各自信息。例如合同“待审核”且数据“更新失败”是两件事:前者属于流程,后者属于数据获取。不能把合同状态直接改成“失败”。

4. 交互与焦点

默认、悬浮、按下、选中和焦点应形成可辨的状态体系,但不要求每一对非相邻状态颜色都达到某个统一比值。重点是用户能识别当前控件及必要状态。

焦点不应仅通过轻微背景变色表达;在错误边界、选中行、弹层和深色表面上都要验证。选中采用持久标记,焦点采用当前操作位置标记,使用户知道“选了什么”和“接下来键盘会操作哪里”。禁用控件若需要解释原因,相关说明须在可阅读、可访问的位置提供,不能依靠禁用控件的悬浮提示。

5. 对比与非颜色线索

D05 已采用 Web WCAG 2.2 AA 设计验收目标;以下是标准最低要求,D01 项目文字配对仍统一 4.5:1,不因大字放宽。

WCAG 2.2:普通文字对比至少 4.5:1;符合其大号文字定义的文字至少 3:1。大号文字包含至少 18pt 普通文字或 14pt 粗体及定义中的等效 CJK 尺寸。不要把“标题”名称视为自动符合大号条件,也不向上四舍五入不足的比值。条款有非活动控件、装饰和标识等例外;业务必要说明不应借例外降低可读性。SC 1.4.3 官方说明

识别控件、状态及理解图形所必需的视觉信息,与相邻颜色通常需达到 3:1;非活动控件、未被作者修改的用户代理外观及必要特殊呈现等按条款适用性处理。这不意味着所有细分隔线都必须 3:1,也不意味着悬浮色与默认色必须互相比到 3:1。SC 1.4.11 官方说明

颜色不能成为传达信息、指示动作或区分视觉元素的唯一手段。错误同时有文字和定位,选中有勾选或其他状态标记,趋势同时说明方向与数值,图表用标签、线型或形状补充类别。SC 1.4.1 官方说明

上述数值是外部标准条款,并非 YUDS 的候选品牌参数。原生平台的测量方式和辅助技术组合需另行记录,不能将 CSS 单位或 Web 结果直接当作所有平台已验证。

6. 明暗、高对比与打印

深色模式重新分配表面、文本和边界,不能对浅色界面做机械反相。浮层须在相邻区域可辨,阴影消失时仍能识别。多品牌主题也要检查错误、链接及选中态,不只检查首页主按钮。

系统强制颜色或高对比条件下,保留可见边界、焦点和语义标记。不要以背景填充、阴影或半透明遮罩作为唯一状态线索。打印与灰度导出保留文本、线型和符号,不能让审批报告的风险只剩不同色块。

FND-C02:配对记录与拒绝门槛

每个实际配对建立一行证据,字段为:规则 ID、组件与任务、前景 Token、直接背景 Token、后方表面与透明度、主题/品牌/系统颜色偏好、普通/悬浮/按下/选中/焦点状态、字号与字重、适用阈值、实际合成颜色、测量工具及版本、未四舍五入比值、截图和结果。缺少实际色值或合成背景时只能写“未执行”,不得从 Token 名称推算通过。

测量顺序:先解析实际绘制背景及每一层透明度,再测前景;文字使用第 5 节相应阈值,必要非文字标识对相邻颜色测试。焦点同时贴近选中面和普通表面时,两侧分别检查;若有可访问性例外,记录具体条款和适用原因。小号品牌按钮文字不能借品牌面仅满足 3:1 的参考保证直接通过,仍须满足普通文字的适用要求。

D01-R2 采用的允许配对与静态算术证据

使用 D01-R2 固定 HEX(D01-R1 加默认 primary-200/300 淡彩修订)重新计算 198 项;旧 D01 与 D01-R1 的通过记录不能替代 D01-R2 的计算结果。自定义 primary 必须单独验证并记录主题/版本,不继承默认通过结论。

计算方法,依据 WCAG 相对亮度定义:

  • 使用 8 位 sRGB,alpha=1。
  • 通道先除以 255;c≤0.04045 时取 c/12.92,否则取 ((c+0.055)/1.055)^2.4。
  • 相对亮度为 0.2126R+0.7152G+0.0722B。
  • 比值为 (L较亮+0.05)/(L较暗+0.05)。
  • 比较使用未四舍五入值,表中小数仅便于阅读。

正文及辅助/占位文本在本设计允许表中统一要求至少 4.5:1,不借“大标题”名称降门槛;必要控件边界与焦点配对至少 3:1。标准适用性与例外仍按条款核对。文字对比、非文字对比。

配对组 前景 → 背景 阈值 浅色最低 深色最低
C01-TEXT neutral-800, neutral-850, neutral-900, neutral-950 → neutral-100, neutral-150, neutral-200, neutral-300, neutral-400 4.5:1 4.763736 4.855628
C02-SELECTED-TEXT neutral-950 → primary-200, primary-300 4.5:1 12.080791 11.628897
C03-LINK primary-900 → neutral-100, neutral-150, neutral-200, neutral-300, neutral-400, primary-200, primary-300 4.5:1 12.080791 11.212415
C04-PRIMARY primary-000 → primary-800, primary-850 4.5:1 13.008985 14.304444
C05-SELECTED-CHIP primary-950 → primary-200, primary-300 4.5:1 14.001027 13.150980
C06-MARK neutral-100 → primary-900 4.5:1 15.881196 16.275267
C07-STATUS-TEXT success-900, warning-900, failure-900, general-900 → neutral-100, neutral-150, neutral-200, neutral-300, neutral-400, primary-200, primary-300 4.5:1 4.602318 5.725754
C08-SUCCESS-SOFT success-950 → success-200 4.5:1 10.969706 11.412446
C09-SUCCESS-STRONG neutral-100 → success-900, success-950 4.5:1 6.364748 10.265799
C08-WARNING-SOFT warning-950 → warning-200 4.5:1 10.465074 12.976098
C09-WARNING-STRONG neutral-100 → warning-900, warning-950 4.5:1 6.050127 12.331000
C08-FAILURE-SOFT failure-950 → failure-200 4.5:1 10.841947 12.006654
C09-FAILURE-STRONG neutral-100 → failure-900, failure-950 4.5:1 6.085947 8.311160
C08-GENERAL-SOFT general-950 → general-200 4.5:1 11.258987 11.386558
C09-GENERAL-STRONG neutral-100 → general-900, general-950 4.5:1 6.172735 9.064226
C10-BORDER neutral-600, neutral-700 → neutral-100, neutral-150, neutral-200, neutral-300, neutral-400, primary-200, primary-300 3.0:1 3.182649 3.293881
C11-FOCUS focused-900 → neutral-100, neutral-150, neutral-200, neutral-300, neutral-400, primary-200, primary-300, success-200, warning-200, failure-200, general-200 3.0:1 5.527713 6.274184

结果:198 项登记允许配对均满足各自静态阈值。 这不是浏览器取色、原生截图、辅助技术或完整组件验收。逐项实际输入、亮度、未舍入比值在 静态配对账本,可用 计算脚本 重算;D01-R1 的 v1 账本保留为历史证据。不以计算项数代替质量评分。

D01 组合限制,不能从数字通过扩大用途

  • neutral-500 只作无需单独承担识别的装饰分隔;必要控件边界用 600/700 并核对直接邻色。卡片/面板若需边界辨认,不能只依赖 100 与 150 的轻微面差。
  • primary-000 只用于 primary-800/850 强主表面;选择背景 200/300 上的文字用 neutral-950,芯片可用 primary-950。状态弱面用该状态 950,强面/悬浮用 neutral-100。
  • primary-900 链接在连续正文里保留下划线或等效非颜色标记;不假设它与普通正文色本身有 3:1。状态始终有文字/图形,选择有持久标记,焦点另画轮廓。
  • 焦点采用 focused-900 轮廓+neutral-100 稳定间隔。Web 初始为 2 CSS px 轮廓、2 CSS px 间隔;原生按系统适配提供等效可辨轮廓,具体绘制未验证。外侧背景限 C11-FOCUS 表;强填充与焦点不得直接相贴。强背景、图像或未知合成必须先提供稳定中性承载,或采用另经真实验证的系统焦点呈现。不得只加内侧 gap 就声称外侧任意背景通过。
  • 未登记的焦点直接贴强面示例有 22 项,完整比值随账本保留;即使其中数值偶然超过 3,也不自动增加允许构造。单个 focused 色无法保证任意表面。
  • 默认/悬浮/按下不是新增颜色 role。中性控件按 200/300/400;强主或状态按下沿用该角色已登记强面,配合原生触觉/形状或可辨非颜色反馈,不添加 primary-400、failure-800 等未允许 step。
  • 默认主题 primary-200/300 与 neutral-200/300、各状态 200 柔和面的可辨性以 OKLab ΔE 记录在 v2 修订说明中,仅作信息,不是 WCAG 门槛;浅色 primary-200 与 neutral-300 亮度几乎相同(1.004:1),区别来自彩度,因此选择仍须持久标记。
  • 此表采用不透明稳定表面,不批准额外透明度、文字渐隐、渐变、玻璃材质或动态背景。强制颜色、系统对比偏好、打印/灰度及真实合成各自执行,不能借静态 198 项替代。

FND-C03:主题与强制颜色验收矩阵

条件 保持的语义 执行与失败预期
浅色→深色→系统跟随 相同 role-step、对象身份、选择与焦点 对每个启用品牌逐态重测;缺深色映射时阻止该配置发布,不静默借用浅色值
提高对比/粗体文字 同一内容和任务 重测必要边界、文字与状态;不能只把全页文字变黑后宣称通过
Web 强制颜色 允许系统调色,保留角色、选择勾选、焦点轮廓和状态文字 用实际支持强制颜色的浏览器打开同一夹具;阴影被取消后仍可辨认控件;不以关闭强制颜色作为修复
灰度/打印 类别名、风险值、线型、单位 移除色彩后仍能判明对象与状态;只有红绿圆点则失败

Web 强制颜色的用户代理会调整部分颜色属性,阴影等视觉表现也可能改变;这是平台呈现机制,不是新增公共 Token 层。必要系统颜色映射留在适配实现,必须验证焦点和文本。官方依据:CSS Color Adjustment:强制颜色处理,读取于 2026-10-19。实际平台检查均未执行。

FND-C04:数据与 UI 状态隔离

同一图中“地区甲/地区乙”始终是类别身份;“超预算”是由业务计算产生的状态。类别颜色来自数据字典,状态注释可以引用 UI 状态角色,但不能把一个类别直接永久叫作 failure。系列排序、主题切换和筛选不能改变类别身份;每个类别需有文本标签及线型、形状或可访问数据表等冗余路径。

文档夹具 C04

  • 设置:预算图两系列为“预算/实际”,实际超预算 5%。
  • 正常预期:类别标签、不同线型、明确的“超预算 5%”注释;移除颜色后仍可识别。
  • 失败注入:把“实际”系列固定映射 success-900,即使超预算仍为绿色。
  • 判定:拒绝该类别/状态混用;业务数值和分类不由调色修正。

7. 企业场景正反例

合适

资产表中“逾期 7 天”用文字及警告图标表达;选中仍有复选框,焦点仍有边界。即使移除所有色彩,用户仍知道该行的风险和选择状态。

不合适

将整行染红,同时省去逾期天数与状态词;选中行又用另一层红色覆盖。用户既不知道为什么异常,也无法区分选择。

合适

分析图中“预算”与“实际”用直接标签和不同线型。预算超支由产品计算并显示“超预算 5%”,不依靠猜测哪条线是红色。

不合适

红线同时代表一个地区和“坏结果”,用户无法判断是类别编码还是风险提示。

8. 验收记录

为每个候选配对记录主题、组件、状态、前景/背景 Token、合成方式、实测比值、适用条款、结果及截图。自动检查之外,还需人工查看颜色移除后的理解、焦点与选择区分、图表类别识别及复杂背景。

  • 必要正文、辅助说明、单位、占位提示和错误文本均可读。
  • 选中+焦点、错误+焦点、禁用原因、旧数据提示均有样例。
  • 所有拟支持主题分别验证,不以浅色通过替代深色通过。
  • 在灰度、系统颜色偏好及打印场景中,信息不只靠色彩保留。
  • 记录例外的确切依据与替代路径,不用“设计如此”作为豁免理由。

以上测试全部未执行;本页提供测试要求与判定边界,不报告合规通过。

相关:Token 契约、主题与状态、图标、层级与动态反馈、图表选择、交互与可访问等效。