#491
アクセシビリティ・インクルーシブ
#491からーゆにばーさるでざいん
カラーユニバーサルデザイン (CUD)
別名・表記:CUDColor Universal Designカラーバリアフリー
UIXHERO Definition
「色だけに依存しない情報設計」。色覚特性の違いに関わらず、誰にとっても同等に情報が認識できるように設計する考え方。
概要
人間の色覚には多様性があり、色の見え方は人によって異なる。
日本では男性の約5%、女性の約0.2%が何らかの色覚特性(色覚多様性)を持つと報告されている。
代表的なタイプには、一般色覚、P型(プロタン型)やD型(デュータン型)などがある。
カラーユニバーサルデザイン(CUD)は、特定の色覚タイプの人だけでなく、誰にとっても見やすく、情報が正確に伝わるようにするためのデザイン手法。
UXでの活用
CUDの3つの原則をUIデザインに適用する。
- 見分けやすい配色を選ぶ: 色覚タイプによって混同しやすい色の組み合わせ(赤と緑、濃い赤と黒、ピンクと水色など)を避け、色相だけでなく「明度差」や「彩度差」をしっかりつける。グレースケールに変換しても区別できるか確認すると良い。
- 色以外でも情報を伝える: 色だけに頼らず、形、アイコン、文字、パターン(ハッチングなど)を併用して情報を区別できるようにする(多重コード化)。
- 色の名前を明記する: 商品選択画面などで、色の違いが分かりにくい場合に備え、「ローズレッド」「スカイブルー」のように色名をテキストで補足する。
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.
関連する解説記事
関連する記事詳細が見つかりませんでした。