处理边界
输入仅在当前浏览器标签页的内存中处理，不会发送到 ByteQuant 服务器。
96
转换工具
颜色对比度检查器
计算相对亮度与对比度，分别显示普通和大号文本的 AA/AAA 结果；仍需测试真实界面。
✓ 免费✓ 无需账户✓ 浏览器内
简短回答
这个工具能做什么？
按 WCAG 对比度与文本阈值比较两种颜色。 颜色对比度检查器的使用边界：请保留源文件，并在目标应用中验证输出兼容性。
- 输入
- 颜色对比度检查器的输入应为受支持的颜色、CSS、SVG、图像或尺寸值。本次处理目标是：按 WCAG 对比度与文本阈值比较两种颜色。
- 输出
- 颜色对比度检查器完成后会提供可预览的视觉值、尺寸或格式摘要，以及可复制或下载的结果，并围绕“按 WCAG 对比度与文本阈值比较两种颜色”组织结果。
- 方法
- 颜色对比度检查器为实现“按 WCAG 对比度与文本阈值比较两种颜色”采用以下可解释方法：使用浏览器 API 和公开的转换公式处理数值，同时保留源内容。
- 核验
- 接受颜色对比度检查器的结果前，请完成在浅色/深色背景、不同屏幕尺寸、目标应用及源内容之间进行视觉比较；核验证据应与“按 WCAG 对比度与文本阈值比较两种颜色”这一目标一致。
工具专属运行方案颜色对比度检查器: 输入与结果指南需要时查看格式、方法与验收标准+
清楚了解颜色对比度检查器需要什么、会返回什么
颜色对比度检查器尤其通过下方任务约定完成“使用颜色对比度检查器完成：按 WCAG 对比度与文本阈值比较两种颜色”。请先用示例确认格式；只有字段与预期结果明确后，才使用真实数据。
- 使用此格式
1 · 准备输入
颜色对比度检查器 — 颜色对比度检查器的输入应为受支持的颜色、CSS、SVG、图像或尺寸值。本次处理目标是：按 WCAG 对比度与文本阈值比较两种颜色。. 颜色对比度检查器的输入应为受支持的颜色、CSS、SVG、图像或尺寸值。本次处理目标是：按 WCAG 对比度与文本阈值比较两种颜色。处理敏感真实数据前，请先用合成示例确认格式。
- 所用方法
2 · 运行处理
颜色对比度检查器 — 颜色对比度检查器为实现“按 WCAG 对比度与文本阈值比较两种颜色”采用以下可解释方法：使用浏览器 API 和公开的转换公式处理数值，同时保留源内容。 运行设备端处理。颜色对比度检查器为实现“按 WCAG 对比度与文本阈值比较两种颜色”采用以下可解释方法：使用浏览器 API 和公开的转换公式处理数值，同时保留源内容。
- 预期输出
3 · 阅读结果
颜色对比度检查器 — 颜色对比度检查器完成后会提供可预览的视觉值、尺寸或格式摘要，以及可复制或下载的结果，并围绕“按 WCAG 对比度与文本阈值比较两种颜色”组织结果。. 在交付到设计系统或发布素材前：颜色对比度检查器完成后会提供可预览的视觉值、尺寸或格式摘要，以及可复制或下载的结果，并围绕“按 WCAG 对比度与文本阈值比较两种颜色”组织结果。
- 验收标准
4 · 验收或修正
颜色对比度检查器 — 接受颜色对比度检查器的结果前，请完成在浅色/深色背景、不同屏幕尺寸、目标应用及源内容之间进行视觉比较；核验证据应与“按 WCAG 对比度与文本阈值比较两种颜色”这一目标一致。. 验收检查：接受颜色对比度检查器的结果前，请完成在浅色/深色背景、不同屏幕尺寸、目标应用及源内容之间进行视觉比较；核验证据应与“按 WCAG 对比度与文本阈值比较两种颜色”这一目标一致。颜色对比度检查器的使用边界：请保留源文件，并在目标应用中验证输出兼容性。
该工具的专属示例路径
1. 使用颜色对比度检查器完成：按 WCAG 对比度与文本阈值比较两种颜色 → 2. 在交付到设计系统或发布素材前：颜色对比度检查器完成后会提供可预览的视觉值、尺寸或格式摘要，以及可复制或下载的结果，并围绕“按 WCAG 对比度与文本阈值比较两种颜色”组织结果。 → 3. 接受颜色对比度检查器的结果前，请完成在浅色/深色背景、不同屏幕尺寸、目标应用及源内容之间进行视觉比较；核验证据应与“按 WCAG 对比度与文本阈值比较两种颜色”这一目标一致。
提示：如果有示例数据按钮，请先运行示例。结果未通过验收标准时，不要用于真实流程。
持久存储
输入和输出不会被保存。可选使用计数器只保留工具标识和次数，不保存内容。
核验
输出依据公开规则或浏览器 API 生成，在高影响使用前需要独立核验。
应用与决策指南
✓ 已审核颜色对比度检查器：正确输入、验收检查与安全的下一步
计算相对亮度与对比度，分别显示普通和大号文本的 AA/AAA 结果；仍需测试真实界面。 以下说明不仅帮助生成结果，还会说明如何判断颜色对比度检查器是否适合当前任务，以及何时应在低质量输出继续流转前停止。
颜色对比度检查器为实现“按 WCAG 对比度与文本阈值比较两种颜色”采用以下可解释方法：使用浏览器 API 和公开的转换公式处理数值，同时保留源内容。 转换后会再次验证目标格式，并说明有损或依赖浏览器的行为。重要文件应保留原始副本。
颜色对比度检查器的输入应为受支持的颜色、CSS、SVG、图像或尺寸值。本次处理目标是：按 WCAG 对比度与文本阈值比较两种颜色。 请先用不含个人数据的小样本确认格式。
颜色对比度检查器完成后会提供可预览的视觉值、尺寸或格式摘要，以及可复制或下载的结果，并围绕“按 WCAG 对比度与文本阈值比较两种颜色”组织结果。 — 接受颜色对比度检查器的结果前，请完成在浅色/深色背景、不同屏幕尺寸、目标应用及源内容之间进行视觉比较；核验证据应与“按 WCAG 对比度与文本阈值比较两种颜色”这一目标一致。
三个实际使用场景
使用颜色对比度检查器完成：按 WCAG 对比度与文本阈值比较两种颜色
执行: 先准备一个代表该需求的小型合成样本。预期输入：颜色对比度检查器的输入应为受支持的颜色、CSS、SVG、图像或尺寸值。本次处理目标是：按 WCAG 对比度与文本阈值比较两种颜色。。
验收信号: 样本应在不使用真实个人数据的情况下复现“使用颜色对比度检查器完成：按 WCAG 对比度与文本阈值比较两种颜色”。
在交付到设计系统或发布素材前：颜色对比度检查器完成后会提供可预览的视觉值、尺寸或格式摘要，以及可复制或下载的结果，并围绕“按 WCAG 对比度与文本阈值比较两种颜色”组织结果。
执行: 保持样本不变并运行设备端方法：颜色对比度检查器为实现“按 WCAG 对比度与文本阈值比较两种颜色”采用以下可解释方法：使用浏览器 API 和公开的转换公式处理数值，同时保留源内容。
验收信号: 相同输入应得到相同结果，不得假设公开方法之外的网络或文件操作。
接受颜色对比度检查器的结果前，请完成在浅色/深色背景、不同屏幕尺寸、目标应用及源内容之间进行视觉比较；核验证据应与“按 WCAG 对比度与文本阈值比较两种颜色”这一目标一致。
执行: 将结果交给目标流程前，先保留输出记录：颜色对比度检查器完成后会提供可预览的视觉值、尺寸或格式摘要，以及可复制或下载的结果，并围绕“按 WCAG 对比度与文本阈值比较两种颜色”组织结果。。
验收信号: 验收要求：接受颜色对比度检查器的结果前，请完成在浅色/深色背景、不同屏幕尺寸、目标应用及源内容之间进行视觉比较；核验证据应与“按 WCAG 对比度与文本阈值比较两种颜色”这一目标一致。；否则不要继续传递结果。
不要将结果用于超出以下边界的决策：颜色对比度检查器的使用边界：请保留源文件，并在目标应用中验证输出兼容性。
只有完成接受颜色对比度检查器的结果前，请完成在浅色/深色背景、不同屏幕尺寸、目标应用及源内容之间进行视觉比较；核验证据应与“按 WCAG 对比度与文本阈值比较两种颜色”这一目标一致。后，才能把结果交给其他工具或真实流程。请在决策记录中明确保留此边界：颜色对比度检查器的使用边界：请保留源文件，并在目标应用中验证输出兼容性。
三步获得结果
- 01
颜色对比度检查器的输入应为受支持的颜色、CSS、SVG、图像或尺寸值。本次处理目标是：按 WCAG 对比度与文本阈值比较两种颜色。处理敏感真实数据前，请先用合成示例确认格式。
- 02
运行设备端处理。颜色对比度检查器为实现“按 WCAG 对比度与文本阈值比较两种颜色”采用以下可解释方法：使用浏览器 API 和公开的转换公式处理数值，同时保留源内容。
- 03
验收检查：接受颜色对比度检查器的结果前，请完成在浅色/深色背景、不同屏幕尺寸、目标应用及源内容之间进行视觉比较；核验证据应与“按 WCAG 对比度与文本阈值比较两种颜色”这一目标一致。颜色对比度检查器的使用边界：请保留源文件，并在目标应用中验证输出兼容性。
该工具何时有用？
- ✓ 使用颜色对比度检查器完成：按 WCAG 对比度与文本阈值比较两种颜色
- ✓ 在交付到设计系统或发布素材前：颜色对比度检查器完成后会提供可预览的视觉值、尺寸或格式摘要，以及可复制或下载的结果，并围绕“按 WCAG 对比度与文本阈值比较两种颜色”组织结果。
- ✓ 接受颜色对比度检查器的结果前，请完成在浅色/深色背景、不同屏幕尺寸、目标应用及源内容之间进行视觉比较；核验证据应与“按 WCAG 对比度与文本阈值比较两种颜色”这一目标一致。
该工具的特定限制
颜色对比度检查器的使用边界：请保留源文件，并在目标应用中验证输出兼容性。
深入了解工作流
该工具的相关指南
无障碍 HTML 发布：语言、标题、表单与可访问名称
超越视觉整洁，通过真实任务验证语言、标题流程、控件名称、键盘操作与错误状态。
阅读指南 →无障碍内容发布的证据化检查清单
在同一发布门禁中验证表格语义、颜色对比度、链接完整性和社交预览。
阅读指南 →关于此工具
常见问题
颜色对比度检查器接受什么输入？+
颜色对比度检查器的输入应为受支持的颜色、CSS、SVG、图像或尺寸值。本次处理目标是：按 WCAG 对比度与文本阈值比较两种颜色。 颜色对比度检查器的输入应为受支持的颜色、CSS、SVG、图像或尺寸值。本次处理目标是：按 WCAG 对比度与文本阈值比较两种颜色。处理敏感真实数据前，请先用合成示例确认格式。
颜色对比度检查器会输出什么？+
颜色对比度检查器完成后会提供可预览的视觉值、尺寸或格式摘要，以及可复制或下载的结果，并围绕“按 WCAG 对比度与文本阈值比较两种颜色”组织结果。 颜色对比度检查器为实现“按 WCAG 对比度与文本阈值比较两种颜色”采用以下可解释方法：使用浏览器 API 和公开的转换公式处理数值，同时保留源内容。
如何核验颜色对比度检查器的输出？+
针对“使用颜色对比度检查器完成：按 WCAG 对比度与文本阈值比较两种颜色”，先完成“运行设备端处理。颜色对比度检查器为实现“按 WCAG 对比度与文本阈值比较两种颜色”采用以下可解释方法：使用浏览器 API 和公开的转换公式处理数值，同时保留源内容。”，再执行“验收检查：接受颜色对比度检查器的结果前，请完成在浅色/深色背景、不同屏幕尺寸、目标应用及源内容之间进行视觉比较；核验证据应与“按 WCAG 对比度与文本阈值比较两种颜色”这一目标一致。颜色对比度检查器的使用边界：请保留源文件，并在目标应用中验证输出兼容性。”。在使用可能产生重要影响的结果前，还应使用边界或错误输入再测试一次。
该工具会向服务器发送或保存输入吗？+
不会。处理在当前浏览器标签页中完成，工具输入不会持久保存。复制、下载或传递只会由您的操作触发。