颜色对比度检查器

使用实时示例检查 WCAG AA 和 AAA 对比度。

免费 - 无需注册 - 在您的设备上运行

在浏览器中本地运行

  • 实时结果
  • 0次上传
  • 一键保存
  • 免费无需账户
实际使用

可以放心的地方

  • 0次上传
    • 您的输入保留在设备上
    • 不会发送任何内容进行处理
  • 实时输出
    • 结果在工作区中更新
    • 更改输入并即时比较
  • 一键保存
    • 复制结果
    • 无需账户或安装
规格

颜色对比度检查器 规格一览

输入
前景色和背景色。
输出
对比度比率以及两种文本大小的 AA 或 AAA
方法
WCAG 相对亮度和对比度计算。
输入与预览
可贴 hex；16px 与 24px 样本
价格
免费
处理位置
在您的设备上
使用方法

颜色对比度检查器 怎么用

  1. 1

    设定两种颜色

    选文字颜色和背景颜色，就是你打算搭配的那一组。

  2. 2

    查看对比结果

    示例区用 16 和 24 像素显示这组配色，下面是对比度和四项 WCAG 判定的通过或不通过。

  3. 3

    复制判定结果

    一个“复制结果”按钮把对比度和四项判定一起带走，方便写进记录。

问题

常见问题

这个工具无需上传任何内容就能工作吗？

是的。该工具在浏览器标签页内处理您的输入。不会发送到处理服务器或存储在账户中。

我可以在复制前更改结果吗？

可以。调整任何可用控件，结果会更新。仅在输出符合需求时复制。

支持哪些浏览器？

当前版本的 Chrome、Edge、Firefox 和 Safari 支持此处使用的浏览器功能。非常旧的浏览器可能缺少所需的 API。

背景说明

AA 与 AAA 各自代表什么

WCAG 要求普通文字 4.5:1、大字 3:1 才通过 AA，7:1 才通过 AAA。大字指 24px，加粗则为 18.66px。

  • 对比是与文字背后真正的颜色相比，所以卡片、按钮和图片上的文字要分开检查。
  • 数字通过不等于好读。字重太细、字号太小，都会比数字看起来更难阅读。

完整规格

颜色对比度检查器 的完整规格
输入前景色和背景色。
输出对比度比率以及两种文本大小的 AA 或 AAA 结果。
方法WCAG 相对亮度和对比度计算。
输入与预览两色旁边都有 hex 文字框可贴品牌色。样本用你选的两色实画 16px 正常与 24px 粗体。
价格免费。由工作区外明确标注的广告支持。
处理位置在您的浏览器标签页中。您的输入永远不会上传。
下一步

用同一批文件继续做

全部色彩工具： SPOTTOOLS 的色彩工具