UIXHERO
#491
アクセシビリティ・インクルーシブ
#491

からーゆにばーさるでざいん

カラーユニバーサルデザイン (CUD)

別名・表記:CUDColor Universal Designカラーバリアフリー

UIXHERO Definition

「色だけに依存しない情報設計」。色覚特性の違いに関わらず、誰にとっても同等に情報が認識できるように設計する考え方。

概要

人間の色覚には多様性があり、色の見え方は人によって異なる。 日本では男性の約5%、女性の約0.2%が何らかの色覚特性(色覚多様性)を持つと報告されている。
代表的なタイプには、一般色覚、P型(プロタン型)やD型(デュータン型)などがある。 カラーユニバーサルデザイン(CUD)は、特定の色覚タイプの人だけでなく、誰にとっても見やすく、情報が正確に伝わるようにするためのデザイン手法。

UXでの活用

CUDの3つの原則をUIデザインに適用する。

  1. 見分けやすい配色を選ぶ: 色覚タイプによって混同しやすい色の組み合わせ(赤と緑、濃い赤と黒、ピンクと水色など)を避け、色相だけでなく「明度差」や「彩度差」をしっかりつける。グレースケールに変換しても区別できるか確認すると良い。
  2. 色以外でも情報を伝える: 色だけに頼らず、形、アイコン、文字、パターン(ハッチングなど)を併用して情報を区別できるようにする(多重コード化)。
  3. 色の名前を明記する: 商品選択画面などで、色の違いが分かりにくい場合に備え、「ローズレッド」「スカイブルー」のように色名をテキストで補足する。

WCAG 2.x においても「色だけで情報を伝えないこと(Use of Color)」が達成基準として定められている。

💡 使いどころ

グラフ、地図、サインシステム、案内図など、色による情報の区別が重要な場面。特に公共性の高いUIや、安全に関わる警告表示では必須。

⚠️ 注意点・誤用

「地味な色にすること」ではない。鮮やかな色を使っても良いが、色に頼りすぎず、明度差や形状での区別を併用することが重要。

具体例

  • グラフの折れ線に、色だけでなく「○」「△」「□」などのマーカーを付ける。
  • 必須項目の「赤文字」の横に「※必須」というテキストを添える。
  • 信号機の「赤」には「✕」、「青」には「矢印」などの形状情報を付加する(色覚補助信号機)。
出典・参考文献:
  • NPO法人カラーユニバーサルデザイン機構 (CUDO)
  • JIS Z 9103:2018 (図記号―安全色及び安全標識)
  • W3C. (2023). Web Content Accessibility Guidelines (WCAG) 2.2.
  • Machado, G. M., Oliveira, M. M., & Fernandes, L. A. F. (2009). A physiologically-based model for simulation of color vision deficiency. IEEE Transactions on Visualization and Computer Graphics, 15(6), 1291–1298.
  • Brettel, H., Viénot, F., & Mollon, J. D. (1997). Computerized simulation of color appearance for dichromats. Journal of the Optical Society of America A, 14(10), 2647–2655.
作成: 2026年2月18日
更新: 2026年2月21日

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

この記事をシェアする
シェア: