カラーコントラストとアクセシビリティ：実践ガイド

モニターで素敵に見える色を選ぶ。リリースする。すると誰かがテキストを読めないと言う。

これは思っている以上によく起こります。男性の約12人に1人、女性の約200人に1人が何らかの色覚異常を持っています。低コントラストの画面、明るい日光、加齢による視力低下を加えると、あなたの色の選択が多くの人に影響することになります。

良いニュース：これには明確なルールがあります。WCAGコントラスト要件と呼ばれ、聞こえるほど難しくありません。

コントラスト比とは？

コントラスト比は、2つの色が明るさでどれだけ異なるかを表す数値です。1:1（コントラストなし — 同じ色）から21:1（最大コントラスト — 白に黒）までです。

目はすべての色の差を均等に見ているわけではありません。コントラスト比は数学的な色の差ではなく、人間の視覚が実際に明るさをどう認識するかを反映しています。

クイックリファレンス：

| コントラスト比 | 見え方 | 合格？ | |---|---|---| | 1:1 – 2:1 | ほぼ見えない | いいえ | | 3:1 | 読めるが目が疲れる | 大きなテキストのみAA | | 4.5:1 | 快適に読める | 通常テキストAA | | 7:1 | とてもクリア | 通常テキストAAA | | 21:1 | 最大（白に黒） | すべて |

AA vs. AAA：何が違う？

WCAGは色に関する2つの適合レベルを定義しています：

レベルAA（ほとんどのサイトが目標とする）：

• 通常テキスト（18pt未満）：4.5:1のコントラスト比が必要
• 大きなテキスト（18pt以上または14pt以上ボールド）：3:1のコントラスト比が必要
• UIコンポーネントとグラフィカルオブジェクト：3:1のコントラスト比が必要

レベルAAA（最高基準）：

• 通常テキスト：7:1のコントラスト比が必要
• 大きなテキスト：4.5:1のコントラスト比が必要

ほとんどの組織はAAを目標にします。AAAは理想的ですがデザインに制約があります — 7:1を達成しながら見栄えのいい色の組み合わせは多くありません。

よくあるコントラスト失敗

実際のプロジェクトで常に出てくるもの：

白い背景に薄いグレーのテキスト：あの微妙で「エレガント」なグレーテキスト？コントラストをしばしば通過しません。白に#999999はたった2.85:1 — 大きなテキストでも不合格です。

色付き背景に色付きテキスト：紫に青、青に緑、濃いグレーに赤。あなたには区別できるように見えても、コントラスト比では不十分です。

フォームのプレースホルダーテキスト：薄いグレーのプレースホルダーテキストはウェブデザインでほぼ普遍的ですが、ほぼ常にコントラスト要件を満たしません。低視力のユーザーはフィールドに何が求められているか読めません。

画像上のテキスト：暗いオーバーレイやテキストシャドウを追加しない限り、写真上のテキストが一貫してコントラスト基準を満たすことはまれです。

色覚異常への配慮

コントラスト比は役立ちますが、すべてを解決するわけではありません。色覚異常とは、一部のユーザーが文字通り特定の色のペアを区別できないことを意味します。

情報を伝えるときに色だけに頼らない：

• エラー/成功に赤/緑？アイコンやテキストラベルも追加
• 色分けされたチャート？パターン、ラベル、異なる形を追加
• 赤だけで必須フィールドを表示？アスタリスクや「（必須）」テキストを追加

最も一般的なタイプ：

• 第二色覚異常（赤緑、男性の約6%）：赤と緑が似て見える
• 第一色覚異常（赤緑、男性の約2%）：赤が暗く/茶色に見える
• 第三色覚異常（青黄、まれ）：青と黄色の区別が困難

色を修正する実践ステップ

ステップ1：ブランドカラーをカラーコンバーターで16進数に変換。コントラストを確認するには正確な値が必要です。

ステップ2：すべてのテキスト/背景の組み合わせをテスト。メインテキストだけでなく、ボタン、リンク、キャプション、フォームラベル、エラーメッセージもチェック。

ステップ3：明度を調整して不合格を修正。通常、同じ色相と彩度を維持しながら暗くまたは明るくして比率を達成できます。

ステップ4：シミュレーターでテスト。Chrome DevToolsに内蔵の視覚障害シミュレーターがあります（レンダリングパネル > 視覚障害のエミュレーション）。

ステップ5：SVGグラフィックや画像もチェック。コントラストの悪いアイコンはテキストと同じく問題です。

すぐ使えるヒント

急いでいるなら、これらの安全な組み合わせは常にAAに合格します：

• 黒 (#000000) + 白 (#FFFFFF) — 21:1
• ダークグレー (#333333) + 白 — 12.6:1
• 白テキスト + ダークブルー (#003366) — 9.9:1
• 黒テキスト + ライトイエロー (#FFF9C4) — 18.1:1
• ダークグリーン (#2E7D32) + 白 — 5.1:1

よく不合格になるもの：

• ミディアムグレー (#808080) + 白 — 3.9:1（AA通常テキスト不合格）
• 赤 (#FF0000) + 黒 — 5.25:1（AA合格だがAAA不合格）
• オレンジ (#FF8C00) + 白 — 3.0:1（AA通常テキスト不合格）

---

アクセシビリティは単なるコンプライアンスではありません — あなたが作ったものを全員が実際に使えるようにすることです。テキストのコントラスト比のチェックから始めましょう。明らかな不合格を先に修正。その後、ボタン、アイコン、二次テキストへ。小さな変更、大きな影響。