企业区,为企业而服务

网站推广 APP制作 网站制作 小程序制作 SEO 快手 抖音宣传 工业企业推广(推荐)

立即体验
听一下我们的服务
论坛资讯

谷歌 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无条件添加过滤器:

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

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

上一篇 Redis官网昨日宕机,错误提示为“无法连接Redis” 下一篇 下列选项中被称为死亡之海的沙漠是?
论坛资讯同步说明,本文同步自论坛:bbs.qiyequ.com,如您在论坛注册成为会员用户并且发帖,则默认论坛文章同步协议,协议内容请移步论坛查看!

企业区

扫码添加咨询
企业微信

添加客户

可开发票

仿站