颜色对比度检查器

检查前景与背景颜色的 WCAG 对比度,包括普通与大号文字的 AA/AAA 标准

颜色

选择要比较的前景色和背景色

结果

包含透明度的颜色会先与白色混合后计算对比度

对比度18.88:1
AA(普通): 通过AA(大号): 通过AAA(普通): 通过AAA(大号): 通过
前景色#111111
背景色#FFFFFF

Aa Bb Cc 123

预览

普通文本 / 大号文本

普通文本

Aa Bb Cc 123

大号文本

Aa Bb Cc 123

什么是颜色对比度?

对比度比值衡量文本(前景)与背景之间的亮度差异,范围从 1:1(无对比)到 21:1(黑字白底)

本工具会将颜色转换为 sRGB,先处理透明度混合,再按 WCAG 相对亮度公式计算

WCAG 阈值

  • AA:普通文本 4.5:1,大号文本 3:1
  • AAA:普通文本 7:1,大号文本 4.5:1
  • 大号文本指至少 18 pt 的常规文字,或至少 14 pt 的加粗文字
  • UI 组件、图标和图形对象建议至少 3:1

更高的对比度更易读,尤其是细字重或小字号

使用方法

输入前景色和背景色,或使用颜色控件选择颜色。结果会自动更新 WCAG 对比度以及 AA/AAA 状态;也可以交换两种颜色检查反向组合