WEBデザイナー必見！デザインにおけるコントラストの話

多くのデザイナーは配色で悩む事が多いのではないでしょうか。
私がよく悩むのは、微妙な背景色に対しての文字を白にするか黒にするかという点です。
見やすいのはどっちだ？その答えは数値化出来る「色のコントラスト」にあります。

今回は色のコントラストを理解し、見やすいWEBデザインを作れるようになる為に、なぜコントラストが重要なのかや、良いとされるコントラスト比とはという点について、ツールの紹介や配色実例などと一緒にまとめていきたいと思います！

コントラストとは

デザインにおけるコントラストとは、「色」や「大きさ」の対比を言います。

「色」であれば最もコントラスト比が高いのは白と黒です。「大きさ」は異なる2つ以上の文字や画像のおいて大小の差が大きい程「コントラスト比が高い」となります。

今回この記事で扱うコントラストは、テキストの読みやすさを左右する背景色とテキスト色のコントラストを指します。

WEBデザインでは特に大事？コントラストの重要性

私はWEB媒体のデザインをするようになってから特に意識するようになったデザイン要素の一つに「コントラスト」があります。

他のデザインよりもWEBデザインにおいてコントラストが重要なのはなぜでしょうか。大きく2つの点が考えられます。

コントラストはUIを左右する

UI(ユーザーインタフェース)はユーザーとの接点の事を指します。マウスやタッチパネルなどが該当しますが、それらを通して間接的に操作する画面中のボタンやリンクも同様にUIです。良いUIにとって色というのはとても重要な要素であり、コントラストもまたしっかり考えなければいけないポイントとなってきます。

見た目だけを重視してしまいコントラスト比の低いボタンを作ると、そもそもボタンと認識されずクリック率も下がる可能性が高くなります。

パッケージやポスターの紙媒体やテキスタイル、雑貨などと様々なデザインがある中で、WEBデザインでは特に大事というよりもUIをもつ全てのデザインにおいて大事といった方が良いかもしれませんね。

▼関連記事

「読みにくい」「わかりにくい」サイトは離脱される

UIと同様なのですが、テキストが読みにくいサイトであったり、どこに入力すれば良いかわからないわからないフォーム、押して良いかわからないボタンなどがあると、ユーザーはすぐに嫌になりサイトから離脱します。幾千とサイトがある中で、あなたのサイトだけに書かれてる希少なコンテンツでない限りは、ユーザーはすぐに他のサイトに行ってしまうでしょう。

良いとされるコントラスト比の基準がある！

コントラスト比が高い低いって言われても、「え、それって感覚？」となるかもしれません。

実はこのコントラスト比はちゃんと計算式に基づいて数値化する事が出来て、
さらにウェブコンテンツアクセシビリティガイドライン(WCAG)で、可読性を高める為の最低限のコントラスト比が提示されています。

WCAGが提示する背景色と文字のコントラスト比の最低基準、それは

4.5：1

です。

1.4.3 コントラスト (最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AA)

大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。

付随的: テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブではないユーザインタフェース コンポーネントの一部である、純粋な装飾である、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。

ロゴタイプ: ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない。
https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#larger-scaledef

大きい文字になるとその基準は少し下がり、3:1になります。
ここで言う大きな文字定義は18pt以上なのでpxにすると24px以上、また14pt以上の太文字もこの対象です。

気になるあの配色のコントラスト比を検証！

それではここからは、コントラスト比が4.5:1というのはどのようなものか具体的に見ていきましょう。

