コントラスト比はなぜ重要なの？アクセシビリティの観点から考えるコントラスト比

こんにちは！ディレクターの古澤です。

webアクセシビリティの基準のひとつに、「コントラスト比」というものがあります。
コントラスト比とはモニターの輝度を表す数値で、明るい部分（輝度が高い）と暗い部分（輝度が低い）との差を表しています。

簡単に言うと、「明暗の差（メリハリ）がどれくらいか」ということです。
数値が大きいほど、コントラスト比が高い、つまり明暗のメリハリが大きいといえます。

明暗のメリハリを示すこのコントラスト比、なぜアクセシビリティで重要なのでしょう？

【実際の例】コントラスト比が高いもの・低いもの

まずは、コントラスト比が高いものと低いもの、実際の事例を見てみましょう。

アクセシビリティでは文字の読みやすさが重要になる為、「文字の色」と「文字の背景色」の明暗の差（コントラスト比）を調べてみます。

上の画像は背景色が白、文字色がオレンジです。白：オレンジのコントラスト比は2.77：1です。
下の画像は背景色が白、文字色が青です。白：青のコントラスト比は4.66：1です。

数値の大きい青の方が、コントラスト比が高いということになります。

よみやすい文字、読みにくい文字

アクセシビリティのJIS規格では、画像化されている文字のコントラスト比は4.5：1以上であることが求められます。

これはコントラスト比が高い方が、文字を認識しやすいからです。

先ほどのオレンジと青の画像、色の認識が出来る方であれば、どちらも文字の認識は可能です。
ただ、ロービジョンの方から見ると、文字の認識しやすさにはっきりと違いが出てきます。

実際に比べてみましょう。

色の認識が出来ない場合の見え方

まずは、色の違いが認識できない場合。
色の違いは分からず、明暗（濃い・薄い）のみ認識できますので、以下の様に見えます。

元々オレンジだった、上の文字の方が少し薄く見えます。
この場合だと、文字の認識しやすさにそこまで違いはありません。

文字がぼやけて見える場合の見え方

ロービジョンでなくとも、視力が低い方だと想像出来るかと思いますが、視力が低いとものがぼやけて見えます。

ぼやけて見える方の場合、先ほどの画像は以下の様に見えます。

文字の認識しやすさにかなり違いが出てきました。
コントラスト比が低い、文字色がオレンジの画像（上）は薄くて文字が読みにくく、
コントラスト比が高い、文字色が青の画像（下）は、上に比べて文字が読みやすいです。

重要な情報がコントラスト比の低い色合いで記載されていたら、ロービジョンの方は情報を正しく得ることが出来なくなってしまいます。
これが問い合わせ先の電話番号だったら。気象情報だったら。避難場所の案内図だったら・・・。
問い合わせようにも電話番号が分からない、今発令されている警報が分からない、避難場所がどこか分からない。情報の種類によっては、命の危険にさえ繋がってしまいます。

コントラスト比の計測方法

コントラスト比は、株式会社インフォアクシアが提供している無料のソフト「カラー・コントラスト・アナライザー 2013J」などのコントラスト比計測ツールで計測することが可能です。

カラー・コントラスト・アナライザー使用画面の図

「結果-コントラスト比」欄でコントラスト比を確認することが出来ます。

なぜコントラスト比を一定値以上にしないといけないのか、分かりましたでしょうか？

デザインを作るとき、プレゼン資料を作るとき、チラシを作るとき...是非、コントラスト比を意識して、誰にでも平等に情報を伝えられる画像をなるようにしましょう！