ChromeDevtoolsでコントラスト比を確認

ChromeのDevtoolsにて、アクセシビリティを考慮したコントラスト比を確認することが出来ます。

2017-11-01現在、開発者向け・実験的機能なのでChrome Canary 64を使用することで動作を確認しています。

---

参考: https://medium.com/remys-blog/contrast-ratio-in-devtools-18d5d8d2d8b4

0. Chrome Canaryをインストール

開発者向けのバージョンをインストールします。

https://www.google.co.jp/chrome/browser/canary.html

1. Flasgを設定

Developer Tools experiments を有効にし、再起動する。

2. DeveloperToolsの設定画面を開く

F12/Ctrl+Shift+J等を押してChrome DevToolsを開く。

3. Experimentsタブを開く

4. 裏メニューから有効にする

• Shiftを6回押します
• Color contrast ratio line in color picker を有効にします

5. ピッカーを開く

• 文字色に color プロパティが設定されているエレメントを選択
• #000 の左に有る色の箱をクリック
• コントラスト比が数値で表示されている

• コントラスト比をクリックすると、表示が変わる
  • W3CのAA/AAAをクリアするかが表示される
  • 背景色をスポイトから任意の色を選べる

完

• アクセシビリティ！
• Shift6回押したらとかどこ見たら書いてるんだよ