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阴影效果，支持实时预览。

视频镜像工具

视频镜像工具

视频镜像工具可直接在浏览器中水平或垂直镜像录制内容。适合快速、私密地整理媒体、发布内容、制作课程、演示和日常编辑。

HEX 转 Tailwind 转换器

HEX 转 Tailwind 转换器

将 HEX 颜色转换为最接近的 Tailwind CSS 颜色类。

视频 FPS 转换器

视频 FPS 转换器

视频 FPS 转换器可直接在浏览器中调整帧率以获得更流畅动作或更小文件。适合快速、私密地整理媒体、发布内容、制作课程、演示和日常编辑。

apps

更多工具

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

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

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

结果会告诉你什么

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

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

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

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

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

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

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