DevTools tips — day 8: Color picker

DevTools tips — day 8: Color picker:

この記事はTomek Sułkowskiさんによる

フロントエンドエンジニア向けアドベントカレンダーの翻訳記事です。

とても勉強になったので許可を得て翻訳させていただきました。元記事はこちら。

---

休暇まであと24日です。私はこれからDevToolをより効果的に、そしてもっと楽しく使うためのコツを紹介する短い記事を書いていきたいと思います。昨日はasyncコンソールで遊びましたね」。今日はcolor pickerを見てみましょう。

23. Color picker ：イントロダクション

color pickerをあまりきちんと見たことがなければ、color pickerはただ色を選べるものでしかなく、そんなに優れた物とは思えないでしょう。ですがよく見てみると、開発者ツールのチームがこの小さなウィジェットにいかに便利な情報をつめこんでいるかに気が付いて驚くはずです。

24. すでに使用されている色の中から色を選ぶ

color pickerの一番下の部分にはカラーパレットがあります。これはカスタマイズすることが可能です。

- 影のバリエーション付きマテリアルカラーパレットに切り替える

- 色を追加したり削除したりできるカスタムパレットにする

- ページにあてられているstylesheetに存在するCSS変数から色を拾うパレットにする

- ページのstylesheetで用いられているすべての色を含んだパレットにする

25. 簡単に色を選べるようにする

テキスト向けのカラーピッカーを開いたとき(＝cssのcolorプロパティ。background-colorではなく)、“Contrast ratio”が目に入るでしょう。これはテキストの色とテキストの背景色と考えられているものとのコントラスト比を表示します。この数値が高い場合、背景に対してテキストが適切に見えるようになっていることを意味します。一方で、その値が1に近い場合、テキストの色は背景と区別をつけることが難しい状態です。

数値の横の“��”マークは良くないという印で、“✅”マークはWeb Content Accessibility Guidelines (WCAG) 2.0のAAレベルを満たしているということで、コントラストは少なくとも3あるということを意味します。“✅✅”マークのときは、より厳しいAAAレベルを満たすということで、コントラストが4.5であることを意味します。

色に関するアクセシビリティのルールについてはマークをクリックすることでより詳しく知ることができます。

Contrast ratioを開くと、追加の情報と比較のために別の背景色を選べるシステムが現れます。さらに、color spectrumではコントラストの境界線を確認できます。これはつまり、背景がラインより上にある色よりも暗い場合、それはAAレベルを満たすということで、背景がラインより明るい場合はそのラインの下から色を選ぶべきであるということです。

---

いつも通り、なにか新しいことを学べたらぜひ

→ もっと多くの人の目に止まるように拍手��ボタンをお願いします！

→ 他の投稿も見逃さないようにTwitter (@sulco)をフォローしてください！