直接答案
色彩系统检查器用于评估色域归属、WCAG 2.2 关键语义对对比度以及感知色阶平滑度,并在发现问题时提供明确由用户确认的修复方案。
如何使用此工具
进入检查器阶段
直接从色彩系统检查器页面进入,或从构建器无缝承接当前内存中的色彩项目。
审查审计报告
查看 sRGB 与 Display-P3 分类、WCAG 文本及组件语义对结果,以及亮度单调性与相邻梯度的色阶质量提示。
应用显式修复
确认包含调整目标、修改令牌、建议值与影响的修复方案——原始品牌锚点始终锁定不变。
语义对对比度与真实色域审计
对比度检测基于 WCAG 2.2 相对亮度公式针对具有真实界面含义的前景/背景语义关系进行审计,而非生成不可读的全排列噪音矩阵。超色域 Display-P3 颜色提供确定性的感知 sRGB 回退说明,杜绝静默通道裁切。
- 修复方案绝不会静默修改不可变的品牌源颜色;无障碍合规调整全部由派生令牌吸收。
- 当 WCAG 未针对特定关系定义非文本 AAA 时,系统不会凭空虚构不存在的达标评级。
- 所有检测全部在浏览器端侧针对当前色彩系统文档即时执行。
实用示例
主色在表面背景上的 AA 对比度审计
输入: 语义角色:Surface 表面上的 Text 文本与 Primary #2563eb 强调色
输出: 语义对合规报告,包含 AA/AAA 状态与可选的派生修复令牌建议
展示未通过的对比度组合并给出明确微调方案,同时严格保护锁定的品牌主色锚点。
限制
- 报告针对平面单色语义对的数学对比度进行评估;复杂图像与半透明遮罩仍需单独审查。
- 色阶质量启发式指标为参考建议,不能替代设计师的主观视觉权衡。
常见问题
检查器会自动修改我的品牌主色吗?
不会。源锚点严格不可变。修复建议仅在经您手动确认后,创建或微调派生的语义令牌。
可以添加自定义的前景/背景语义对吗?
可以。您可以按需添加产品特定的语义对,覆盖真实 UI 场景而不会被全排列数据干扰。
修复操作支持纯键盘访问吗?
支持。所有修复操作均可通过键盘导航并具备清晰焦点,处理结果也会通过屏幕阅读器无障碍实时播报。
权威技术标准与参考文献
- W3C Web Content Accessibility Guidelines (WCAG) 2.2 ↗ — Official contrast thresholds for text and non-text UI components.
- W3C Relative Luminance Definition & Formula ↗ — Relative luminance formula used for semantic pair contrast audits.