Contrast Ratio Checker

Google謹製のブラウザChromeにインストールして使う拡張機能 Contrast Ratio Checker をつくりました。

シンプルイズベスト

ブラウザの拡張機能やデベロッパーツールで既に同等の機能を有しているものはあるのですが、もっとシンプルにグラフィカルに表示してくれるツールはないものかと思い、結局自分でつくってみました。

簡単な操作感

インストールしたら、Chromeの右上に出てきたシマウマアイコンをクリックするだけ。ここをクリックするたびにオン/オフが切り替わります。

スクリーンショット

ウェブページ上で調べたい要素をクリックすると、前景のテキストカラー・背景のバックグラウンドカラーを元にコントラスト比を算出します。
そのコントラスト比とテキストのフォントサイズ・ウェイトを元にWeb Content Accessibility Guidelines(WCAG) 2.0のどのレベルに適合しているのかをポップアップウインドウでわかりやすく表示します。

スクリーンショット

使い方も結果もシンプルです。

テキストや背景が画像の場合は色が取得できないので、そこら辺は無視して、cssのcolorbackground-colorの色を使用します。背景に透明度が加えられている場合は、透明度なしの色が確定するまで親要素をさかのぼって算出します。

HTML+CSS+JavaScript

コントラスト比の算出方法なんて考えたこともなかったけど、なかなかおもしろい工程を経て得られるもんです。勉強になりました。恥ずかしながらコントラスト比が1~21の間に収まるということすら知らなかったもので。
Chrome拡張機能がJavaScriptで書かれてるってことも知らなかったので、こんな簡単に(ちょっとずるして今回はjQueryを使用)作れるもんだとは思わなかった。HTML+CSS+JavaScriptの組み合わせなので、Webサイト作るスキルの延長線上で作れちゃいますね。

いい名前が浮かばずそのまんまな感じになってしまったのが心残り。

DOWNLOAD