WebAIM 对比度检查器报告错误，但手动 WAVE 对比度检查却能正常通过。

Posted 2023-01-29

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

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

而这里是WAVE Contrast Checker手动输入文字后面出现的最暗颜色与文字颜色的屏幕截图。

答案

当背景渐变、透明度等存在时，对比度不会被测试。当有背景图片时，必须定义一个能提供足够对比度的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，所以猜测这对大多数人来说不是问题)。

哦，'教师点击这里'需要更大的文字，即使它是一张图片。

另一答案

你必须定义一个与你的图片相匹配的默认背景色。

也就是说，你不应该完全依赖自动化测试。例如，你的drowpdown菜单颜色在焦点上的对比度失败(#4f80bc #fff)