颜色对比度检查器：WCAG AA / AAA 文本与界面对比检测

• WCAG AA / AAA 结果表

  同时给出普通文本、大号文本、UI 组件的检测结果，避免只看一个总分就误判使用场景。

• 多格式颜色输入

  支持 Hex、RGB、HSL、OKLCH 等 CSS 颜色格式，适合从设计稿、浏览器 DevTools 或主题变量中直接复制色值。

• 透明色合成计算

  当前景色或背景色带有透明度时，先按实际背景进行合成，再计算更接近页面渲染结果的对比度。

• 推荐前景色

  对当前背景分别计算黑色和白色文字的对比度，并给出更稳妥的文字颜色建议。

• AA / AAA 修复候选色

  当当前颜色不达标时，生成可达到 AA 或 AAA 阈值的前景色，便于快速试色和修复。

• CSS 与检测报告复制

  复制可直接使用的 color / background-color 代码，也可以复制检测报告放入评审记录、缺陷单或 PR 描述。

• 常见界面预设

  内置正文、链接、按钮、警告徽标、暗色模式文本等组合，用于快速检查常见 UI 场景。

• 对比度比值

  WCAG 使用 1:1 到 21:1 表示两种颜色的亮度差异。1:1 表示几乎没有差异，21:1 通常是黑白之间的最高对比。

• 相对亮度

  对比度不是简单比较 RGB 数字大小，而是按 sRGB 颜色空间计算相对亮度，再用标准公式得出比值。

• WCAG AA

  AA 是多数网站和 Web 应用采用的基础可访问性目标。普通文本需要至少 4.5:1，大号文本和 UI 组件通常需要 3:1。

• WCAG AAA

  AAA 要求更高，普通文本需要 7:1。它更适合正文阅读、公共服务、教育内容和对可读性要求高的页面。

• 普通文本与大号文本

  普通文本通常指常规正文和说明文案；大号文本一般指 18pt regular 或 14pt bold 以上的文本，阈值相对宽松。

• UI 组件对比度

  按钮边框、输入框边界、图标、选中状态和错误状态也需要被识别。UI 组件检测关注的是控件是否能被看清，而不只是文字。

• 透明色合成

  rgba、hsla 或带 alpha 的 OKLCH 颜色会受到底色影响。先合成再检测，才能得到更接近真实页面的结果。

• OKLCH 与感知亮度

  OKLCH 更接近人眼对亮度和色度的感知，在做主题色阶、暗色模式和可访问性色板时通常比 HSL 更稳定。

1. 1

   把文字、图标或控件的颜色填入前景色，把所在容器或页面底色填入背景色。

2. 2

   选择检测目标：正文使用普通文本，标题或大字号标签使用大号文本，按钮边框、输入框边界和图标使用 UI 组件。

3. 3

   查看当前对比度比值和 WCAG 结果表，确认 AA 或 AAA 是否通过。

4. 4

   如果不通过，先尝试推荐文字色，再根据需要生成 AA 或 AAA 前景色。

5. 5

   复制 CSS 或检测报告，写入样式代码、设计评审记录、测试备注或无障碍整改说明。

• 同一页面展示普通文本 AA、普通文本 AAA、大号文本 AA、大号文本 AAA 和 UI 组件 AA，便于判断颜色适用范围。
• 透明色会展示合成后的实际计算色，适合检查浮层、半透明按钮、玻璃态卡片和深色模式叠层。
• 支持一键交换前景色和背景色，方便检查反色按钮、选中态、标签反白和暗色模式变体。
• 复制报告时会保留前景色、背景色、对比度比值和每一项 WCAG 结果，便于团队留档。
• 预设覆盖正文、弱化文本、链接、主按钮、成功/危险按钮、警告徽标和暗色模式文本。
• 可作为设计系统色板整理、品牌色落地、组件库验收、无障碍修复的辅助工具。
• 结果文案区分“普通正文可用”“仅适合大号文本或 UI 组件”“不建议使用”，减少误用。

如果颜色来自设计稿、截图或旧 CSS，并且格式混杂，先在 颜色转换器 中统一色值后再检测。若同一组颜色在多个状态里反复不达标，与其零散替换，不如回到 调色板生成器 重新整理可用色阶，让修复结果更像系统，而不是临时补丁。

• 设计稿交付前检查

  在视觉稿进入开发前检查正文、标题、按钮、链接和状态标签，减少开发阶段返工。

• 组件库与设计系统验收

  验证 Button、Input、Badge、Alert、Tabs 等组件在默认、悬停、禁用和错误状态下是否可辨识。

• 暗色模式颜色调试

  检查深色背景上的正文、次要文字、边框和图标，避免灰度过低或色彩过暗。

• 品牌色上线评估

  品牌主色用于按钮、链接和强调信息时，确认是否符合对比度要求，并准备可替代色阶。

• 无障碍问题修复

  针对 Lighthouse、axe、QA 或用户反馈中提出的低对比度问题，快速定位和记录修复方案。

• 内容型页面可读性优化

  适合博客、文档、帮助中心、产品说明页和长表单页面，确保正文和辅助说明具备足够可读性。

• 营销页面与落地页检查

  检查 Hero 文案、CTA 按钮、价格标签和活动横幅，避免视觉冲击影响文字辨识。

• 后台管理系统主题维护

  在表格、筛选器、状态点、侧边栏和仪表盘卡片中维持一致的对比度基线。

• 正文、表单标签、错误提示、帮助文本优先满足普通文本 AA；阅读密度高的页面建议继续提升到 AAA。
• 禁用态也需要可识别，但不要把低对比度当成唯一的禁用表达，应同时使用透明度、图标或状态文案。
• 暗色模式中优先调整亮度层级，再调整饱和度；只增加饱和度通常不能解决可读性问题。
• 按钮、链接和状态标签要分别检查默认、悬停、聚焦、选中和禁用状态。
• 半透明背景、毛玻璃卡片和浮层要按实际页面底色检查，不要只检测设计稿中的单一色值。
• 将通过验证的颜色组合沉淀为设计 token，例如 text-primary、text-muted、surface-card、border-subtle。
• 品牌色如果不达标，优先建立深浅色阶，而不是在不同页面临时改一个近似色。
• 在 PR、设计评审和发布检查清单中加入颜色对比度项，减少后期无障碍缺陷。

• 通过 WCAG 对比度不代表页面完全无障碍，还需要检查语义结构、键盘操作、焦点样式、错误提示和屏幕阅读器体验。
• 图片、视频、复杂纹理和渐变背景上的文字需要在真实页面区域取样，单一背景色检测只能作为参考。
• 自动生成的 AA / AAA 颜色适合快速试色，正式采用前仍应结合品牌规范、主题色阶和视觉层级确认。
• 不同屏幕、浏览器、系统色彩管理和环境光会影响体感可读性，关键页面建议在真实设备上复核。
• 工具根据当前输入色计算结果，不会自动读取你项目中的 CSS 变量、Tailwind 配置或设计 token。
• APCA 与 WCAG 2.x 使用不同的对比度模型。本工具当前以 WCAG 2.x 对比度比值为准。