「伝わる」配色設計:カラーユニバーサルデザイン(CUD)の基本原則と実践
出典: cottonbro studio / Pexels(カバー画像)
グラフィックデザインにおいて「色」は、情報を瞬時に伝え、感情を揺さぶるための強力なツールです。しかし、私たちが何気なく選んでいる色の組み合わせが、一部の読者にとっては情報の欠落や誤解を招く原因になっているかもしれません。人間の色覚には多様性があり、赤と緑の区別が困難な人々などが存在します。こうした多様な色覚特性に配慮し、すべての人に正確に情報を届けるための設計アプローチが「カラーユニバーサルデザイン(CUD)」です。
色覚の多様性とCUDの必要性
ヒトの網膜には、光の波長(赤・緑・青)を感知する3種類の錐体細胞が存在します。遺伝的な要因や病気などによって、これらの錐体のいずれかが機能しなかったり、感度が異なったりすることで、色の見え方に差異が生じます。
日本では、男性の約20人におよそ1人(約5%)、女性の約500人におよそ1人(約0.2%)が、赤や緑の判別が苦手な「P型(赤色弱・赤色盲)」または「D型(緑色弱・緑色盲)」の色覚特性を持っています。これは決してまれな存在ではなく、学校の1クラスに1人、あるいはオフィスに何人かは必ずいる割合です。
公共のサインやWebサイトのインターフェース、グラフや地図などのデータ表現において、もし「赤と緑」だけで重要な情報を区別しようとすると、一部のユーザーは情報を正しく読み取ることができません。カラーユニバーサルデザイン(CUD)は、こうした情報のバリアフリーを実現するためのデザインガイドラインです。
CUDを実践するための3つの基本原則
特定非営利活動法人カラーユニバーサルデザイン機構 (CUDO)は、CUDを実践するための基本原則として以下の3つを提唱しています。
1. 出来るだけ多くの人に見えやすい配色を選ぶ
第一のステップは、混同しやすい色の組み合わせを避けることです。P型やD型の色覚特性では、「赤と緑」「オレンジと黄緑」「緑と茶色」「青と紫」「ピンクと水色」などが似たような色に見えやすくなります。 これらを避けるために、赤を「オレンジがかった赤(朱赤)」にし、緑を「青みがかった緑(青緑)」にするなど、色相自体を調整した「ユニバーサルデザイン推奨配色セット」を利用することが推奨されます。
2. 色以外の情報も併せて提供する(二重符号化)
色だけで情報を伝えるのではなく、形や文字、パターン(ハッチング)などを組み合わせて、色覚に依存しない「二重の伝達手段」を用意します。 例えば、路線図で路線ごとに色を分けるだけでなく、路線の境界に異なる点線を走らせる、グラフの棒に斜線やドットなどのパターンを乗せる、フォームのエラー箇所に「赤色」だけでなく「警告アイコン(⚠️)」を置くといった工夫です。
3. 色名を用いる時はコミュニケーションを配慮する
製品のパーツや地図の場所を指示する際、「赤いボタンを押してください」と表現すると、赤が認識しづらいユーザーは迷ってしまいます。「『停止』と書かれた赤いボタン」や「左端の丸いボタン」のように、色名以外の属性(文字・位置・形)を添えて指示を行うことが重要です。
WebにおけるCUDの品質基準とツール
現代のデジタルデザインでは、W3Cが策定したWeb Content Accessibility Guidelines (WCAG) 2.2が世界的な標準規格となっています。WCAGでは、テキストと背景のコントラスト比が最低でも「4.5:1(レベルAA)」を満たすことを要求しており、これも色覚の多様性を支えるための極めて実用的なルールです。
また、デザイナーは直感に頼るのではなく、色覚シミュレーションツールを積極的に導入すべきです。Adobe PhotoshopやIllustratorに標準搭載されている「校正設定」機能(P型・D型シミュレーション)や、無料のブラウザ拡張機能等を使用することで、制作段階から見やすさを検証することができます。
地方自治体などもCUDの普及に取り組んでおり、例えば愛知県が公開している色のバリアフリーガイドライン (愛知県)では、印刷物やスライドで犯しやすい間違いと具体的な改善案が分かりやすく図示されています。
まとめ
カラーユニバーサルデザインは、一部の人々のためだけの「特別な思いやり」ではありません。高齢化による視力低下や、屋外の太陽光の下でスマホ画面が見づらい瞬間など、状況のバリア(状況盲)にさらされるすべての人にとって「見やすくなる」恩恵があります。色に頼りすぎない構成力を磨くことこそが、グラフィックデザイン本来の「情報を整理し、美しく伝える」目的を果たす強力なアプローチになるのです。
お役立ち情報
- 📄 カラーユニバーサルデザイン機構 (CUDO)
- CUDの普及と認証を行っているNPO法人の公式サイトです。色覚の仕組みや推奨配色セットなど、最も包括的で信頼できる情報が手に入ります。
- 📄 Web Content Accessibility Guidelines (WCAG) 2.2 (W3C)
- W3Cが公開している最新のアクセシビリティ標準規格です。Webサイトにおける文字と背景のコントラスト基準などの詳細な実装指標が提供されています。
- 📄 愛知県「色のバリアフリーガイドライン」 (愛知県 PDF)
- スライドや資料作りにも応用できる、具体的なNG例と改善デザイン例がビジュアル付きで詳しく解説された実用的なPDFガイドです。