在 Chrome 渲染器模拟后如何改变元素的颜色？答案

【问题标题】：How do you get changed color of element after Chrome renderer emulation?在 Chrome 渲染器模拟后如何改变元素的颜色？
【发布时间】：2020-09-19 23:16:12
【问题描述】：

Chrome 为其渲染器（在开发工具中）引入了一个选项，以模拟色盲等视觉缺陷。然而，这些“过滤器”不会改变我可以通过 JavaScript 访问的 CSS 或计算样式。

在 Chrome 中应用 Tritanopia 等视力缺陷过滤器后，有没有办法以编程方式获取元素和文本的渲染颜色？

此功能的 Chrome 开发者更新链接：What's New In DevTools (Chrome 83)

我试过了：

通过页面js访问Element.style。
使用getComputedStyle。
杂项。 Puppeteer 方法。

【问题讨论】：

标签： javascript google-chrome google-chrome-devtools accessibility puppeteer

【解决方案1】：

未使用 Chrome 开发工具或任何当前的颜色选择器插件。看起来过滤器完全独立地应用于任何暴露的值并应用在页面顶部（看到这一点的最简单方法是从菜单中选择“模糊视觉”，您会看到任何插件也收到相同的模糊效果） .

快速而肮脏的方式（不是以编程方式）

最好的办法是使用colour contrast analyser from paciello group 或存在于浏览器之外并在应用过滤器后获取实际像素颜色值的类似软件。

显然我知道这不是以编程方式。

以编程方式

您可以自己构建一些东西。

您可能会发现this page on colour blindness simulation in JS 非常有用，因为它解释了如何对 RGB 颜色进行转换以模拟色盲。然后你需要做的就是创建一个颜色选择器覆盖（或者你可以输入十六进制值并获得相应颜色的东西）。

另一种方法是在页面上添加SVG colour filter that simulates colour blindness，然后只使用normal colour picker plugin.

也许可以添加对这个功能的请求，因为它会让生活更轻松！

【讨论】：

感谢您的建议 :) 但是，使用 CSS 或 SVG 过滤器似乎无法修改我可以通过编程方式获取的值。你知道通过 javascript 读取修改后的颜色的方法吗？
第一个链接标题为“此页面在 JS 中模拟色盲”包含您构建自己所需的一切。 没有办法使用 JS 读取修改后的颜色恐怕由于如何应用滤色器，实现这一点的唯一方法是复制滤色器，然后计算最终颜色，所以你可以抓住最终的颜色。问题实际上是为什么您需要以编程方式解决这个问题，因为可能有更好的方法来实现您的最终目标。
最终目标将是完全自动化测试文本和背景元素之间的对比度，即使对于色盲用户，在大量需要检查的元素的大量页面上也是如此。目前我只能大规模地为正常视力的人这样做。
所以你会使用你现有的方法来获取前景色和背景色。通过JS colour blindness matrix 运行它们以计算每种色盲类型（前景和背景）的最终颜色，然后使用颜色对比公式进行测试 - 请参阅luminance formula 和 how to calculate colour contrast
非常感谢您提供的链接！这似乎是前进的方向。