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

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

Colour Contrast Analyserのキャプチャ

Colour Contrast Analyser

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

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

Colour Contrast Analyserのキャプチャ

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

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

Colour Contrast Analyserのキャプチャ

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

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

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

Colour Contrast Analyserのキャプチャ

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

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

Colour Contrast Analyserのキャプチャ

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

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

サイトのキャプチャ

Colour Contrast Analyser

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

sponsors

top of page

©2018 coliss