跳到内容
RapideTools

对比度检查器

依据 WCAG AA/AAA 检查颜色对比度。

良好的颜色对比度能让文字和界面元素对每个人都保持可读,包括低视力人群。选择一种前景色和一种背景色,即可查看 WCAG 对比度,以及它在正常文本、大号文本和界面组件方面是否通过 AA 和 AAA——当对比度不足时,还会提供简单的改进建议。

良好的对比度可让文字和界面对所有人(包括低视力人群)都清晰可读。正文建议至少达到 4.5:1。

天地玄黄 宇宙洪荒 The quick brown fox

天地玄黄 宇宙洪荒 The quick brown fox

对比度21.00:1
正文文字 AA · 4.5
正文文字 AAA · 7
大号文字 AA · 3
大号文字 AAA · 4.5
UI 组件 3.0

所有颜色转换均在你的浏览器本地完成 —— 不上传、不存储、不记录。

工作原理

  1. 1 选择一种前景色(文字)。
  2. 2 选择一种背景色。
  3. 3 查看对比度以及 AA/AAA 是否通过。
  4. 4 按照建议进行调整,直到通过为止。

常见用例

  • 确保正文文本满足 WCAG AA(4.5:1)。
  • 检查按钮和链接颜色的无障碍性。
  • 在上线前验证品牌调色板。
  • 避免难以辨认的低对比度文字。

常见问题

我的颜色数据会被发送到任何地方吗?

不会。每一次转换和计算都完全在您的浏览器中运行——不会上传、存储或记录任何内容。

AA 和 AAA 分别要求多少对比度?

AA 要求正常文本达到 4.5:1,大号文本达到 3:1(≥18.66px 加粗或 ≥24px)。AAA 要求 7:1 和 4.5:1。界面组件和图形至少需要 3:1。

对比度是如何计算的?

使用官方 WCAG 公式:(L1 + 0.05) / (L2 + 0.05),其中 L1/L2 分别是较亮颜色和较暗颜色的相对亮度。

真的免费吗?

是的——免费,无需注册,无水印,无限制。

颜色转换器

在 HEX、RGB、HSL、HSV 和 CMYK 之间转换。

打开工具

配色方案生成器

从基础色生成和谐配色方案。

打开工具

色阶生成器

从基础色生成明暗色阶。

打开工具