カラーユニバーサルデザイン(CUD)とは?配色の実践ポイントと身近な例

色は情報を素早く伝える便利な手段ですが、色の見え方は人によって違います。日本では男性の約20人に1人、女性の約500人に1人が生まれつき色の区別がつきにくい色覚特性を持ち、その数は全国で約320万人にのぼります。カラーユニバーサルデザイン(CUD)は、こうした色覚の多様性に配慮し、できるだけ多くの人に情報が正確に伝わるように配色やデザインを工夫する考え方です。

この記事では、カラーユニバーサルデザインの定義、色覚のタイプごとの色の見え方、配色の実践ポイント、学校や公共施設での身近な例、Webサイトでの対応方法までを整理します。

カラーユニバーサルデザインとは 色覚の多様性に配慮するデザインの考え方

カラーユニバーサルデザイン(Color Universal Design)は、NPO法人カラーユニバーサルデザイン機構(CUDO)が提唱した概念で、「色の見え方が一般と異なる人にも、情報がきちんと伝わるように配慮されたデザイン」を指します。略称はCUDです。

誰にとっても使いやすい設計を目指すユニバーサルデザインの考え方を「色」に特化させたもの、と捉えると分かりやすいでしょう。似た言葉に「カラーバリアフリー」がありますが、こちらは色弱者の障壁を取り除くことに重心があるのに対し、カラーユニバーサルデザインは最初からすべての人に伝わる配色を設計する、という違いがあります。

対象は色弱者だけではない

カラーユニバーサルデザインの対象者は、先天的な色覚異常のある人だけではありません。白内障などで色の差を感じにくくなった高齢者、照明の暗い場所や小さな画面で表示を見るケースなど、色の判別が難しくなる場面は誰にでも起こります。人間の色覚は環境や加齢でも変化するため、CUDは特定の誰かのためではなく、社会全体の情報伝達の質を上げる取り組みだといえます。

色の見え方は人によって違う 色覚のタイプ

人間の目には赤・緑・青の光を感じる3種類の錐体細胞があり、どれかの働きが弱いか欠けていると、色の見え方が一般(C型)と異なります。主なタイプは次のとおりです。

  • P型(1型): 赤を感じる錐体の特性が異なる。赤が暗く見え、赤と緑、赤と黒の区別が難しい
  • D型(2型): 緑を感じる錐体の特性が異なる。日本人の色弱者の中で最も多く、赤と緑、緑と茶の見分けが難しい
  • T型(3型)・A型: 青を感じる錐体の異常や、色をほとんど感じないタイプ。数は少ない

見分けにくい色の組み合わせ

タイプにより差はありますが、次の組み合わせは多くの色弱者にとって区別が困難です。

  • 赤と緑、緑と茶
  • 赤と黒、濃い赤と黒
  • 水色とピンク、青と紫
  • 黄緑と黄、灰色とピンク

「使ってはいけない色」が決まっているわけではなく、問題になるのはあくまで組み合わせと使い方です。同じ赤でも、朱色寄りにして明度を上げれば黒との差が生まれ、見分けやすくなります。

なぜ今カラーユニバーサルデザインが求められるのか

2024年4月に改正障害者差別解消法が施行され、民間事業者にも障害のある人への合理的配慮の提供が義務化されました。色の情報だけで案内や警告を伝える表示は、この配慮を欠いた状態になり得ます。

また、日本産業規格でも対応が進んでいます。2018年には安全色を定めるJIS Z 9103が改正され、色覚多様性に配慮した色に見直されました。工業製品や公共施設の標識で使われる赤・黄・緑などの安全色は、この規格に基づいています。東京都をはじめ多くの自治体が「カラーユニバーサルデザインガイドライン」を策定し、印刷物や案内サインの配色基準を公開しているほか、行政の調達要件にCUD対応が含まれるケースも増えました。法令・規格・ガイドラインの三方向から、CUDは「配慮すると良いもの」から「対応が前提のもの」へ変わりつつあります。

配色の実践 3つのポイント

カラーユニバーサルデザイン機構は、CUDの実践を3つのポイントに整理しています。

1. できるだけ多くの人に見分けやすい配色を選ぶ

色相だけで区別させず、明度と彩度の差を組み合わせます。暖色系と寒色系を対比させる、濃い色と薄い色を交互に使うなど、白黒でコピーしても情報が失われない配色が目安になります。

2. 色だけに頼らず、形や文字でも伝える

