New Chrome developer tools to help developers colorblind friendly page

Chrome developers revealed a under development can help developers make the site more friendly to colorblind developer tools  Color Vision Deficiency (CVD, color vision disorder / color blindness).

According to ColourBlindAwareness.org to say, the world there are about 300 million color-blind people. The new Chrome analog style color-blind people to see the full color blindness, red and green blind blind and so on any given page by DevTools. We need to include the following:

  • The introduction of Chrome DevTools Protocol (CDP) API (Emulation # setEmulatedColorVisionDeficiency), to enable them to support analog programmatically through CDP.
  • The introduction of new Puppeteer API, programmatic support these simulations through CDP.
  • Expand contrast checker DevTools colorpicker widget to check the contrast between the known problem of color blindness.
  • Lighthouse can be added to a test access audit, to use the new features, and check the contrast level of each simulation.

In the long run, under ideal circumstances CVD you will get a Blink Renderer support level, so you can apply filters to the documents in the case do not change the document or does not affect the calculation of styles. The following is a simple example, this example uses GraphicsContext :: SetColorFilter unconditionally add filters:

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 is expected to be added to the tool, but the current version can use the Canary experience.

Details of the tool can view the document: goo.gle/devtools-cvd .

Guess you like

Origin www.oschina.net/news/114050/chrome-devtools-cvd