首页 / 对比度检查器

文字对比度检查器

输入文字色与背景色,立刻得到 WCAG 对比度与 AA / AAA 达标结果。配色时最容易踩的坑,5 秒确认完。

点一下就把该套配色的正文色与背景色填进输入框

—对比度

这段正文用的是你选的文字色与背景色。字号调大或加粗之后,门槛会从 4.5:1 放宽到 3:1。

这是大字示例

  • AA · 正文(18px 以下)≥ 4.5:1—
  • AAA · 正文(18px 以下)≥ 7:1—
  • AA · 大字(18px 以上,或 14px 加粗以上)≥ 3:1—
  • AAA · 大字(18px 以上,或 14px 加粗以上)≥ 4.5:1—

从配色库取色

点一下就把该套配色的正文色与背景色填进输入框

WCAG 对比度是怎么算的

WCAG 2.1 用相对亮度算对比度:先把 sRGB 的每个通道线性化,按红 0.2126、绿 0.7152、蓝 0.0722 加权得到相对亮度,再用 (L1 + 0.05) / (L2 + 0.05) 求比值,范围从 1:1 到 21:1。

正文要求 4.5:1(AA)或 7:1(AAA);18px 以上,或 14px 以上加粗的文字,门槛降到 3:1(AA)与 4.5:1(AAA)。

配色库里每一套都通过了正文级校验,所以直接从库里取色是安全的。