#111
視覚デザイン
#111こんとらすと
コントラスト
別名・表記:Contrast対比
UIXHERO Definition
「対比」。文字を読みやすくしたり、重要なものとそうでないものを区別するために使う差のこと。コントラストは、ユーザーの認知負荷を下げ、誤操作や読み飛ばしを防ぐための基礎原則である。
概要
デザインの4原則（近接、整列、反復、コントラスト）の一つ。 単に「目立たせる」だけでなく、「情報を整理し、意味を伝える」ために不可欠な要素。 Webアクセシビリティガイドライン（WCAG）では、テキストと背景の間に一定以上のコントラスト比（4.5:1以上など）を求めている。
UXでの活用
- 可読性の向上: 背景色と文字色の明度差を十分に確保し、誰にでも読みやすいテキストにする。
- 視線の誘導: 重要なボタン（Call to Action）に補色（反対色）を使って強いコントラストを与え、ユーザーの注意を引く（顕著性バイアスの利用）。CTAボタンが全部同じ色 → 結果、どれも押されない。
- 状態の表現: アクティブな要素は濃く、非アクティブな要素（Disabled）は薄く（低コントラスト）することで、操作可能かどうかを直感的に伝える。
💡 使いどころ
テキストの可読性確保（文字色と背景色）、UIの優先順位付け（目立つボタンと目立たないボタン）、要素のグルーピングなど、デザインのあらゆる場面で意識する。
⚠️ 注意点・誤用
コントラストが低すぎると、視認性が下がりアクセシビリティの問題が生じる（高齢者や色覚多様性への配慮不足）。逆に高すぎると、目が疲れたり、不快な印象を与えることがある（ハレーション）。
具体例
- 白い背景に黒い文字（明度コントラスト）
- 大きな見出しと小さな本文（サイズコントラスト）
- 丸いアイコンと四角いカード（形状コントラスト）
出典・参考文献:
- WCAG 2.1 / 2.2
- WebAIM: Contrast and Color Accessibility
- Robin Williams: The Non-Designer’s Design Book