お役立ちコラム

Webサイトの配色は「カラーユニバーサルデザイン」に沿って考えましょう

「ユニバーサルデザイン」とは、「製品、環境、建物、空間などをあらゆる人が利用できるようにデザインすること。」とされており、Webサイトでは、見やすさ、わかりやすいデザイン、導線にするにはどうすればよいのか… ということになります。

色については、「カラーユニバーサルデザイン」として「色の見え方が一般と異なる色弱者(先天的な色覚異常、白内障、緑内障など)にも情報がきちんと伝わるよう、色使いに配慮したデザイン」と定義されています。
先天的に見え方が異なる人だけでなく、高齢者社会になり、加齢により薄黄色のフィルターを通したような見え方に変わって色覚機能が衰えてしまうこともあります。

色は誰にでも同じように見えているわけではありません。区別しやすいと思って決めた色の組み合わせが、ある人にとっては、見わけにくい色の組み合わせだったりします。

色弱者と呼ばれる人は、日本では男性の20人に1人、女性の500人に1人と言われ、日本全体では300万人以上いるとされています。世界では2億人を超え、血液型がAB型の男性の比率に匹敵します。
視力(目の分解能)は普通と変わらず細かいものまで十分見えますが、一部の色の組み合わせについて、一般色覚者と見え方が異なります。このため、色の使い方や明度差などに配慮が必要になります。

こうした多様な色覚を持つさまざまな人に配慮して、全ての人に情報が正確に伝わるように配慮されたデザインを「カラーユニバーサルデザイン」と言います 。
すべての人にわかりやすい色の組み合わせを考慮して、Webサイトの配色を考えましょう。

◆見分けにくい色
・赤から緑色の範囲の見分けが困難です。
・青と紫の範囲の見分けが困難です。
・濃い赤は黒に見える(赤錐体に異変があるP型色覚)

◆配色は、同系色をさけて、コントラストのはっきりした組み合わせにします。


https://webbu.jp/universaldesign-3484 より

◆Adobe Photoshopで見え方のシミュレーションができるので確認してみます。
Photoshopのメニュー「表示」 → 「構成設定」 から、色覚表示を選ぶことができます。

表示例:通常のサイト

P型(1型)色覚で表示した場合

D型(2型)色覚で表示した場合

上記サイトは「赤」ではなく見やすいとされている「オレンジ」を基調にしていたため比較的どの色弱者でも見分けやすい配色のようです。
皆さんも、サイトの配色を決める時や画像の見やすさを確認してみると良いでしょう。

◆年配の方に見ていただきたいWebサイトの場合は、カラーだけでなく、フォントの大きさにも注意しましょう。
16px Webサイトの本文
18px シニア向けWebサイトの本文
24px 記事見出し
32px タイトルサイズ

文字数が多い文章の場合、あまり文字が大きいと改行が多くなり読みにくくなってしまいますので注意が必要です。

お勧めの参考資料

◆カラーユニバーサルデザインについて説明がとてもわかりやすいです。

東京都カラーユニバーサルデザインガイドブック
http://www.fukushihoken.metro.tokyo.jp/kiban/machizukuri/kanren/color.files/colorudguideline.pdf

◆以下の資料に見やすい配色の見本が記載されています。参考にしてWebサイトの配色を決めると良いでしょう。

カラーユニバーサルデザイン推奨配色セットガイドブック第2版(Ver.4)
https://jfly.uni-koeln.de/colorset/CUD_color_set_GuideBook_2018.pdf