フォーカスインジケーターとは

• キーボード操作時に「いまどの要素にフォーカスが当たっているか」を視覚的に示す枠線やアウトライン
• 「フォーカスリング」と呼ばれることもある
• マウスを使えないユーザーにとって、フォーカスインジケーターは画面上の唯一の現在地表示
• WCAG 2.4.7「フォーカスの可視化」（レベルAA）で表示が必須とされている
• さらに WCAG 2.2 では 2.4.13「フォーカスの外観」（レベルAAA）でインジケーターの最小サイズとコントラストも規定された

参照: WCAG 2.2 — Focus Visible / WCAG 2.2 — Focus Appearance

デジタル庁の実装を見てみる

• デジタル庁デザインシステム（DADS）のコードスニペット（HTML版）では、フォーカスインジケーターは次のように実装されている
• 黄色1色ではなく、内側に黄色・外側に黒のダブルリング構造 になっているのがポイント

/* デジタル庁デザインシステム（HTML版）のグローバルスタイル（簡略化） */
:focus-visible {
  outline: 4px solid #000000;          /* 外側：黒の太いアウトライン */
  outline-offset: 2px;                 /* 要素との間に2pxの隙間 */
  border-radius: 4px;
  box-shadow: 0 0 0 2px #ffd43d;       /* 内側：隙間を黄色（Yellow-300）で埋める */
}

• 黄色は DADS のプリミティブカラー Yellow-300（#FFD43D）
• Figma のデザインライブラリでは「Focus-Yellow」「Focus-Blue」としてフォーカス専用のカラースタイルが定義されている
• :focus-visible 疑似クラスを使い、キーボード操作時のみインジケーターを表示する

参照: デジタル庁デザインシステムβ版 / digital-go-jp/design-system-example-components-html

理由1: どんな背景の上でも見えるダブルリング

• フォーカスインジケーターは非テキスト要素なので、WCAG 1.4.11「非テキストのコントラスト」（レベルAA）により背景色との 3:1 以上のコントラスト比が求められる
• しかし単色のリングでは、どんな背景にも 3:1 を満たすことは原理的に不可能
  • 黄色（#FFD43D）と白背景のコントラスト比は約 1.4:1 — 白い背景では見えない
  • 黒（#000000）と黒背景のコントラスト比は 1:1 — 暗い背景では見えない
• そこで明るい色と暗い色を重ねる

• 背景が明るくても暗くても、必ずどちらかのリングが 3:1 を大きく超える — これがダブルリングの狙い
• ページごとに背景色を確認してフォーカス色を変える必要がなく、サイト全体に一律で適用できる

参照: WCAG 2.2 — Non-text Contrast / カラー（アクセシビリティ）｜デジタル庁デザインシステムβ版

理由2: ブランドカラーの青と衝突しない

• デジタル庁のキーカラーは青（Blue-900 #0017C1 など）
• リンク・ボタン・選択状態など、画面上のインタラクティブ要素はすでに青で表現されている
• フォーカスインジケーターまで青にすると、次の問題が起こる
  • 青いボタンの上で青いリングが背景に溶けて見えなくなる
  • 「フォーカスされている」のか「選択されている」のか状態の区別がつかない
• 黄色は青のほぼ補色 — 青基調の UI の中で最も区別しやすい色
• 通常のコンテンツでは黄色をほとんど使わないため、「黄色い枠 = フォーカス」という意味を独占させられる

理由3: 黄色は注意を引く色としての実績がある

• 黄色と黒の組み合わせは、踏切・工事現場・標識など現実世界で「注意喚起」に使われてきた配色
• JIS の安全色（JIS Z 9103）でも黄は「注意」を意味する色として規定されている
• 人間の目は明るい黄色系の波長に対する感度（比視感度）が高く、視界の中で気づきやすい
• 「目立つこと」が唯一の役割であるフォーカスインジケーターに適している

先行事例: GOV.UK

• この黄色 × 黒のフォーカススタイルには先行事例がある — 英国政府の GOV.UK デザインシステム
• GOV.UK は 2019年、WCAG 2.1 レベルAA 対応のためにフォーカススタイルを刷新した
  • フォーカス色: 黄色 #FFDD00
  • テキスト・ボーダー色: 黒 #0B0C0C
• リンクは黄色の背景 + 黒の太い下線、フォーム部品は黄色のアウトライン + 黒の太いボーダーで表現
• 「黄色は暗い背景に対して、太い黒ボーダーは明るい背景に対して高いコントラストを持つ」という設計意図が公式に明文化されている
• 各国の行政系デザインシステムがこの方式を参考にしており、デジタル庁の黄色もこの系譜にある

参照: GOV.UK Design System — Understanding focus state styles / We've made the GOV.UK Design System more accessible

自分のサイトで再現する方法

• :focus-visible とダブルリングを組み合わせれば、同じ仕組みを数行で導入できる

/* 悪い例：フォーカスリングを消してしまう — キーボードユーザーが操作不能になる */
*:focus {
  outline: none;
}

/* 良い例：黄色 × 黒のダブルリング */
:focus-visible {
  outline: 4px solid #000000;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #ffd43d; /* outline-offset の隙間を黄色で埋める */
}

• 自社のブランドカラーに合わせる場合も考え方は同じ
  • 明るい色と暗い色のペアを選ぶ（2色間のコントラスト比が大きいほど安全）
  • UI の基調色と被らない色をフォーカス専用にする

よくある間違い

1. 単色のフォーカスリングで全ページをまかなう

/* 間違い：青1色 — 青いボタンやダーク背景の上で消える */
:focus-visible {
  outline: 2px solid #0017c1;
}

/* 正解：明暗2色のダブルリングにする */
:focus-visible {
  outline: 4px solid #000000;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #ffd43d;
}

2. box-shadow だけでリングを描く

• Windows のハイコントラストモード（強制カラーモード）では box-shadow が無効化される
• outline は強制カラーモードでも描画されるため、リングの主役は必ず outline にする

/* 間違い：box-shadowのみ — 強制カラーモードで消える */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px #ffd43d;
}

/* 正解：outlineを主役にする */
:focus-visible {
  outline: 4px solid #000000;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #ffd43d;
}

3. リングが細すぎて気づけない

• WCAG 2.4.13 はフォーカスインジケーターに 2px 以上 の太さを求めている（レベルAAA）
• 1px の点線アウトラインでは、高解像度ディスプレイ上ではほとんど視認できない

まとめ

• デジタル庁のフォーカスインジケーターは黄色（Yellow-300 #FFD43D）と黒のダブルリング構造
• 単色では全ての背景でコントラスト比 3:1（WCAG 1.4.11）を満たせない — 明暗2色を重ねることで解決している
• キーカラーの青と被らない黄色を選ぶことで、「黄色い枠 = フォーカス」という意味を確立している
• 黄色 × 黒は踏切や標識と同じ、注意を引くことが実証された配色
• 源流は英国 GOV.UK デザインシステム（#FFDD00 × #0B0C0C）
• :focus-visible + outline + box-shadow の数行で自分のサイトにも導入できる
• リングの主役は outline にする — 強制カラーモードでも消えない