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

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

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

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

s.png

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

g.png

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

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

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

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

mt.png
引用：The color system - Material Design

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

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

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

ox.png

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

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

wb.png

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