WebAIM对比度检查器报告错误，但手动波形对比度检查通过良好

Question

我通过WebAIM对比度检查器运行我的一个网站，惊讶地发现我收到了17个对比度错误，表明文本和背景之间没有足够的颜色对比度。但是，如果我对文本后面的图像中出现的最暗区域进行采样，并将这些值与文本颜色一起手动输入到波形对比度检查器中，则对比度测试可以很好地通过。我还是不明白。

下面是显示我的测试结果的对比度检查器的链接：https://wave.webaim.org/report#/usalearns.org

这是一张屏幕截图，显示了波形对比度检查器手动输入文本后面显示的最暗颜色和文本颜色的结果。

​

Answer 1

如果存在背景渐变、透明度等，则不会测试

对比度。当背景图像存在时，必须定义能够提供足够对比度的CSS背景色。如果图像或CSS不能显示，这将提供回退对比度。

你可以在页面的底部检查对比度。通过检查，我可以看到您的备用背景色与您的文本颜色完全相同：#1B3664;

你必须记住，颜色对比度检查器不能计算出图像的对比度，所以如果你有图像背景，你需要手动检查它。

将.zHomeBanner上的背景颜色更改为#fff，这样即使图像失败，您仍然可以看到文本。

横幅背景颜色

.zHomeBanner {
    background-image: url(/Content/Images/USA-Learns-Homepage-No-Logo-E1Plus.jpg); <------background image
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #1B3664; <------Fallback Background Colour, change to #fff
    padding: 0 10px;
    color: #003466;
    font-size: .95em;

超链接颜色

a {
    color: #1b3664; <---link colour the same as your background colour on container
    text-decoration: underline;
}

快速观察

我能看到的唯一一件事是你的Sign In按钮有轻微的对比度问题，浅蓝色和白色之间的对比度只有4.03:1，所以把它调暗一点。(说“广告”的部分也是同样的问题，但我有AdBlocker，所以我猜这对大多数人来说不是问题)。

哦，“老师点击这里”需要更大的文本，即使它是一个图像。

Answer 2

您必须定义与您的图像匹配的默认背景颜色

也就是说，您不应该完全依赖自动化测试。例如，焦点上的下拉菜单颜色无法实现对比度(#4f80bc / #fff)