カラーユニバーサルデザイン／色弱（色覚異常）に優しいカラー配色

はじめに

カラーユニバーサルデザインという言葉を聞いたことありますか？
色は誰でも同じように見えている訳ではなく、年を取る事によって色覚の機能が弱くなったりもします。すべての人にとって見やすい色とは、どんな色でしょうか？
カラーユニバーサルデザインは「色のバリアフリー」と言われており、すべての人に見やすい色を考慮したデザインをしていく事です。

エンジニアにとって、特に開発をしているとペルソナや想定しているユーザーに色弱の方の想定が無かったり、BtoCサイトの場合はデザイナーが考えることで見た目はエンジニアに関係が無かったり、業務システムなどで使う人が限定されていたり、システムの環境や組織体制によってエンジニアがデザインに関わらない事も多いと思いますが、エンジニアだからこそユーザービリティにつながる要素としてカラーユニバーサルデザインに興味を持ってシステムに取り入れていってもらえたらと思います。

カラーユニバーサルデザインのポイント

どうやったらすべての人に見やすくなるのか？　ポイントを解説します。

ポイント１：色相に配慮する

見えやすい色の組み合わせを使う
・黒い背景に赤色の文字は見えづらくなるので黄色や白色の文字に変えるようにする
・赤色を使う時は赤橙やオレンジを使う（赤に黄色を混ぜる）
・緑色を使う時は、青みが強い緑を使う
・暖色（赤～緑）と寒色（緑～青）から交互に選ぶ

ポイント２：文字に色をつけるときは背景色との組み合せに配慮する

背景と明度に差をつける
・背景と文字は明度差をつける
・黒、青、緑の背景に赤で書かれた文字は読みづらい
・明るい黄色、白、クリーム色は混同しやすいので、例えば白背景に黄色文字は使わないように注意する

ポイント３：彩度の低い色（パステルカラー）同士の組合せは避ける

薄い色同士の組合せだと識別しづらくなる
・ピンクと水色を組み合わせる場合はピンクを赤橙にしたり彩度を組み合わせる

ポイント４：色の明度や彩度の差を利用する

色弱の方は色相の見分けが苦手な分、明度や彩度の差に敏感となる
・3色を組み合わせるときは「明るい色、中間の色、暗い色」を組み合わせる
・高低差を表すときは「暗い緑→緑→明るい緑」のように明るさを変える

ポイント５：色の面積を広くする

伝えたい情報を太字にしたり、シンボルを大きくする
・面積の広い方に色を付ける
・矢印を使う時は幅のある矢印にする

ポイント６：色名を表記する

同じ色でも何色と呼ぶかは個人によって異なる
・色の区別で情報を伝える場合は「何色」かを表記すればだれにでも分かりやすくなる

ポイント７：形状を変える

色に頼らずにグラフや図の意味が分かるようにする
・グラフの線は色を変えるだけでなく実線、点線、破線など線種を変える
・グラフや図の凡例も色の違いで表現するのではなく形状を〇△□などに変える

ポイント８：ハッチング（縞模様）や境界線を加える

境界線や輪郭を入れた方が見やすくなる
・色の塗り分けにハッチングなど模様を入れる
・色の境目に境界線や輪郭線を入れる

ポイント９：縁取りをつける

見分けにくい色が重なる時は縁取りをつけることで見やすくする
・見分けにくい色が重なる時は縁取りをつける

ポイント１０：協調箇所は色以外の方法を組み合わせる

強調の意味で赤色を使うことが多いですが、一部の色弱の方には黒い文字と同じように見えることがある
・強調は赤色ではなく赤橙色を使う
・強調する文字の大きさやフォントを変える。下線を引く

サンプル配色

カラーユニバーサルデザインの配色セットのサンプルです。

ベースカラー：広い面積に用いる

色名	RGB	カラーコード
明るいピンク	255,202,191	#ffcabf
クリーム	255,255,128	#ffff80
明るい黄緑	216,242,85	#d8f255
明るい空色	191,228,255	#bfe4ff
ベージュ	255,202,128	#ffca80
明るい緑	119,217,168	#77d9a8
明るい紫	201,172,230	#c9ace6

アクセントカラー：小さい面積に用いる

色名	RGB	カラーコード
赤	255,75,0	#ff4b00
黄色	255,241,0	#fff100
緑	3,175,122	#03af7a
青	0,90,255	#005aff
空色	77,196,255	#4dc4ff
ピンク	255,128,130	#ff8082
オレンジ	246,170,0	#f6aa00
紫	153,0,153	#990099
茶色	128,64,0	#804000

無彩色

色名	RGB	カラーコード
白	255,255,255	#ffffff
明るいグレー	200,200,203	#c8c8cb
グレー	132,145,158	#84919e
黒	0,0,0	#000000

最後に

カラーユニバーサルデザインについては公衆トイレや公園、公共建築物、道路標識など、よく観察しているとすでに目にしている機会が多いかもしれません。まだWEB業界では浸透に至っていない事であると思いますが、ぜひWEGサイト制作におけるペルソナやユーザー属性の一端として色弱の方も加えていただけると、インターネットを通じたよりよい情報提供につながっていくと思います！！