コントラスト (Contrast)

「おしゃれで淡い色を使おう」——この判断が積み重なると、UIは「ただの模様」になります。コントラストが不足すると、ユーザーは「どれがボタンで、どれが飾りか」の判別に脳のリソースを消費し、読むことそのものに疲れてしまいます。

重要なCTAは見落とされ、本来伝わるべきメッセージはノイズの中に埋もれ、ビジネスの機会損失（コンバージョン低下）に直結します。アクセシビリティ基準（WCAG）を満たさないコントラスト比は、視覚障害のあるユーザーだけでなく、屋外で日光下のスマートフォンを使うすべてのユーザーに影響します。

コントラストは「目立たせる」ための演出ではありません。情報の重要度・役割・状態をユーザーの視線に直接語りかける、UIの構造そのものです。「見出しと本文」「ボタンと背景」「アクティブと非アクティブ」——すべての区別はコントラストによって成立します。

よくある失敗は「デザイナーの高解像度モニターでは読めるが、ユーザーの環境では読めない」という状況です。コントラスト比を数値で管理することで、環境に依存しない安定した可読性を担保できます。

1. 原則の定義

コントラスト（Contrast）とは、色・明度・サイズ・形状の「差」を意図的に設計することで、情報の優先度・役割・状態をユーザーに瞬時に伝える設計原則。

本質は「差を作る」ことです。色、サイズ、形、余白による「差」がなければ、ユーザーは情報の重要度を判断できません。コントラストには色相（Hue）・明度（Value）・彩度（Saturation）・サイズ・形・テクスチャによる種類があり、最も安定して機能するのは明度のコントラストです。色覚特性に関わらず、明度の差は誰にでも伝わります。

2. いつ使うか（適用場面）

特に重要になるケース

• アクション誘導（CTA）: ボタンやリンクを目立たせ、ユーザーを次の行動へ導く時。
• 階層構造の提示: 見出しと本文、親要素と子要素の親子関係を明確にする時。
• 状態の変化: 選択中、無効化（Disabled）、エラーなど、要素の状態を伝える時。

トレードオフが起きる場面

• 視覚的ノイズ: すべてを高コントラストにしすぎると、逆にどこを見ていいかわからない「うるさい」画面になる。コントラストは「差」を作るものであり、全要素が同じ強度では差が生まれない。強調したいものを際立たせるには、周囲を「引く」ことが必要。
• ブランドイメージとの衝突: 「優しさ」「繊細さ」を表現したいブランドでは、強いコントラストが世界観を壊すことがある。機能的な最低ライン（WCAG AA基準）を守りながら、ブランドの色使いの中で最大のコントラストを確保する設計が求められる。
• ダークモード対応: ライトモードで最適なコントラストが、ダークモードでは過剰または不足になることがある。両モードそれぞれでコントラスト比を検証し、別々のカラートークンを定義する必要がある。

3. なぜ重要か（設計判断の核）

コントラストは「目立たせる」ための技術ではなく、「選択させる」ための設計である。

設計判断の基準

• 「これはユーザーに必ず見せたい情報か？」→ YESなら最強のコントラストを与える。
• 「これは読めなくても死なない情報か？」→ YESならコントラストを落としてノイズを減らす。

優先順位の考え方

• Primary（主）: 最も高いコントラスト（例：塗りつぶしボタン）。
• Secondary（副）: 中程度のコントラスト（例：枠線ボタン）。
• Tertiary（三次）: 低いコントラスト（例：テキストリンクやアイコンのみ）。

例外条件

• 背景装飾や、意図的に目立たせたくないプレースホルダーテキスト・補足情報などは、あえて低コントラストに抑えることがある。ただし、WCAG AAの最低ライン（通常テキスト4.5:1、大文字・太字3:1）は法的事項のテキストを含む全テキストに適用される。
• ダークパターンとして「同意させたい条件を低コントラストで目立たなくする」手法は、ユーザーの意思決定を意図的に歪める倫理的問題があり避けるべき。

4. 具体の設計ルール（チェックリスト）

最低ライン（Must - これ守らないと危険）

ここをクリアしていないと、製品として「使えない」レベルになります。

テキストの可読性: 文字と背景のコントラスト比は 4.5:1 以上あるか？（WCAG AA基準 / 大きな文字なら3:1）
リンクの識別: リンクテキストは、周囲の通常テキストと明確に区別できるか？（色だけでなく、太字や下線でも区別できるか）
Disabled表現: 無効化されたボタンやフォームは、有効なものと明確に見た目が異なるか？

理想ライン（Better - できると強い/プロの品質）

UXをさらに高め、洗練された印象を与えるための基準です。

情報の階層化: サイズだけでなく、色の濃淡（グレーの使い分け）で情報の3段階（松・竹・梅）が表現できているか？
色覚多様性への配慮: 色だけに頼らず、形やアイコン、パターン（模様）を併用して情報を伝えているか？（赤緑色覚特性などへの配慮）
動的コントラスト: ホバー時やフォーカス時に、明確なコントラストの変化（フィードバック）があるか？

5. UI例

改善プロセス

1. モノクロチェック: 画面をグレースケール（白黒）にする。それでも「どれが重要か」「どこが押せるか」が分かるならOK。分からない場合は明度のコントラストが不足している。
2. コントラスト比の計測: BrowserのDevToolsや WebAIM Contrast Checker でコントラスト比を数値確認する。感覚ではなく数値で管理する。
3. 明度から修正する: 色相（Hue）を変える前に、明度（Value）の差をつけることから始める。明度の差は色覚特性に依存しないため、最も安定した改善効果がある。
4. 階層を3段階に絞る: 高・中・低の3段階のコントラストレベルを定義し、要素をどのレベルに割り当てるかを意識的に設計する。4段階以上は管理が破綻しやすい。

6. 関連リンク

• 関連リファレンス（理論）: フォン・レストルフ効果 (Von Restorff Effect), 図と地の関係 (Figure-Ground), 視覚的階層 (Visual Hierarchy)
• 用語集（定義）: WCAG, カラーユニバーサルデザイン
• 関連するUI原則（横）: 視覚的階層 (Visual Hierarchy), コントラストと可読性 (Contrast & Readability), 配色設計 (Color System)

7. まとめ

今日から直せる一手 その「薄いグレーの文字」、一段階だけ濃くしてみてください。それだけでサイトの印象は「ぼんやり」から「くっきり」に変わります。

チームに共有するなら一言 「おしゃれさのために文字を読みにくくするのは、デザインではなく『排除』です。」