フォーカスリングの色はどう選ぶ？キーボード操作を分かりやすくする方法

TIPS

フォーカスリングは、Tabキーなどでキーボード操作したときに「今どのリンクやボタンを操作できるか」を示す視覚的な印です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2の「2.4.7 Focus Visible」は、キーボードで操作できるUI（ユーザーインターフェース）に、フォーカス位置が見える動作モードを求めています。色を選ぶときはブランドカラーだけで決めず、リングが接する背景色とのコントラストを確認するのが基本です。

フォーカスリングは隣接する背景に対して3:1以上を目安にする

作者がフォーカスリングを独自に装飾する場合、WCAG 2.2の「1.4.11 Non-text Contrast」では、フォーカス状態を識別するために必要な視覚情報に、隣接色との3:1以上のコントラスト比が求められます。ブラウザー標準のフォーカス表示を作者が変更していない場合はこのコントラスト要件の例外がありますが、独自色へ変えるなら背景との比率を確認します。

また、WCAG 2.2の「2.4.13 Focus Appearance」はAAAレベルの追加基準で、フォーカス表示の面積と、フォーカス前後で同じ位置の画素が3:1以上変化することを求めます。これはAAの必須条件ではありませんが、より見つけやすいフォーカスリングを考えるときの参考になります。

背景別に使いやすい3つのフォーカスリング例

1. 白い背景には濃いブルー

白 ■#FFFFFF のページでは、ブルー ■#0B57D0 を3px程度のリングにすると、背景とのコントラスト比は約6.39:1です。

:focus-visible {
  outline: 3px solid rgb(11 87 208);
  outline-offset: 2px;
}

:focus-visible は、要素がフォーカスを持ち、ブラウザーがフォーカス表示を示すべきだと判断した場合に適用されます。キーボード利用時のフォーカスを目立たせつつ、ポインター操作ではブラウザーの判断に任せたい場合に使えます。

2. 暗い背景には明るいアンバー

ダークネイビー ■#1F2937 の背景では、アンバー ■#FFD166 のリングなら約10.18:1です。暗い背景で青系のリングを使うと、背景と明度が近くなって見えにくい場合があります。たとえばブルー ■#0B57D0 とダークネイビーの比率は約2.30:1なので、この組み合わせをリングと隣接背景として使うのは避けます。

3. 背景色が変わるサイトでは2色リングを使う

明るい面と暗い面が混在するサイトでは、1色だけで全背景に対応するのが難しくなります。W3CのTechnique C40では、明るい色と暗い色の2本のリングを重ねる方法が紹介されています。たとえばライトグレー ■#F9F9F9 とダークブルー ■#193146 のコントラスト比は約12.71:1です。

:focus-visible {
  outline: 2px solid rgb(249 249 249);
  outline-offset: 0;
  box-shadow: 0 0 0 4px rgb(25 49 70);
}

C40では、2色同士が9:1以上で、フォーカス表示全体が単一の無地背景上に描かれる場合、どちらか一方が背景に対して3:1以上になることを利用します。ただし背景が写真やグラデーションの場合は、この保証だけに頼れないため実際の表示で確認します。

フォーカスリングを消さず、背景が変わる場所までキーボードで確認する

outline: none だけでフォーカスリングを消し、代わりの表示を用意しないのは避けます。特に box-shadow だけのフォーカス表示は、強制カラーモードなどで消える場合があるため、W3CのC40でも outline を併用する方法が示されています。実装後はTabキーでリンク、ボタン、フォームなどを順番に移動し、明るい背景・暗い背景・カード上のすべてでリングが見えるか確認します。

HueRollではリング候補の色を3桁または6桁のHEX（Webで色を表す16進数コード）やカラーピッカーで選び、選択色と白・黒とのコントラストを確認できます。ただし任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、リング色と実際の背景色の比率は別途確認します。