色の違いに加えて、形の違い、ハッチング(模様)、線種、位置、文字やラベルの併記で情報を冗長化します。グラフなら凡例を線の近くに直接置く、地図なら色分けに加えて境界線や記号を付ける、といった工夫です。

3. 色名を使ったコミュニケーションができるようにする

「赤いボタンを押してください」という案内が成立するように、対象物に色名を表記しておく方法です。色が見分けにくい人も、色名の表示があれば会話や説明についていけます。

推奨配色セットを利用する

ゼロから配色を設計しなくても、「カラーユニバーサルデザイン推奨配色セット」が無償で提供されています。東京大学や産業技術総合研究所などの研究者による制作委員会が開発したもので、アクセントカラー・ベースカラー・無彩色のRGB値とCMYK値がガイドブックにまとめられており、印刷物にもデジタル表示にもそのまま使えます。迷ったらまずこのセットから色を選ぶのが、最も確実で効果の高い方法です。

身近な例 学校・公共施設・製品

カラーユニバーサルデザインはすでに生活の多くの場面で使われています。

  • 学校: 黒板用のダストレスeyeチョークは、色弱の生徒にも見分けやすい発色に調整されています。教科書も多くの発行元がCUDの監修を受けており、グラフの色分けに模様や引き出し線を併用しています
  • 公共施設・交通: 鉄道の路線図は色に加えて路線記号(アルファベットと番号)で区別できるように設計されています。トイレの男女表示のピクトグラムや、LED信号機の青色の色味調整も例のひとつです
  • 防災: ハザードマップは国のガイドラインに沿って、浸水深の色分けが色覚多様性に配慮した配色に統一されつつあります
  • 製品: 家電の充電ランプの色の使い分け、ゲームの色覚サポート設定など、身の回りの製品にも広がっています。第三者検証を経た製品や印刷物には「CUD認証マーク」が表示されるものもあります

Webサイトでの対応とチェックツール

Webの分野では、カラーユニバーサルデザインはウェブアクセシビリティの一部として扱われます。国際基準のWCAGと、それに対応するJIS X 8341-3では、文字と背景のコントラスト比を4.5対1以上にすること、色だけで情報を伝えないことが達成基準に含まれています。

対応の確認には次のようなツールが利用できます。

  • 色覚シミュレーション: Chromeの開発者ツールにはP型・D型などの見え方を再現する機能があり、スマートフォンでは「色のシミュレータ」アプリで実際の画面を確認できます
  • コントラストチェック: WebAIMのContrast Checkerなどで、文字色と背景色の組み合わせを数値で検証できます
  • 配色の比較・設計: Adobe Colorには色覚異常の見え方で配色を比較する機能があり、デザインの初期段階から確認しながら色を決められます

デザインの完成後にチェックするより、推奨配色セットやシミュレーションを設計段階から使うほうが、手戻りが少なく済みます。

よくある質問

カラーユニバーサルデザインは誰が作った言葉ですか。 色覚研究者らが中心となって2004年に設立したNPO法人カラーユニバーサルデザイン機構(CUDO)が提唱しました。当事者が検証に参加する体制で、認証やガイドブックの提供を行っています。

高齢者が見やすい色は何ですか。 白内障では視界が黄色みがかり、青と黒、白と黄のような組み合わせの差が感じにくくなります。明度差を大きく取り、文字を太く大きくすることが有効です。

使ってはいけない色はありますか。 単独で禁止される色はありません。赤と緑のように見分けにくい組み合わせを避けるか、明度差・形・文字の併用で補うことが本質です。

まとめ

カラーユニバーサルデザインは、色覚の多様性を前提に、すべての人に情報が伝わる配色を設計する考え方です。実践の要点は「見分けやすい配色を選ぶ」「色以外の要素を併用する」「色名で伝えられるようにする」の3つで、推奨配色セットとチェックツールを使えば専門知識がなくても取り組めます。合理的配慮の義務化やJIS改正を背景に、印刷物からWebサイトまで対応が標準になりつつある今、自社の資料やサイトの配色を一度見直してみてください。

石井秀幸@WEBデザイナー
WordPress公式『横浜 WordPress Meetup』主宰/株式会社ノクチ基地 取締役/モンゼンクリエイティブ合同会社 代表。WEB制作に関する技術や役立つ情報を発信していきます。10年にわたるWordPress歴を背景に、幅広いアイデアを形にするお手伝いをしています。