カラーユニバーサルデザインとは？色覚に配慮した見やすい配色とデザインのコツ

「赤と緑を使えば、色の違いが分かりやすい」
「重要なところは赤文字にすれば目立つ」

デザインでは当たり前のように使われている色の表現ですが、すべての人に同じように見えているとは限りません。

色の見え方には個人差があり、色の組み合わせによっては、色の違いを区別しにくい人もいます。

そこで大切になるのが、カラーユニバーサルデザイン（CUD）という考え方です。

この記事では、カラーユニバーサルデザインの基本から、Webサイト・資料・グラフなどで実践できる配色のコツまで、初心者にも分かりやすく紹介します。

スポンサーリンク

カラーユニバーサルデザインとは？

カラーユニバーサルデザイン（CUD）とは、色の見え方に違いがある人にも、できるだけ情報が伝わりやすいように配慮したデザインのことです。

色を見分けることが難しい人だけを対象にするのではありません。

高齢者、子ども、目の状態が変化している人、照明や画面環境が異なる人なども含め、できるだけ多くの人にとって「見やすい・分かりやすい」デザインを考えることが大切です。

例えば、

• 色だけで「OK・NG」を伝えない
• 赤と緑だけで情報を区別しない
• 背景と文字のコントラストを確保する
• グラフに色以外の違いもつける
• 必要に応じて文字や記号を添える

といった工夫があります。

つまり、カラーユニバーサルデザインでは、「色を選ぶこと」だけではなく、「色がなくても情報が伝わること」も重要です。

身の回りにもあるカラーユニバーサルデザイン

私たちの身の回りには、色だけに頼らず情報を伝えるデザインがたくさんあります。

特に公共空間の案内表示では、色・文字・形・記号などを組み合わせて情報を伝えることが重要になります。

色の見え方には個人差がある

人によって色の見え方には違いがあります。

そのため、ある人には「赤」と「緑」がはっきり違って見えていても、別の人には色の違いを区別しにくい場合があります。

また、色覚の違いだけでなく、

• 明るさ
• 照明
• ディスプレイ
• 周囲の色
• 印刷状態
• 視力
• 年齢

などによっても、色の見え方は変わります。

ここで大切なのは、「この色なら誰にでも同じように見える」と考えないことです。

だからこそ、色だけに情報を頼らないデザインが重要になります。

色覚のタイプによって見え方は異なる

色覚にはいくつかのタイプがあり、色の組み合わせによっては区別が難しくなる場合があります。

特に、赤と緑など、色相だけの違いに頼った配色は注意が必要です。

ただし、「色覚特性のある人はすべて同じように見える」というわけではありません。

色の見え方には個人差があることを前提に、できるだけ多くの人に情報が伝わるデザインを考えることが大切です。

カラーユニバーサルデザインで大切な3つの考え方

カラーユニバーサルデザインを考えるときは、次の3つを意識すると分かりやすくなります。

• 色の違いを分かりやすくする
  色だけで区別する場合は、できるだけ識別しやすい組み合わせを選びます。
• 明度・彩度の差をつける
  色相だけでなく、明るさや鮮やかさにも違いをつけます。
• 色以外の情報も加える
  文字・形・記号・線・模様などを組み合わせます。

この3つを意識するだけでも、かなり「伝わりやすい色使い」に近づきます。

＼本で学ぶカラーユニバーサルデザイン／

カラーユニバーサルデザインに使いやすい色

カラーユニバーサルデザインでは、特定の色を使えば必ず大丈夫というわけではありません。

色同士の組み合わせや、明度差・彩度差、背景とのコントラストが重要です。

しかし、実際に配色を作るときに、色を選ぶのは難しいことも多いでしょう。

そんなときは、「カラーユニバーサルデザイン推奨推奨配色セット」を活用することをおすすめします。

カラーユニバーサルデザイン推奨推奨配色セット

「カラーユニバーサルデザイン推奨推奨配色セット」は、なるべく多くの人が見分けやすいように配色されているので、活用すると便利です。

「東京都カラーユニバーサルデザインガイドライン」を参考にした配色です。
推奨配色セットの詳細は、最新の公式資料も確認してください。

ただし、この中から色を適当に選べばCUDになるわけではありません。

ここからは、実際に配色するときのポイントを見ていきましょう。

カラーユニバーサルデザインの配色・デザインのコツ

カラーユニバーサルデザインのコツは、使用する色に注意することと、色の変化のみに頼らないということです。

具体的な例を７個にまとめましたので、参考にしてみてください。

① 色だけで情報を区別しない

これは、カラーユニバーサルデザインで特に重要なポイントです。

具体的には、以下のような色の組み合わせが特に区別が難しいとされています。

例えば、

と色だけで伝えるのではなく、

のように、文字や記号も加えます。

色を選ぶときは、赤などの暖色系と、青や紫の寒色系の色相からそれぞれ色を選択するようにすると、違いが分かりやすくなります。

