Chrome 新增开发者工具，帮助开发对色盲友好的页面

Chrome 开发者透露了正在开发中的一个可以帮助开发者使网站对色盲更加友好的开发者工具 Color Vision Deficiency（CVD，色觉障碍/色盲）。

根据 ColourBlindAwareness.org 的说法，目前全球大约有 3 亿色盲人群。新的 Chrome 将通过 DevTools 在任何给定的网页上模拟全色盲、红色盲与绿色盲等色盲人群看到的样式。需要包括以下内容：

• 引入 Chrome DevTools 协议（CDP） API（Emulation＃setEmulatedColorVisionDeficiency），以支持通过 CDP 以编程方式启用这些模拟。
• 引入新的 Puppeteer API，以编程方式支持通过 CDP 进行这些模拟。
• 在 DevTools colorpicker 小部件中展开对比度检查器，以检查已知色盲之间的对比度问题。
• 向可访问性审核添加一个 Lighthouse 测试，以使用新功能，并检查每个模拟的对比级别。

长期而言，CVD 理想情况下将在 Blink Renderer 级别获得一级支持，因此可以在不更改文档或不影响计算样式的情况下将过滤器应用于文档。以下是一个简单的示例，该示例使用 GraphicsContext::SetColorFilter 无条件添加过滤器：

 diff --git a/third_party/blink/renderer/platform/graphics/graphics_context.cc b/third_party/blink/renderer/platform/graphics/graphics_context.cc index 7cbbd9656eff..d700d15a5cb4 100644 --- a/third_party/blink/renderer/platform/graphics/graphics_context.cc +++ b/third_party/blink/renderer/platform/graphics/graphics_context.cc @@ -113,6 +113,16 @@ GraphicsContext::GraphicsContext(PaintController& paint_controller, paint_state_stack_.push_back(std::make_unique<GraphicsContextState>()); paint_state_ = paint_state_stack_.back().get(); + // clang-format off + const float kAchromatopsiaColorMatrix[20] = { + 0.299f, 0.587f, 0.114f, 0.000f, 0.000f, + 0.299f, 0.587f, 0.114f, 0.000f, 0.000f, + 0.299f, 0.587f, 0.114f, 0.000f, 0.000f, + 0.000f, 0.000f, 0.000f, 1.000f, 0.000f, + }; + // clang-format on + paint_state_->SetColorFilter(SkColorFilters::Matrix(matrix)); + if (ContextDisabled()) { DEFINE_STATIC_LOCAL(SkCanvas*, null_sk_canvas, (SkMakeNullCanvas().release()));

预计 Chrome 82 会加入该工具，不过目前可以使用 Canary 版本体验。

关于该工具的详细情况可以查看文档：goo.gle/devtools-cvd。