WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >WEBデザイン

かなり前に「色覚異常のある方にも見やすいデザインを作ろう！チェック方法と対策をご紹介」という記事で「カラーユニバーサルデザイン」についてお話をしましたが、今回は「色のコントラスト比」が適切かどうかを簡単に調べられるソフトをご紹介します。

色覚異常のある方や視力の落ちて来た方でも、きちんと文字が読める程度のコントラスト比が保たれていれば、必要な情報を誰でも受け取ることができます。

その基準を自力で確認しながら制作していくのは大変なので、ソフトを使って簡単に調べてしまいましょう。

Colour Contrast Analyser

今回ご紹介するのは「Colour Contrast Analyser」というソフトです。では、まずダウンロードしましょう。

ソフトをダウンロードする

下記サイトからダウンロードしてください。
https://github.com/ThePacielloGroup/CCAe/releases/tag/v3.0.1

英語なので分かりにくいのですが、少しスクロールしてから、「CCA-Portable-32.exe」または「CCA-Portable-64.exe」をクリックします。「～32」か「～64」かはお使いのパソコンにが何ビットなのかよって判断してください。
パソコンのビット数を調べる方法は、こちらのサイトさんで紹介してくれています。
Windows10 – 32ビット版か64ビット版かを確認

ダウンロードできた時点で、すぐ使えるかと思います。では、開いてみましょう。

はかってみよう！

さっそく、色をはかってみましょう。

「前景色」は文字の色、「背景色」は文字通り背景の色です。この差が大きいほど、文字が読みやすくなります。

「HEX」というところは、そのままだと16進数のカラーコード（白なら#ffffff）が表示されます。RGBで見たい方は、プルダウンで「RGB」を選択すると「rgb(255,255,255)」と表示されます。こちらはお好みですね。

ここに数値を入力することで診断もできますが、もっと簡単に、スポイトで色を取ってくることができますので、そのやり方で進めます。

スポイトマークをクリックすると、マウスポインタが虫眼鏡のようになります。この状態で、文字色、背景色それぞれ測りたい箇所へカーソルを持っていき、クリックすると色が取れます。
今回は、qamの記事タイトルとその背景の色が読みやすい比率になっているかどうかを調べてみました。

↓↓↓

なってました！すべての項目に、緑のチェックマークと「適合」が出ていたら、合格です。では、ダメな場合はどうなるでしょう。

わざと色を濃くしてみました。チェックマークが赤い×になって「不適合」と出ています。

でも皆さん、読めますよね？確かに読みにくくはなりましたが、これくらいなら何とか読めます。
これが、落とし穴です。

明らかに読めないコントラスト比が「NG」なのは分かるのですが、制作者が読めていても、視力の弱い方が読めない可能性のある配色であれば、このように引っ掛かってしまうことがあるのですね。このソフトは、比較的目の良い人だけのためのものではなく、目の良い人、あまり良くない人、色覚異常がある人など、より多くの人にとって「読める、読みやすい」というのが基準になっています。これを使うことによって、自分以外の目から見たデザインの見やすさを診断することができるんです。

カラーユニバーサルデザインの重要性

日本では、男性の20人に1人、女性の500人に1人の割合で色覚異常の方がいるといわれています。日本の人口が約1億人、男女でだいたい半々、それぞれ5000万人ずつだと仮定すると、色覚異常のある男性は約250万人、女性は約10万人程度はいるということになります。
そう考えると、カラーユニバーサルに配慮しないデザインは、かなり多くの方にとって不便なものということになります。

「文字が読めない、読みにくい」というのは、場合によっては致命的になります。ボタンの文字が読めなければ押してもらえなかったり、間違えて押してしまってユーザーに迷惑をかけることになりかねませんし、機会損失にもなります。重要な注意書きが読みにくくて見逃されてしまった場合は、ユーザーの安全に影響が出てしまったり、クレームにもつながりかねません。

自己満足なデザインで終わらせず、色をしっかりチェックして、より多くの方に正しく伝わるデザインを作っていきましょう！