谷歌 Chrome 新增开发者工具,帮助开发对色盲友好的页面爱IT (≖ ◡ ≖)就上ITTOP.CN

ITwin10 admin 6个月前 (04-18) 24次浏览 0个评论 扫描二维码

态度温和,微软正努力提醒 Win10 用户升级到受支持版本爱IT (≖ ◡ ≖)就上ITTOP.CN

在过去的一年中,由于用户可以更好地控制是否以及何时更新Windows 10 系统,微软的强制性已经大大降低。

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

谷歌 Chrome 新增开发者工具,帮助开发对色盲友好的页面爱IT (≖ ◡ ≖)就上ITTOP.CN

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

  • 引入Chrome DevTools协议(CDP)API(Emulation#setEmulatedColorVisionDeficiency),以支持通过CDP以编程方式启用这些模拟。

    微软 Chromium 版 Edge 82 开发版新增扩展同步爱IT (≖ ◡ ≖)就上ITTOP.CN

    扩展同步功能已经在Edge Canary 82.451.0版本和Edge Dev 82.0.446.0版本上线了。

  • 引入新的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版本体验。

部分用户安装Win10 KB4540673 补丁后遭遇蓝屏死机爱IT (≖ ◡ ≖)就上ITTOP.CN

喜欢 (0)
[1353713598@qq.com]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址