色のコントラストとアクセシビリティ

状況: ブランドカラーのライトブルー（#87CEEB）を背景に白テキストを表示していたが、コントラスト比が2.1:1でWCAG AA基準を大幅に下回っていた。高齢者から「文字が読めない」との声が寄せられていた。

適用プロセス:

1. ブランドカラーの明度を下げた代替色（#1A7BAF）を作成。白テキストとのコントラスト比が4.7:1でAA基準を達成
2. セール表示の赤文字（#FF0000）も背景とのコントラストが不十分だったため、ダークレッド（#C41E1E）に変更
3. 全色のペアリングルールをデザインシステムに追加

成果: アクセシビリティ監査のコントラスト違反が47件→0件に。ブランドの印象を維持しつつ、高齢者層のページ滞在時間が25%増加した。

状況: 分析ダッシュボードのグラフが赤・緑・青・黄の4色で表示されていたが、赤緑色覚異常のユーザーから「グラフの区別がつかない」との報告。利用者の約5%が影響を受けていた。

適用プロセス:

1. 色覚シミュレーションツール（Sim Daltonism）で確認し、赤と緑のグラフが同じ色に見えることを確認
2. カラーパレットを色覚多様性対応に変更：赤→オレンジ、緑→ティール。さらに各データ系列にパターン（実線・破線・点線）を追加
3. 凡例にテキストラベルを必ず表示し、ホバーでデータ値を数値表示

成果: 色覚多様性のあるユーザーのタスク完了率が68%→95%に改善。全ユーザーの「グラフの分かりやすさ」スコアも向上した。

状況: ネット証券アプリのUI全体でグレーのテキスト（#999 on #fff、コントラスト比2.8:1）が多用されており、60歳以上のユーザーの月間アクティブ率が20代の1/4以下だった。

適用プロセス:

1. 全画面のテキスト色を監査。128箇所でコントラスト比4.5:1未満を検出
2. 補足テキストの色を#999→#595959（コントラスト比7:1、AAA基準達成）に変更
3. 重要な数値（株価・残高）のフォントサイズを16px→18pxに拡大し、コントラスト基準に余裕を持たせた

成果: 60歳以上のMAUが42%増加。「画面が見やすくなった」の声が全年代から寄せられ、全体のCSATも3ポイント向上した。