テキストのカラーが充分に読むことができるか確認するのは実は簡単、コンラストが良いか確認できるWin, Mac対応の無料ツール

Post on:2016年9月7日

sponsors

カラーのコントラストが充分か、充分でないかチェックできるオンラインツールはいくつかあります。でもオンラインだと突然利用できなくなったり、ネット環境でないと使えないといったこともあります。
WinにもMacにも対応したデスクトップで動作する無料ツールを紹介します。

Webデザインのカラーを決める時にもう一歩進めた良いコントラストのつくり方は、昨日の記事を参考にどうぞ。
本文のテキスト、リンクやボタンのカラーを決める時に役立ちます。

ツールは非常にシンプルです（キャプチャはOS X版）。
前景色（Foreground Colour）と背景色（Background Colour）を入力すると、ノーマルとラージのテキストでコンラストの評価を確認できます。

Colour Contrast Analyserの画面
上段がAA評価、下段がAAA評価

さっそく、当ブログのテキストと背景のカラーをチェックしてみました。

当ブログのコントラストの評価

ノーマルもラージもクリアしています。
実は、コントラストの確認をしてカラーを決めています。

前景色と背景色のカラーの値は、16進数を直接入力するだけでなく、それぞれのカラーピッカーを使用して簡単に入力することができます。
カラーピッカーは、Photoshop上でもブラウザ上でもカラーを取得できます。

カラー値の入力: カラーピッカー

「Show RGB Sliders」をクリックすると、RGB値で指定することもできます。

カラー値の入力: RGB値指定

Colour Contrast Analyserのダウンロードは、下記ページから。

Windows版は32bit/64bit対応、Mac版はOS X 10.11 El Capitanに対応しています。
ライセンスはGNU General Public Licenseで、無料で利用できます。