新しいChromeデベロッパーツールのヘルプ開発者に優しいページを色盲

クロームの開発者は、開発中の開発者は色盲の開発ツールへのサイトはもっとフレンドリーにすることができます明らかにした色覚欠損（CVD、色覚障害/色盲）。

言ってColourBlindAwareness.orgによると、300万程度色盲の人々は世界があります。新しいクロームアナログスタイルの色盲の人々は、デベロッパーツールで任意のページのフルカラー失明、赤と緑のブラインドブラインドなどを確認してください。私たちは、以下のものが含まれる必要があります。

クロームデベロッパーツール議定書の導入（CDP）API（エミュレーション＃setEmulatedColorVisionDeficiency）、CDPを通じてプログラムでアナログをサポートすることを可能にします。
新しい人形遣いのAPI、プログラム的サポートCDPを通じてこれらのシミュレーションの導入。
色盲の既知の問題との間のコントラストを確認するために、コントラストチェッカーデベロッパーツールのColorPickerウィジェットを展開。
灯台は、新しい機能を使用し、各シミュレーションのコントラストレベルを確認するために、テスト・アクセス監査に添加することができます。

ドキュメントを変更しない場合は、文書にフィルタを適用することができますまたはスタイルの計算に影響を与えないように、長い目で見れば、理想的な状況は、CVD法の下であなたは、ブリンクレンダラのサポートレベルを取得します。以下は簡単な例で、この例では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()));

クローム82は、ツールに追加されることが予想されますが、現在のバージョンは、カナリアの経験を使用することができます。

：ツールの詳細については、文書閲覧できgoo.gle/devtools-cvdを。

新しいChromeデベロッパーツールのヘルプ開発者に優しいページを色盲

おすすめ