跳至主要内容
FreeKitX

色彩系统检查器(色域与 WCAG 对) - FreeKitX

收藏到浏览器

将此页保存到浏览器书签

手机端在浏览器的分享或菜单中选择“添加书签”。

审计 sRGB/Display-P3 色域、WCAG 2.2 语义对与色阶质量;显式修复,绝不静默改动品牌色。

颜色系统检查器

检查 sRGB 与 Display-P3 色域、WCAG 2.2 语义配对、色阶质量和修复建议。建议不会阻止导出,修复须经确认才会应用。

源颜色

本地交接

恢复本地草稿、交换项目 JSON 文件,或分享仅留在本设备上的限长 URL 片段。

导入颜色

粘贴颜色、CSS 自定义属性或 DTCG 2025.10 JSON。解析不会执行 CSS 或获取资源;确认替换或合并前不会更改项目。

0

直接答案

色彩系统检查器用于评估色域归属、WCAG 2.2 关键语义对对比度以及感知色阶平滑度,并在发现问题时提供明确由用户确认的修复方案。

如何使用此工具

1

进入检查器阶段

直接从色彩系统检查器页面进入,或从构建器无缝承接当前内存中的色彩项目。

2

审查审计报告

查看 sRGB 与 Display-P3 分类、WCAG 文本及组件语义对结果,以及亮度单调性与相邻梯度的色阶质量提示。

3

应用显式修复

确认包含调整目标、修改令牌、建议值与影响的修复方案——原始品牌锚点始终锁定不变。

语义对对比度与真实色域审计

对比度检测基于 WCAG 2.2 相对亮度公式针对具有真实界面含义的前景/背景语义关系进行审计,而非生成不可读的全排列噪音矩阵。超色域 Display-P3 颜色提供确定性的感知 sRGB 回退说明,杜绝静默通道裁切。

  • 修复方案绝不会静默修改不可变的品牌源颜色;无障碍合规调整全部由派生令牌吸收。
  • 当 WCAG 未针对特定关系定义非文本 AAA 时,系统不会凭空虚构不存在的达标评级。
  • 所有检测全部在浏览器端侧针对当前色彩系统文档即时执行。

实用示例

主色在表面背景上的 AA 对比度审计

输入: 语义角色:Surface 表面上的 Text 文本与 Primary #2563eb 强调色

输出: 语义对合规报告,包含 AA/AAA 状态与可选的派生修复令牌建议

展示未通过的对比度组合并给出明确微调方案,同时严格保护锁定的品牌主色锚点。

限制

  • 报告针对平面单色语义对的数学对比度进行评估;复杂图像与半透明遮罩仍需单独审查。
  • 色阶质量启发式指标为参考建议,不能替代设计师的主观视觉权衡。

常见问题

检查器会自动修改我的品牌主色吗?

不会。源锚点严格不可变。修复建议仅在经您手动确认后,创建或微调派生的语义令牌。

可以添加自定义的前景/背景语义对吗?

可以。您可以按需添加产品特定的语义对,覆盖真实 UI 场景而不会被全排列数据干扰。

修复操作支持纯键盘访问吗?

支持。所有修复操作均可通过键盘导航并具备清晰焦点,处理结果也会通过屏幕阅读器无障碍实时播报。

权威技术标准与参考文献