2色のコントラスト比を導く Compare Colour Contrast Ratio を作ってみた

見やすい色の組み合わせかどうか。

WCAG2.0 (Web Content Accessibility Guidelines) という、ウェブアクセシビリティに関するガイドラインがある。

この中で、文字色と背景色とのコントラスト比を数値化し、どのくらいコントラスト比があると見やすいのか、という基準を定めている。

以下は Wikipedia の解説。

2色間のコントラスト比を調べるには Colour Contrast Analyzer などのソフトウェアが多数あるので、好きに使えば良い。

自分はこの「コントラスト比を導く計算式」を JavaScript で実装できないのかしら？という方に疑問が及んだのだが、先程の Wikipedia のページに、既に実装があった。

この ContrastChecker.js のうち、CColor クラスで行っている「文字列 → RGB 値」への変換処理と、コントラスト比を割り出す CCcolor.cRatio メソッドを抜き出して、自分がよく使うところにカスタマイズした npm パッケージを作ってみた。

それが、Compare Colour Contrast Ratio。

npm パッケージとしてインストールする際は、

$ npm install --save @neos21/compare-colour-contrast-ratio

でドウゾ。

リポジトリ中の index.js をブラウザで読み込めば、ブラウザ上でもいきなり window.compareColourContrastRatio() メソッドが使えるようになっている。

第1引数、第2引数に2色の色文字列を渡すのだが、

に対応している。

戻り値としてコントラスト比の数値を返しているので、コレを見てよしなに判断してもらえればと。

WCAG2.0 で定めるランクも割り出せるようにできたらもっと使いやすいかなぁ〜。でもとりあえず今回はココまで。