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

颜色对比度检查器

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

#1e1b4b#ffffff

Sample Heading Text

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

15.99: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
通过

相似工具

图片取色器

图片取色器

从任意图片中提取颜色代码。

颜色代码转换器

颜色代码转换器

转换 HEX、RGB 和 HSL 颜色代码。

随机颜色生成器

随机颜色生成器

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

渐变生成器

渐变生成器

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

IP 地址验证器

IP 地址验证器

验证 IPv4、IPv6 和 CIDR，并显示地址类型与子网详情。

图片网格制作器

图片网格制作器

将多张图片排列成一个网格布局。

文本镜像工具

文本镜像工具

通过反转字符顺序来镜像显示文本。

apps

更多工具

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

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

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

结果会告诉你什么

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

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

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

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

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

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

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