TingYu Tools

颜色对比度(WCAG)

输入前景/背景颜色,计算对比度与 AA/AAA 通过情况。

输入颜色

输入文本颜色的 HEX 值
输入背景颜色的 HEX 值
💡 使用说明

什么是 WCAG?

WCAG(Web Content Accessibility Guidelines)是网页内容无障碍指南,定义了文本与背景颜色对比度的最低标准,确保视觉障碍人士能够轻松阅读网页内容。

WCAG 等级说明

  • AA 级: AA 级(最低要求):正常文本对比度 ≥ 4.5:1,大文本 ≥ 3:1
  • AAA 级: AAA 级(增强要求):正常文本对比度 ≥ 7:1,大文本 ≥ 4.5:1

文本大小定义

  • 正常文本:小于 18pt(24px)或小于 14pt(18.5px)粗体
  • 大文本:大于等于 18pt(24px)或大于等于 14pt(18.5px)粗体

功能特点

  • 实时计算颜色对比度
  • WCAG AA/AAA 等级检测
  • 区分正常文本和大文本标准
  • 实时颜色预览
  • 显示相对亮度值

应用场景

  • 网页设计无障碍检查
  • UI 配色方案验证
  • 文本可读性测试
  • WCAG 合规性审查

使用技巧

  • 深色文本配浅色背景通常对比度更高
  • 大文本对对比度要求较低
  • 至少要满足 AA 级标准
  • 尽量争取达到 AAA 级以获得最佳可读性

对比度结果

21.00:1
对比度比值

正常文本

AA 级✓ 通过
AAA 级✓ 通过

大文本

AA 级✓ 通过
AAA 级✓ 通过
✓ 对比度良好,易于阅读

颜色预览

正常文本示例
示例文本 AaBbCc 123
大文本示例
大文本 AaBbCc
颜色信息
前景色
#000000
前景相对亮度0.0000
背景色
#ffffff
背景相对亮度1.0000