フォーカスの外観(2.4.13)とは — WCAG 2.2 のAAA基準「面積×コントラスト」を計算例で解説
「フォーカスの外観 とは」「フォーカスインジケーター コントラスト」で検索してこの記事にたどり着いた方の多くは、キーボード操作時のフォーカスリングをどれくらい目立たせればよいのか、具体的な基準を探しているのではないでしょうか。WCAG 2.2 達成基準2.4.13「フォーカスの外観」はまさにその基準を定めたものですが、適合レベルAAA(WCAGの中で最も要求が厳しい水準)に位置づけられている点に、まず注意が必要です。この記事では、規範条文をWAIC公式訳で確認しながら、「面積」と「コントラスト」という2つの要件を90×30pxボタンの計算例で整理し、混同されやすい達成基準1.4.3・1.4.11との違いも解説します。実際の色・寸法を入れて判定したい場合は、後述のフォーカスインジケーター チェッカーもご利用ください。
レベルAAA・達成基準2.4.13①達成基準2.4.13とは — レベルAAAの「フォーカスの外観」基準
達成基準2.4.13「フォーカスの外観」(英語名: Focus Appearance)は、WCAG 2.2で新設された達成基準です。まず押さえておくべき最重要ポイントは、この基準の適合レベルがAAA(トリプルA)であるということです。WCAG 2.2 勧告本文でも見出しに「(Level AAA)」と明記されており、同じくWCAG 2.2で新設された達成基準2.5.8「ターゲットのサイズ(最低限)」がレベルAAであるのとは異なり、2.4.13はWCAGの中で最も要求水準の高いレベルに位置づけられています。WCAG 2.2 勧告本文は、この基準の規範条文を次のように定めています(WAIC公式訳)。
「キーボードのフォーカスインジケータが視覚的に表示される場合、フォーカスインジケータの領域が次の全てを満たす: フォーカスされていないコンポーネント又はサブコンポーネントの、太さ 2 CSS ピクセルの外周の領域と同等以上の大きさである。かつ、フォーカスされている状態とフォーカスされていない状態との間で、同一ピクセルに少なくとも 3:1 のコントラスト比がある。」
出典: WCAG 2.2 本文 達成基準2.4.13(WAIC訳)
つまり要件は大きく2つ、(1)面積要件(太さ2px相当以上の面積があること)と(2)コントラスト要件(状態間で3:1以上変化すること)に分解できます。次の章でそれぞれを具体的な数値とともに見ていきます。
②2つの要件を計算例で理解する — 面積(480px²)とコントラスト(3:1)
面積要件 — 「太さ2 CSSピクセルの外周相当」の意味
「太さ2 CSSピクセルの外周相当の面積」という表現は分かりにくいですが、Understanding文書は次のように補足しています。
「これは、フォーカスインジケータの最小面積を規定するだけである。フォーカスインジケータが文字通り 2 CSS ピクセルの太さのアウトラインである必要はなく、インジケータがそれと同等以上の大きさであればよいだけである。」
出典: Understanding SC 2.4.13 Focus Appearance(WAIC訳)
つまり、インジケータの形状が文字通りの「2px幅の線」でなくても、必要な面積さえ確保していれば条件を満たします。Understanding文書は具体的な数値例として、幅90px・高さ30pxの矩形コンポーネントを挙げています。
| 項目 | 値 |
|---|---|
| 非フォーカス時のコンポーネント | 幅90px × 高さ30px |
| 外側矩形(全ての辺が1px大きい) | 92px × 32px = 2,944px² |
| 内側矩形(全ての辺が1px小さい) | 88px × 28px = 2,464px² |
| 必要面積(太さ2px相当) | 2,944px² − 2,464px² = 480px² |
矩形(幅w, 高さh): 4h + 4w
円(半径r): 4πr
角丸矩形(幅w, 高さh, 境界半径r): 4h + 4w − (16 − 4π)r
コントラスト要件 — 状態間で3:1以上の変化
フォーカス時と非フォーカス時で、同じ位置のピクセルの色を比較し、コントラスト比が3:1以上あることが求められます。コントラスト比は、sRGB色空間の相対輝度 L = 0.2126R + 0.7152G + 0.0722B(R・G・Bは各色成分をsRGBのガンマ補正を外した値)から、CR = (L1 + 0.05) / (L2 + 0.05)(L1は明るい方、L2は暗い方の相対輝度)という式で算出します。3:1はあくまで許容される最低限の変化量であり、それ以上大きく変化させることが望ましいとされています。また規範条文の注記により、ユーザエージェントの解像度補正やアンチエイリアシングによって変更されたピクセルは無視できるとされています。
③よくある誤解 — 「状態間の同一ピクセル比較」と1.4.3/1.4.11の「隣接ピクセル比較」の違い
達成基準2.4.13のコントラスト要件で最も誤解されやすいのが、達成基準1.4.3「テキストのコントラスト(最低限)」や1.4.11「非テキストのコントラスト」との違いです。Understanding文書は次のように明記しています。
「この要件は、異なる状態における同一ピクセル間のコントラストの変化を測定する。これは、同時にある一つの状態において、隣接する異なるピクセル間のコントラストを測定する、テキストのコントラスト及び非テキストのコントラストの達成基準とは異なる。」
出典: Understanding SC 2.4.13 Focus Appearance(WAIC訳)
1.4.3・1.4.11が測るのは、ある一つの瞬間(状態)における、文字色と背景色のような隣接する2色の間のコントラストです。
2.4.13が測るのは、同じ1つのピクセルが、フォーカスされる前と後でどれだけ色が変化したかという、時間軸をまたいだ変化量です。
比較対象が「隣り合う2つの色」なのか「同じ場所の前後2つの状態」なのかという、根本的に異なる測定軸を持つ基準だと理解しておくと、両者を混同せずに済みます。たとえば、フォーカスリング自体の色が背景色に対して3:1以上のコントラストを持っていても(1.4.11の話)、フォーカス前後でその位置のピクセルがほとんど変化していなければ、2.4.13のコントラスト要件は満たされません。逆に、1.4.11の隣接コントラストがやや低くても、フォーカス前後の色の変化量が3:1以上あれば2.4.13のコントラスト要件自体は満たし得ます。両者は別々に確認すべき、独立した要件です。
④2つの例外 — ユーザエージェント既定とインジケータ・背景を未変更の場合
| 例外名 | 内容 |
|---|---|
| ユーザエージェントによる決定 | フォーカスインジケータがユーザエージェントによって決定され、著者が調整できない場合 |
| インジケータ・背景ともに未変更 | 著者がフォーカスインジケータおよびその背景色を変更していない場合 |
1つ目は、<select>要素のようにブラウザ標準のフォーカスインジケータが表示され、著者がそれを調整する手段を持たない場合です。2つ目は、インジケータ本体だけでなく、その背景色(隣接ピクセル)も著者が一切変更していない場合に限られる例外です。Understanding文書は、この例外が「インジケータ本体」と「その背景」の両方が未変更であって初めて成立すると明記しており、たとえばbody要素のbackground-colorを明示的に指定するだけでも「変更した」とみなされ、この例外は無効になる点に注意が必要です。
⑤実務での確認方法 — 面積とコントラストをまとめて計算する
実務で達成基準2.4.13を確認する際は、(1)フォーカスリングの色と非フォーカス時の色から状態間コントラスト比を計算し3:1以上あるか、(2)リングの太さ・オフセット・コンポーネントの寸法から実際のインジケータ面積を計算し、太さ2px相当の必要面積以上あるか、という2つを別々に確認する必要があります。相対輝度の計算やリング面積の算出(角丸や内側・外側配置を含む)は手計算では誤りやすいため、当サイトのフォーカスインジケーター チェッカーでは、コンポーネントの幅・高さ・角丸、リングの色・太さ・オフセットを入力するだけで、状態間コントラスト比と必要面積・実面積の比較を自動計算できます。24×24pxの基準を扱う達成基準2.5.8についてはターゲットのサイズ(最低限)の解説記事もあわせてご覧ください。
よくある質問
フォーカスの外観(2.4.13)を満たさないとWCAG2.2に違反しますか?
達成基準2.4.13は適合レベルAAAです。多くの適合方針はレベルAAまでの達成を目標としており、AAAであるフォーカスの外観を満たしていないことが、直ちにレベルAA準拠の違反になるわけではありません。ただしAAAはより望ましい水準であり、キーボード操作のしやすさに大きく関わる基準のため、満たすことが推奨されます。
480px²という数字はどんな形にも当てはまりますか?
いいえ。480px²はUnderstanding文書が示す「幅90px・高さ30pxの矩形コンポーネント」の場合の数値例です。必要面積はコンポーネントの寸法によって変わり、矩形なら4h+4w、円なら4πr、角丸矩形なら4h+4w−(16−4π)rという式で計算します。
3:1のコントラストは、フォーカスリングの色と背景色の間のコントラストのことですか?
いいえ。達成基準2.4.13が求めるのは「同じピクセル位置」における「フォーカスされている状態」と「フォーカスされていない状態」の間のコントラスト比です。これは、隣接する2色間のコントラストを測る達成基準1.4.3・1.4.11とは異なる測定軸です。
- W3C WCAG 2.2 勧告本文 達成基準2.4.13: https://www.w3.org/TR/WCAG22/#focus-appearance
- WCAG 2.2 本文 日本語訳(WAIC): https://waic.jp/translations/WCAG22/
- Understanding SC 2.4.13 Focus Appearance(W3C): https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
- Understanding SC 2.4.13 日本語訳(WAIC): https://waic.jp/translations/WCAG22/Understanding/focus-appearance.html
この記事を引用する場合
本記事の内容を引用・紹介いただく場合は、記事名「フォーカスの外観(2.4.13)とは」と情報確認日「2026年7月22日」をあわせてお示しください。当サイトへのリンクは任意です(リンクいただける場合は https://www.conbu.jp/tool/wcag/article-focus-appearance.html をご利用ください)。
変更履歴
- 2026-07-22: 初版公開
免責事項: 本記事はWCAG 2.2 達成基準2.4.13に関する解説記事であり、W3C・WAICの公式文書ではありません。個別のウェブサイト・コンポーネントがWCAG 2.2に適合するかどうかの最終判断は、一次資料の確認や専門家によるアクセシビリティ監査で行ってください。詳細は免責事項をご確認ください。