最もコントラストが強いと言われる白(#ffffff)と黒(#000000)のコントラスト比はいくつでしょうか。
それは…

21：1

なるほど、余裕のコントラスト比です。

それではグレーに合わせる色は白でしょか？黒でしょうか？
どこからがコントラスト比の数値として基準達成するのか検証して結果を一覧にしました！

結果

#777777から白文字よりも黒文字の方がコントラスト比で基準を満たすという事がわかりました。
しかし#777777の背景に対して黒文字はコントラスト比4.6:1なのでギリギリクリアという結果です。
ちなみに背景#777777に対して白文字だとコントラスト比は4.4なので、黒の方が良いけど白も然程変わらないという感じでしょうか。

私の感覚的には#888888までは白文字かと思っていましたが、コントラスト比は3.5でした。これは24px以上もしくは14px以上の太文字ならOKの範囲ですね！

#999999までくるとコントラスト比2.8まで下がりアウトとなりました。

配色の参考になる！コントラストをチェックするおすすめのツール3選

グレーの階層を元に検証を行いました。結局コントラストは明度の差なので、グレーで感覚をつかめば他の色でも応用できるかもしれません。
しかしそんな玄人な域を目指すよりも早く簡単にコントラスト比をチェックできるツールが世の中にはたくさんあります！
その中でも使いやすいものを3つ選び紹介します。どれも視覚的に使えるので、とっても簡単にコントラストのチェックをする事ができますよ。

Color-Contrast-Checker

Color-Contrast-Checker

このツールの良いところは、日本語表記な点と、文字の大きさと太さ別に基準をクリアしているかしていないかを教えてくれる点です。

実際に日本語テキストで配色を見ると、数値に囚われず「見やすいor見にくい」が感覚としても検証出来るので、かなりメリットだと感じます。
また14px・22px・14pxの太文字という3パターンが用意されていて、それぞれがクリアしているかどうかをチェック出来るのもありがたいですね。

colorable.jxnblk.com

colorable.jxnblk.com

このツールの良いところは、UIです。色を入力する部分が大きくて使いやすいのと、色相・彩度・明度を調整出来るバーがついており、バーの調整で画面全体の背景色とテキスト全てが連動して変わるので、感覚的にとても使い易いと思います。

バーを操作してAA(最低基準コントラスト比4.5)が出るまで細かな調整が出来るので、メインカラーは決まっていて、もう1色をどうしようか悩む時などに答えを教えてくれるようなツールです。

マテリアルパレットジェネレーター

マテリアルパレットジェネレーター

言わずと知れたGoogleが提唱しているデザインシステム「マテリアルデザイン」のカラーツールです。

実際、背景色がどのような色であっても、テキストは白か黒になる事が多いかと思います。マテリアルデザインのカラーパレットでは、背景色に対してコントラストの基準をクリアしているのは白文字なのか黒文字なのかを一覧で見る事ができ流為とても便利です！

またこのツールでは、実際に選んだカラーでUIを確認できたり、アクシビリティーを確認できたりします。
マテリアルデザインに準じているというのは一つの”良いデザイン”の基準にもなりますし、配色が決まらない時にも助かるツールのひとつではないでしょうか。

全てにコントラストをつけなければいけないわけではない

ここまでコントラストの重要性や、コントラストチェックツールを紹介してきました。

しかし、全てのパーツにおいてコントラスト比を高くする必要があるわけではありません。

「コントラスト比が高い方が読み易い」のであれば、その逆は「コントラスト比が低いものは読みにくい」。つまり、読ませなくても良いもの、目立たくないものは、意図的にコントラスト比を低くすれば良いのです。

例えば、クリック出来ない(クリックさせたくない)ボタンはグレー背景に白テキストが使われていたりします。また、重要度の低い要素なんかもコントラストを抑えて良い部分かと思います。

重要な要素が目立つように、重要でないものはコントラストを抑える。そうする事で、サイト全体で見た時にコントラストの高い良いデザインになるのです。

また、敢えてコントラスト比を低くしたデザインも、コンセプトがあればもちろん良いと思いますし、クリエイティブな部分まで見ていくと正直コントラストがある事が正しいとも言い切れません。コントラストにも基準があり、それを知ってるとデザインがよくなるという点が今回の記事のメインテーマとなります。

まとめ

いかがでしたか？

コントラストを数値で配色の良し悪し判断する事で、作業効率UPやデザインの質の向上も期待できるのではないでしょうか。

今まで感覚だけで背景色とテキストカラーを決めていたけど、いまひとつデザインに自信が持てなかったデザイナーの方、是非一度その配色が「見やすい基準」を満たしているのかチェックしてみてください！