【デザイン制作に役立つ】コントラストチェックツールを使って、より見やすいデザインを作ろう!

デザインとコントラスト

コントラストって難しいですよね。

弱すぎると視認性の悪さに繋がるし、強すぎると(特に文字の場合)目が疲れてしまいやすい。

その丁度いい塩梅での調整がデザイナーには必要になる…ということが最近よく分かりました。

ただ、デザイナー的には「この色でいきたい」「でも、視認性ってどうなの?」なんて場面もあるんじゃないでしょうか。

そんな時は、コントラストをチェックできるツールがあるみたいです!

私も今回調べていて初めて見つけました。

デザインってずっと見ていると良し悪しが判断しにくくなっちゃうので、そんなときはツールに頼るのもありですね!

便利ツールのご紹介

Color-Contrast-Checker

とてもシンプルな作りで、使いやすそうというのが第一印象です。

コントラストを確認したい背景色と文字色のカラーコードを入力することで、下記の4項目を診断してくれます!

  • 2色のコントラスト比がいくつか
  • 通常文字(24px未満)のコントラスト比
  • 巨大文字 (22px以上)のコントラスト比
  • 太文字 (14px以上)のコントラスト比

実際に指定した背景色の上に、指定した文字色で通常文字・巨大文字・太文字のデモが表示されるので、視認性の確認もしやすいです。

また、ツール内でAA(達成)、AAA(高いレベルで達成)と診断結果が出ますので、データとしてもコントラスト比の確認ができます。

色のコントラストチェッカー | 文字色と背景色の組み合わせを確認
最適な文字色と背景色の組み合わせを確認できるウェブサービスです。


colorable.jxnblk.com

※こちらは海外のサイトなので翻訳を推奨します。

個人的にはこのサイトのデザイン好きだなというのが第一印象です(笑)

こちらも先程紹介したツール同様、「テキスト」に文字色、「バックグラウンド」に背景色のカラーコードを入力します。

特にコントラスト比の診断をしてくれる機能はないのですが、

面白いのが色の「色相」「飽和度」「明度」をツール内で調整できるんです!

例えば指定した配色の視認性が悪いな…と感じていたら、そこから各項目のバーを左右に調整して、より視認性の良い組み合わせを探すことができます!

また、「逆行」ボタンを押すと文字色と背景色を反転させることもできます!

Colorable


まとめ

今回はコントラスト比をチェックできるツールを調べてみました!

色を選ぶ時「他の人にはどう見えるんだろう」という疑問を解決する時にとても役立つなと感じました!

老若男女が見やすい・分かりやすいデザインをさらに突き詰めていきたいですね!

コメント

タイトルとURLをコピーしました