Chrome 的开发者工具“CSS 概览”在发布页面上标记了 10 种颜色组合存在对比度问题,其中 6 种较为严重(对比度甚至低于 WCAG AA 最低标准)。具体如下:
- 前述“高亮”卡片的颜色:白色文字叠加在
--color-feature上 - “← 返回版本”链接:中等蓝色文字叠加在黑色背景上,对比度仅为 3.9:1
- 安全修复卡片上的“显示”展开切换按钮:小字号白色文字以 80% 不透明度叠加在红色背景上,对比度仅为 4.01:1。(其余安全修复文本的对比度为 5.43:1,因为它们不是半透明的。)
- “DEV”徽章:白色文字叠加在灰绿色背景色
#7f8c8d上,对比度为 3.47:1 - 所有提交日期及其他
--text-muted(#888)文字叠加在--bg-card(#2d2d2d)上,对比度为 3.08:1 - “安全”徽章:白色文字叠加在
#d36500(基本上是橙色)上,对比度为 4.16:1。
哦,另外,如果我再往下滚动一点,还会发现“翻译”徽章:白色文字叠加在 #e91e63(放射性荧光品红)上,对比度为 4.34:1。