WEBサイトやロゴをデザインする際、配色に悩んでしまうのはよくあることだと思います。
そんな時、一つの指標としてみて欲しいのが、「色のコントラスト比」です。
コントラスト比とは
コントラストとは「対照・対比」の意で、テキスト色と背景色の色差などが例に挙げられます。
コントラスト比が高ければより読みやすく、低ければより読みにくいテキストとなります。
コントラスト比が高いと読みやすいよ
コントラスト比が低いと読みにくいよ
これは、テキストだけでなくロゴなどのシンボルにも当てはまります。
また、テキストに置いては色差のほかに文字サイズも関係します。
テキストサイズが大きいほど、コントラスト比は高くなります。
大きい文字は色のコントラスト比が低くても読めるよ
従って、配色を決める際には文字のサイズや背景との色差を意識する必要があります。
とはいえ、感覚でコントラスト比を判断するのは少し難しいですよね💦
実は、コントラスト比を求める計算式というのがあるんです！
ただしWikipediaを見ればわかるとおりめちゃくちゃ複雑…😭
そこで今回は、コントラスト比を簡単に数値化できるサイトをご紹介します！
コントラスト比を数値化する
とその前に、まずはコントラスト比を表す数値について簡単な説明を挟みます。
コントラスト比は、最大で21：0、最小で1:1の値になります。
1:1とはつまり同色同士の組み合わせで、21：0とは白地に黒文字の組み合わせ、つまり最大の数値に近づくほど色差が大きくなります。
「Web Content Accessibility Guidelines (WCAG) 2.0」という規格では、理想的なコントラスト比を「7.0：1以上」としています。
とはいえ「7.0：1以上」を目指すのって実は結構難しいんですよ…💦
ですので、最低でもWCAG 2.0で最低限のコントラスト比とされる「4.5:1 以上」を目指すようにしましょう！
コントラスト比を簡単にチェックできるツール
色のコントラストチェッカー
https://lab.syncer.jp/Tool/Color-Contrast-Checker/
「色のコントラストチェッカー」は、背景色と文字色を指定すると自動でコントラスト比を計算し評価をしてくれるツールです。
22px未満の通常文字、22px以上の巨大文字、14px以上の太文字の3パターンで、WCAG 2.0の基準を満たしているかどうかを計測できます。
UIを意識してデザインを行うのであれば、できる限り「AAA (高いレベルで達成)」を、最低でも「AA (達成)」を満たしておきたいです😣
Abode Color
https://color.adobe.com/ja/create/color-contrast-analyzer
「Abode Color」は、背景色とテキストカラーからコントラスト比を計算できるツールです。
17pt以下の通常テキスト、18pt以上の大きなテキスト、グラフィックコンポーネントの3パターンで、「Web Content Accessibility Guidelines (WCAG) 2.1」の基準を満たしているかどうかを計測できます。
合格・不合格で判定してくれるほか、類似色でコントラストの提案をしてくれるため非常に便利です。
最低でも「大きなテキスト」で合格をとなる組み合わせを使用できると良いと思います！