可访问性 - 我如何找到对比度问题？答案

【问题标题】：Accessibility - how do I find contrast problems?可访问性 - 我如何找到对比度问题？
【发布时间】：2021-06-22 18:37:51
【问题描述】：

我正在努力寻找检查可访问性的好工具。我测试的其中一个工具说，每当我设置 CSS color 时，我都应该设置 CSS background-color。

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

现在，有了最后一个假设（隐式继承），有没有办法找到实际发生对比度问题的 HTML 元素？ Javascript？铬工作区？ FF 同上？

【问题讨论】：

【解决方案1】：

以下是用于检查您的内容是否存在可访问性问题的实用程序列表。

【讨论】：

【解决方案2】：

在http://wave.webaim.org查看 WAVE

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

【讨论】：

【解决方案3】：

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

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

【讨论】：