辅助功能 - 如何找到对比度问题？

Question

我正在努力寻找检查辅助功能的好工具。我测试的其中一个工具说我应该在设置CSS background-color时设置CSS color。

不幸的是，这对我来说不是一个真正的选择，但我可以理解为什么这样说：color是明确继承的，但background-color不是。但是background-color是一种隐式继承的，因为子HTML元素（通常）包含在屏幕上的父元素中。

现在，有了最后一个假设（隐式继承），有没有办法找到实际出现对比问题的HTML元素？ JavaScript的？ Chrome工作区？ FF dito？

Answer 1

以下是检查内容是否存在辅助功能问题的实用程序列表。

10 colour contrast checking tools to improve the accessibility of your design

Answer 2

在http://wave.webaim.org

查看WAVE

他们有一个FireFox插件，但要注意它并不像网站那样最新，所以你可能会部署一个页面并发现即使在通过插件测试后它也无法通过在线检查。

Answer 3

Chrome DevTools 有一项名为 CSS 概览的新功能。进入你的 DevTools 设置，进入 Experiments，然后激活 CSS Overview。然后，您可以在此上拍摄您网站的概览剪辑，它会告诉您您可能遇到的任何对比度问题。例如，在这个网站的黑暗模式下，它向我展示了这个：

AA 和 AAA 是指达到的合规标准。