怎么按 WCAG 检查颜色对比度

两个十六进制值都在手边再打开颜色对比度检查。正文对照 4.5:1，24px 以上的标题对照 3:1，图标和边框对照 3:1。不上传。

1. 记住门槛

   WCAG 2 AA：正文 4.5:1，大字 3:1。AAA：7:1 和 4.5:1。大字是 24px 常规或约 18.7px 粗体。图标、边框和表单控件要 3:1。

   

2. 打开 cv.cm 的颜色对比度检查

   已填一对示例的奶油底粉色。对比度和通过/不通过各行在右侧，文字示例在上方。不上传。

   打开对比度检查

3. 填两个颜色

   文字填 #777777 之类的十六进制值，背景填 #ffffff，或者用色块挑。三位的 #777 也行。示例会随输入更新。

4. 读对比度和各行

   #ffffff 上的 #777777 是 4.48:1：AA 大字和界面元件通过，AA 正文不通过。每一行按自己的门槛写「通过」或「不通过」。

5. 采用建议的颜色

   正文 AA 不通过时，页面会朝黑或白的方向建议最接近且达到 4.5:1 的文字色。白底上的 #777777 会建议 #767676。「交换」把文字和背景对调。

   

6. 每种状态都查，然后复制

   链接、悬停和禁用的颜色都再查一遍；图片上的文字，拿图片最暗的部分当背景。「复制」把颜色、对比度和结果放到剪贴板。