Mathias Bynens
本文介绍了我们在开发者工具和 Blink 渲染程序中实现色觉缺陷模拟的原因和方式。
背景：色彩对比度不佳
低对比度文本是网络上最常见的自动检测到的无障碍功能问题。
根据 WebAIM 对 100 万个热门网站进行的无障碍功能分析，超过 86% 的首页对比度较低。平均而言，每个首页都有 36 个不同的低对比度文本实例。
使用开发者工具查找、了解和修复对比度问题
Chrome 开发者工具可帮助开发者和设计师提高对比度，并为 Web 应用选择更易于访问的配色方案：
- 网页顶部的“检查模式”提示会显示文本元素的对比度。
- 开发者工具的颜色选择器会指出文本元素的对比度不佳，显示建议的对比度线，以帮助手动选择更好的颜色，甚至可以建议易辨认的颜色。
- CSS Overview 面板和 Lighthouse 无障碍功能审核报告都会列出网页上发现的低对比度文本元素。
我们最近在此列表中添加了一款新工具，它与其他工具略有不同。上述工具主要用于显示对比度信息，并为您提供修正对比度的方法。我们意识到，开发者仍缺少一种方法来更深入地了解此问题领域。为此，我们在开发者工具的“呈现”标签页中实现了视觉缺陷模拟。
在 Puppeteer 中，您可以使用新的 page.emulateVisionDeficiency(type) API 以编程方式启用这些模拟。
色觉缺陷
大约每 20 人中就有 1 人患有色觉缺陷（又称“色盲”，但这个词不太准确）。这种障碍会令人更难分辨不同的颜色，从而放大对比度问题。