色・コントラスト

視覚は a11y で最も対象範囲が広い領域。色覚特性（約8%の男性、0.5%の女性）、加齢による視力低下、 屋外の明るさ、低品質ディスプレイ、すべてが「視覚条件」。

WCAG コントラスト比

テキストとその背景の明度差の比率。1:1（同じ）〜 21:1（黒と白）。

大型テキストの定義: 18pt（24px）以上、または 14pt（18.66px）以上で太字。

確認ツール

• Chrome DevTools: 要素を選択 → Styles パネルの色の隣にコントラスト比が表示される。
• WebAIM Contrast Checker: 2色を入力。
• axe DevTools / Lighthouse でページ全体スキャン。
• Stark: Figma / Sketch / VS Code プラグイン。デザイン段階でチェック。

例

色だけに頼らない

色覚特性（赤緑色弱・青黄色弱・全色盲）の人にとって、「赤が悪い、緑が良い」だけでは伝わらない。 必ず色 + 別の手がかりを使う。

悪い例

<p style="color: red">エラー</p>
<p style="color: green">OK</p>

良い例（色 + アイコン + テキスト）

<p class="error">
  <svg aria-hidden="true"> <!-- ⚠ --> </svg>
  <strong>エラー:</strong> メールアドレスの形式が正しくありません
</p>
<p class="success">
  <svg aria-hidden="true"> <!-- ✓ --> </svg>
  保存しました
</p>

よくある「色だけ」パターン

• 必須項目を赤い枠だけで示す → アスタリスク + "必須" の文言
• グラフの凡例が色だけ → ラベル + ハッチパターン
• リンクが本文中で色だけ違う → 下線も付ける
• カレンダーで予定のある日が色違いだけ → アイコンや太字を追加
• 「赤チームと青チーム」 → アイコンや形も変える

リンクの下線

WCAG 1.4.1 では「色だけで識別させない」ことを求める。本文中のリンクは下線を付けるのが基本。 ナビゲーションのように位置で明らかな場合は省略可。

/* 本文中のリンクは下線 */
.prose a {
  color: #0066cc;
  text-decoration: underline;
}

/* hover でアクセント */
.prose a:hover {
  text-decoration-thickness: 2px;
}

フォーカスインジケータの色

フォーカスリングも 3:1 以上のコントラストが要る。 ブラウザ標準の青いリングが背景と被るなら、独自に明示する。

:focus-visible {
  outline: 2px solid #38bdf8; /* 背景に対して 3:1 以上 */
  outline-offset: 2px;
}

テキストサイズと拡大

200% ズームで崩れない

WCAG 1.4.4 では、200% ズームで内容と機能が損なわれないことが求められる。 テキストの拡大やブラウザのページズームで横スクロールが出ないように。

• 固定幅レイアウト（width: 1200px 等）を避ける
• レスポンシブな単位（rem, %, fr）を使う
• overflow: hidden でテキストを切らない

400% ズーム / リフロー

WCAG 1.4.10 (Reflow) は320 CSS px の幅でも横スクロールしないこと。 モバイル対応がしっかりしていれば自然に満たせる。

テキスト間隔の調整可能性

WCAG 1.4.12。ユーザーが行間・文字間・段落間を調整しても崩れないこと:

• 行間 1.5 倍、段落間隔 2 倍
• 文字間 0.12em、単語間 0.16em

!important 付きの固定 line-height や 文字サイズはこの基準を破りやすい。

ダークモードと color-scheme

OS のダーク/ライト設定に追従する基本パターン。

:root {
  color-scheme: light dark;
  --bg: #fff;
  --fg: #111;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d12;
    --fg: #e7ebf3;
  }
}
body { background: var(--bg); color: var(--fg); }

• color-scheme プロパティでスクロールバーや input の見た目もモードに追従。
• ダーク/ライト両方でコントラストを満たすか必ず確認。

Windows ハイコントラストモード

Windows の「ハイコントラスト」設定では、ブラウザが色を強制的に置き換える。 背景画像や CSS でしか色情報が伝わらない要素はそこで消える。

• 境界線は border プロパティで明示する（box-shadow だけだと消える）。
• アイコンは currentColor を使った SVG にする。
• forced-colors: active メディアクエリで個別にスタイル指定可。

@media (forced-colors: active) {
  .button {
    border: 1px solid CanvasText;
  }
}

視覚特性別の配慮

ロービジョン（弱視）

• 大きな文字・高コントラスト・シンプルなレイアウト
• 200% ズームで読める
• 装飾より構造を優先

色覚特性

• 赤緑が見分けにくい人が多い（赤緑色弱）
• 赤と緑の組み合わせを「意味のある対比」に使わない
• シミュレータ（Chrome DevTools の Rendering タブ）で確認

羞明（光がまぶしい）

• 純白背景 (#fff) より少し落とした白 (#fafafa 等) が楽
• ダークモードを用意

「テキスト画像」の扱い

ロゴを除き、テキストを画像化しないのが原則（WCAG 1.4.5）。

• 拡大すると画質が落ちる
• 翻訳・コピーできない
• ユーザーが文字色や行間を変えられない

Web フォントが普及した今、ほぼ全部 HTML テキスト + CSS で表現できる。

具体的なチェックリスト

• ✓ 通常テキストで 4.5:1 以上のコントラスト
• ✓ 大型テキストで 3:1 以上
• ✓ UI コンポーネント（境界線、フォーカスリング、アイコン）で 3:1 以上
• ✓ リンクの下線、エラーのアイコン、必須のアスタリスクで色以外の手がかり
• ✓ 200% ズームで横スクロールが出ない
• ✓ 320px 幅でリフローする
• ✓ Windows ハイコントラストモードでも操作可能
• ✓ ダーク/ライト両方を用意し両方ともコントラスト満たす