このとき、ピンクと水色のようなパステルカラー同士の組み合わせは、区別しにくいため、中程度の明度の色を選ぶといいでしょう。

② 色の明度差・彩度差をつける（濃さを変える）

私たちは、色を色相・明度・彩度の違いによって認識しています。

色覚特性のある人は、この色相の違いが見分けにくくなっています。

そのため、色相だけで違いを表現するのではなく、明度や彩度にも差をつけることがポイントです。

例えば、「赤・緑・茶」と色相だけを変えるより、明るい色・中間の色・暗い色のように明度にも差をつけた方が、情報を区別しやすくなります。

特に文字と背景では、十分なコントラストを確保しましょう。

例えば、山の高低差を表すときなど、3色以上使うときは明度差を変えたほうが違いを認識しやすくなります。

こんな組み合わせには注意

ただし、「この2色は絶対に使ってはいけない」という意味ではありません。

文字サイズ、太さ、境界線、形などを組み合わせることで、見分けやすさを改善できる場合があります。

③ 背景と文字のコントラストを確保する

Webデザインでは特に重要です。

例えば、白い背景には薄い色より濃い色を使い、文字と背景の明度差をしっかり確保します。

「好きな色だから」という理由だけで文字色を決めず、背景とのコントラストも確認しましょう。

また、色覚だけでなく、一般的な視認性の面でも重要なポイントです。

見やすい色の例

④ 色名を表示する

色だけで情報を伝える必要がある場合は、色名やラベルを添える方法があります。

例えば、以下のように、カラーチップと色名をセットにします。

色の区別で情報を伝えたいときは、何色なのかを表記することでだれにでも色を伝えることができます。

⑤ 形を変える

グラフや図では、色だけでなく形と線の種類も変えてみましょう。

例えば、

● A―――実線
▲ B——–破線
■ C・・・点線

のように、色と形の両方で区別します。

これなら、色の違いが分かりにくい場合でも、形から情報を読み取ることができます。

また、凡例だけでなく、グラフそのものに直接ラベルを付ける方法も有効です。

⑥ 模様や線を加える

グラフや図形などでは、色に模様を加える方法もあります。

例えば、

A → ドット
B → ストライプ
C → 格子

というように、ハッチングを使います。

また、色の境界に白や黒の線を入れるだけでも、隣り合う色を区別しやすくなる場合があります。

また、デザイン上どうしても見分けにくい色が重なってしまう場合は、縁取りをつけることで分かりやすくすることができます。

⑦ 色以外の方法でも強調する

「重要な部分は赤文字」というのは、Webサイトでよく使われる表現です。

しかし、重要な情報を色だけで表現するのは避けた方が安心です。

例えば、リンク＝青文字だけではなく、青文字＋下線にするなど、色以外の手がかりを加えます。

ボタンでは、赤＝重要だけでなく、「購入する」「送信する」など、文字そのものに意味を持たせることが大切です。

「色を変える」ことは、あくまで強調方法のひとつとして使うのがおすすめです。

色を白黒にして確認する

配色に迷ったときは、画像やデザインを一度白黒表示にしてみるのもおすすめです。

色相の違いに頼りすぎている場合、白黒にすると「全部同じくらいの明るさ」に見えてしまうことがあります。

そんなときは、明るさの差をつけることで、情報を区別しやすくできます。

これは、カラーユニバーサルデザインだけでなく、文字の読みやすさやデザイン全体のメリハリを確認する方法としても便利です。

カラーユニバーサルデザインは「色を使わないこと」ではない

カラーユニバーサルデザインというと、

「色をたくさん使わない方がいいの？」
「赤や緑は使わない方がいいの？」

と思うかもしれませんが、そうではありません。

大切なのは、

色を楽しみながら、誰にとっても分かりやすいデザインを目指してみましょう。

カラーユニバーサルデザインの作るときの4STEP

カラーユニバーサルデザインは、次の４ステップで考えるといいでしょう。

• 色を選ぶ
• 明度・彩度を確認
• 色以外の情報を追加
• 実際の見え方を確認

よくある質問（FAQ）

関連記事

まとめ

カラーユニバーサルデザインとは、色の見え方に違いがある人も含め、できるだけ多くの人に情報が伝わりやすいように配慮するデザインです。

ポイントをまとめると、

• 色だけで情報を伝えない
• 明度・彩度にも差をつける
• 背景と文字のコントラストを確保する
• 色名やラベルを加える
• 形や記号を変える
• 模様や線を活用する
• 白黒にして見え方を確認する

などがあります。

「この色なら大丈夫」と決めるのではなく、色＋文字＋形＋明度差など、複数の方法で情報を伝えることがカラーユニバーサルデザインの基本です。

Webサイトやブログ、資料、グラフ、イラストなど、身近なデザインから少しずつ取り入れてみましょう。