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 渐变。

随机颜色生成器

随机颜色生成器

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

PDF 无障碍检查器

PDF 无障碍检查器

按机器可核实的 WCAG 与 PDF/UA 规则检查 PDF 的标签、阅读顺序、替代文字、语言与标题层级。

Border Radius 生成器

Border Radius 生成器

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

文本大小写转换器

文本大小写转换器

在camelCase、PascalCase、snake_case、kebab-case、SCREAMING_SNAKE等8种格式之间转换文本。

SVG ViewBox 生成器

SVG ViewBox 生成器

通过实时预览生成并调整 SVG 的 viewBox 值，可添加留白并微调坐标。

PDF 表单数据提取器

PDF 表单数据提取器

把已填写的 PDF 表单值导出为 JSON、CSV、FDF 或 XFDF，并支持批量：多个表单，一张表格。

apps

更多工具

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

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

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

结果会告诉你什么

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

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

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

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

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

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

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