Tiny Online Tools logoTiny Online Toolssearch搜索工具…grid_view全部工具
首页chevron_right设计工具chevron_right颜色对比度检查器颜色对比度检查器

颜色对比度检查器

检查WCAG 2.1颜色对比度比例，确保无障碍访问。

#f8fafc#111827

Sample Heading Text

The quick brown fox jumps over the lazy dog. This is body text at 16px to demonstrate readability at normal size.

16.96:1
Contrast Ratio
WCAG 2.1 结果
check_circle
AA Normal Text
Min 4.5:1 — Body text, UI components
通过
check_circle
AA Large Text
Min 3:1 — 18pt+ or 14pt+ bold
通过
check_circle
AAA Normal Text
Min 7:1 — Enhanced: body text
通过
check_circle
AAA Large Text
Min 4.5:1 — Enhanced: large text
通过

相似工具

渐变生成器

渐变生成器

通过实时预览可视化创建 CSS 渐变。

随机颜色生成器

随机颜色生成器

使用和谐规则生成随机调色板。

Border Radius 生成器

Border Radius 生成器

可视化控制圆角效果并复制CSS代码。

Box Shadow 生成器

Box Shadow 生成器

可视化创建CSS阴影效果，支持实时预览。

文本差异检查器

文本差异检查器

比较 two texts 和 highlight differences.

邮箱生成器

邮箱生成器

为测试和开发生成随机邮箱地址。

CSS 格式化器

CSS 格式化器

格式化 CSS 代码，让它更易读。

apps

更多工具

浏览我们完整的免费在线工具集合。

在颜色上线前先检查对比度

一组配色可能看起来很好看，但仍然达不到无障碍要求。这个检查器可以帮你把前景色和背景色与 WCAG 对比度标准进行比对，在它们进入设计系统、组件库或正式产品之前先发现问题。

结果会告诉你什么

工具会显示对比度数值，以及该配色是否通过常见的 WCAG 级别：

  • AA 正文文本
  • AA 大字号文本
  • AAA 正文文本
  • AAA 大字号文本

为什么这在真实项目里很重要

颜色对比度检查特别适合这些情况：

  • 验证品牌色在组件中的可读性
  • 测试按钮、卡片和横幅上的文字颜色
  • 在设计交付阶段检查无障碍问题
  • 避免低视力用户难以辨认的颜色组合

通过标准并不代表一切都没问题

有些颜色组合虽然技术上通过，但在小字号或细字重下仍然会让人读起来吃力。看完通过结果后，最好再结合真实文本大小看一下实时预览。