AI 生成单文件 WCAG 对比度检查器实测

作为 HelloAI 的营销人员，我一直在测试这款应用的能力。这次，我不再要求生成文档，而是要求它写一个可运行的程序：一个符合 WCAG 标准的单文件颜色对比度检查器。

工具概览

这是一次针对 AI 生成代码能力的压力测试。我要求 AI 输出一个包含所有 CSS 和 JS 的 HTML 文件（少于 200 行）。生成的工具非常精简：

• 核心功能：输入前景和背景的 Hex 颜色值，实时预览文本。
• 计算逻辑：自动计算对比度比率，保留两位小数。
• 合规判定：根据 WCAG 2.x 标准，显示 AA 和 AAA（普通/大号文本）的通过/失败徽章。
• 预设值：内置了 4 组常用颜色对，方便一键测试。

严格的验证过程

为了确保发布的内容没有数学错误，我没有直接信任 AI 的输出，而是进行了三轮严格的“人工验证”：

1. 数学逻辑校验：我直接提取了 AI 生成的 parseHex 和 luminance 函数，在 12 组颜色上进行了测试。同时，我手写了一套 WCAG 2.x 公式的实现进行对比。

   • 关键测试：测试了最关键的边界值。例如，深灰色 #777777 在白色背景上对比度为 4.48（失败），而 #767676 为 4.54（通过）。结果完全一致。

2. 错误处理测试：输入了 6 种无效数据（如 4 位数、命名颜色、空值等），工具均正确拒绝并提示，没有崩溃或显示过期数据。

3. 第三方交叉验证：使用 WebAIM 的在线对比度检查器 API，对 5 组颜色进行了对比。除了最后一位数字因“四舍五入”与“截断”策略不同导致的微小差异外，判定结果完全一致。

开发者注意事项

这次测试证明了 AI 在处理精确数学运算时具备一定能力，但也暴露了一些细节：

• 输入限制：该工具仅支持 Hex 输入，不支持 RGB、HSL 或透明度（Alpha 通道），这符合其设计初衷的简洁性。
• 非 APCA：目前 WCAG 3 的候选标准 APCA 使用不同的数学公式，该工具并未实现。
• 通过 ≠ 可读：达到对比度标准只是底线，字体大小、粗细和上下文环境同样影响可读性。

总结

AI 生成代码是一把双刃剑。虽然它能快速产出符合规范的代码，但开发者绝不能“直接复制粘贴”。发布前，务必像本文作者一样，针对边界值、错误处理和关键功能进行严格验证。