熟練デザイナーこそ気をつけたい「コントラスト」に関する3つの話

Webページを閲覧しながら、文字がやや読みにくいな、そう感じたら、コントラスト比が弱いのかもしれません。意外に思われるかもしれませんが、彩度が高いからといってコントラスト比が十分保たれているわけではありません。

普段気にかけない(かもしれない)コントラストですが、コントラスト比が低いと問題も発生します。万人が読みやすいユニバーサルなWebデザインにするには、どうすればいいのでしょうか。

そこで今回は、熟練デザイナーこそ気をつけたい「コントラスト」に関する3つの話をご紹介します。デザイン歴が長くとも意外と見落としがちなポイントもあるので、ぜひ見直しておきましょう。

Webアクセシビリティにおけるコントラストとは？

イメージ画像 / Unsplash

*コントラスト比(contrast ratio)*は、一般的に液晶画面について、最も明るい部分(白)と最も暗い部分(黒)の明るさ(輝度)の比率のことを言います。

しかしながら、Webアクセシビリティの文脈での「コントラスト比」とは、JIS規格(JIS X8341-3:2010)で採用されているコントラスト比のことです。

具体的に言うと*「テキスト及び画像化された文字の視覚的な表現には、少なくとも4.5：1のコントラスト比がなければならない」*というルールがWebアクセシビリティの一般ルールとなっています。

JIS規格の実践で挙げられている実例を取り上げてみましょう。

良い例：コントラスト比が4.5：1以上

Webマーケティングなら、ferretにおまかせ。

上記の場合、文中で強調されている文字の赤字(＃CE0000)と背景色(＃FFFFFF)とのコントラスト比が5.8：1あり、コントラスト比が十分あるといえます。

悪い例：コントラスト比が4.5：1未満

Webマーケティングなら、ferretにおまかせ。

上記の場合、文中で強調されている文字の赤字(＃FF0000)と背景色(＃FFFFFF)とのコントラスト比が4.0：1しかなく、コントラスト比が不十分であると言えます。

一見同じように見える色でも、少し彩度が変わるだけでコントラスト比が大きく変わってしまいます。Webアクセシビリティの基本として、標準サイズの文字は「4.5：1」以上あるか、改めて確認してみましょう。

参考：
7.1.4.3 最低限のコントラストに関する達成基準 - Fujitsu Japan

意外と見過ごしがちな「コントラスト」に関する３つの話

1. コントラストは対話型デザインの基本

コントラストはWebアクセシビリティの上で非常に重要な役割を果たしますが、もちろんそれだけではありません。コントラスト比を高めることは、対話型デザインの出発点となります。

コントラストによってユーザーはWebアプリケーションをスムーズに使えるようになります。例えば、最近はシンプルでミニマルなデザインが増えましたが、下記のAとBのデザインはどちらの方が分かりやすいでしょうか。

また、コントラスト比を操ることで、コントラスト比の高い要素を目立たせることができます。下のグラフでは、一番数値の小さい棒グラフが目立っています。

コントラストをうまく操ることができるようになれば、より「文脈」を持ったデザインを行うことが可能です。闇雲に「こっちのほうが色合いがクールでかっこいい」という、気分で選ぶ配色選びではなく、できるだけ色彩理論に則った配色選びを心がけましょう。

2. コントラスト比に応じたスペクトラムカラーパレットを作ろう

CSSを何も設定しなければ、ページに表示されるのは白い背景に黒い文字です。しかし、CSSにさまざまな設定を加えてさまざまな背景色に文字を乗せながら、逐一コントラスト比を測定するのは大変でしょう。

そこでおすすめなのが、スペクトラムカラーパレットと呼ばれる段階的色彩見本を作成しておくことです。多くの場合は背景がどんな色であっても、文字の色は白か黒です。そこで、あらかじめ白文字を乗せるか、黒文字を乗せるかを調査しておくのです。

引用：The color system - Material Design

例えば、Googleが公表しているマテリアルデザインのカラーガイドを見ると、すでに白文字のほうがいいのか、黒文字のほうがいいのかが一目瞭然で分かるようになっています。こうした要領で、自分のWebサイトが使う色に対してどのテキスト色が利用できるかを、事前に調べておきましょう。

3. コントラスト比の基準のクリアだけでは不十分

Webアプリケーションなどを開発する際に、基本となるUIの色をあらかじめ決めておくことが多くなりました。*「Successなら緑、Errorなら赤」*というように、色みが意味を体現すると考えているデザイナーも多いかもしれませんが、そこには大きな落とし穴があります。

色単体では、意味を表すのは不十分です。例えば、以下の図では、緑と赤のボックスを表示していますが、これが色覚障がいのある方にどのように見えるかを比べてみると、どちらも同じように見えてしまうことがご理解いただけるでしょう。

色は補助的な伝達要素の一つにしか過ぎないので、アイコンやパターンのような副次的なもので、情報伝達を補強することが大切です。もちろんラベルを添えることもできるでしょう。いずれにしても、コントラスト比の問題をクリアしたからと言って、そこで安心してはいけません。

ちなみに、高機能ブラウザとして人気のVivaldiブラウザでは、*「白黒フィルター」*というものが用意されています。白黒で閲覧したときにWebユーザビリティ上の制約を守れているかどうかを目視できるので、活用してみるとよいでしょう。

まとめ

配色について気を使っているWebデザイナーも多いと思いますが、*「たかがコントラスト、されどコントラスト」*ということで、ユーザー体験(UX)だけでなくユーザビリティの点でも非常に重要であることがご理解いただけたと思います。

全体的なコントラスト比は意識できていても、ダイアログやボタンのようなUIパーツのコントラスト比が4.5：1よりも低くなってしまう場合があるので、コントラストチェッカーのようなWebサービスも利用しながら、常に読みやすいコントラスト比になっているか、気をつけるといいでしょう。