AAAフォーカスインジケーター チェッカー
フォーカスリングの色・太さ・オフセットと、コンポーネントの幅・高さ・角丸を入力するだけで、WCAG 2.2 達成基準2.4.13「フォーカスの外観」が求める「状態間コントラスト比3:1」と「必要面積」を自動計算し、満たす可能性があるかを簡易判定します。
入力: コンポーネントとフォーカスリング
実寸プレビュー
非フォーカス時
フォーカス時
判定結果
この数値は、フォーカスリング色と隣接する背景色との「同一状態内・隣接ピクセル間」のコントラスト比です。2.4.13が測る「状態間(フォーカス前後)・同一ピクセル間」のコントラスト比とは、比較の対象がそもそも異なります。単色背景の単純な例では数値が一致して見えることがありますが、概念上は別の達成基準の話であり、混同しないようご注意ください。
修正・実装用CSSの例
達成基準2.4.13が求める2つの条件
達成基準2.4.13「フォーカスの外観」(レベルAAA)は、キーボードでフォーカスが当たったときに表示されるインジケータ(フォーカスリングなど)について、次の2つの条件を両方満たすことを求めています。
- 面積の条件: フォーカスインジケータの領域が、フォーカスされていないコンポーネントの「太さ2 CSS ピクセルの外周」の面積と同等以上であること。
- コントラストの条件: フォーカスされている状態とフォーカスされていない状態との間で、同一ピクセルに少なくとも3:1のコントラスト比があること。
この2条件は「AND」であり、どちらか一方だけでは基準を満たしません。また、コントラストが3:1に満たない部分は、面積の計算上「実質的に効果がない(0扱い)」として扱われる点にも注意が必要です。
「状態間コントラスト」と「隣接コントラスト」の違い(誤解されやすいポイント)
2.4.13のコントラスト条件は、同一ピクセルについて「フォーカスされている状態」と「フォーカスされていない状態」を比べる、状態間の変化量を測るものです。これに対して、達成基準1.4.3「テキストのコントラスト」や1.4.11「非テキストのコントラスト」は、同時にある一つの状態の中で、隣接する異なるピクセル同士(例: 文字色と背景色)を比べるものです。
比較対象の軸(状態の前後 vs. 隣接する2色)が根本的に異なるため、同じ「3:1」という数値でも意味が違います。例えば「フォーカスリングの色とページ背景色のコントラストが3:1ある」ことを1.4.11的な感覚だけで確認しても、それは2.4.13が求める「フォーカス前後で同じ場所の色がどれだけ変化したか」の確認にはなりません(単色の背景に単純なリングを重ねる場合は数値が同じになることが多いものの、概念としては別の基準です)。本ツールでは、この2つの数値を明確にラベルを分けて表示しています。
計算例: 90×30pxのボタンの場合(Understanding文書記載の例)
幅90px・高さ30pxの矩形コンポーネントについて、太さ2 CSS pxの外周の面積は、次の2つの矩形の面積の差として計算されます。
| 矩形 | 寸法 | 面積 |
|---|---|---|
| 外側(全辺+1px) | 92px × 32px | 2,944px² |
| 内側(全辺-1px) | 88px × 28px | 2,464px² |
| 差(必要面積) | - | 480px² |
つまり、このボタンにフォーカスが当たったときのインジケータは、少なくとも480px²の領域で、フォーカス前後のコントラスト比が3:1以上変化する必要があります。480px²という数字だけを覚えるのではなく、「どういう計算でその数字が出るか」を理解しておくと、寸法が変わった場合にも応用できます。
なお、この480px²は境界線をまたぐ配置(内外に1pxずつ)で計算した例です。本ツールの「実インジケータ面積」はコンポーネントの外側にリングを描く配置(outset)で計算するため、同じ条件(90×30px・太さ2px・オフセット0)を入力すると約492.57px²と、この例よりやや大きい値になります。配置による差の詳細は下の「自動判定していないこと」をご覧ください。
2つの適用除外(例外)
次の2つに該当する場合、達成基準2.4.13の対象外(例外)となります。ただし、いずれも該当性の判断には人間による確認が必要で、本ツールは自動判定していません(上のツール内チェックボックスでご自身の判断を反映できます)。
- 例外1(ユーザエージェントによる制御): フォーカスインジケータがユーザエージェント(ブラウザ)によって決定されており、コンテンツ制作者が調整できない場合。例: 標準の <select> 要素の既定フォーカス表示など。
- 例外2(既定インジケータ・背景ともに未変更): コンテンツ制作者がフォーカスインジケータ及びそのインジケータの背景色を変更していない場合。インジケータ本体だけでなく、隣接する背景色も含めて「両方とも変更していない」ことが条件です。例えば、body要素の背景色を明示的に指定するだけでもこの例外が無効になり得ます。
よくある質問
2.4.13は必ず対応しないといけない基準ですか?
いいえ。2.4.13「フォーカスの外観」はWCAG 2.2の中でも最高レベルであるレベルAAAの達成基準です。一般的なウェブアクセシビリティ対応(多くの場合レベルAA)の必須要件には含まれません。ただし、キーボード操作者にとってフォーカス位置が分かりやすくなるため、対応が推奨されます。
ブラウザ標準のフォーカスリングのままなら安心ですか?
多くの場合は例外2(フォーカスインジケータ及びその背景色をコンテンツ制作者が変更していない場合)に該当し、この達成基準の対象外になります。ただしCSSリセットやフレームワークが意図せずoutlineを打ち消していないか、また背景色を明示的に変更していないかは確認が必要です。
このツールの判定結果は正式な適合証明になりますか?
なりません。本ツールは入力値に基づく簡易的な計算・目安の提示であり、正式な適合試験や監査ではありません。実際のブラウザ描画、グラデーションや画像背景、アンチエイリアシングの影響などは反映されないため、最終判断は実装物の目視確認や専門家によるレビューを行ってください。
自動判定していないこと(人間の確認が必要な項目)
本ツールは入力された数値だけから機械的に計算しています。次のような点は、数値入力だけでは正確に判定できないため、実際のブラウザ描画やデザインの目視確認が必要です。
- 2つの例外の該当性: 「ユーザエージェントによる制御」「既定インジケータ・背景ともに未変更」のいずれも、実装内容の確認が必要な主観的・文脈依存の判断です(上のチェックボックスは自己申告の反映であり自動検出ではありません)。
- 実際のブラウザ描画との一致: 「状態間・同一ピクセルのコントラスト」は本来、実際の描画結果(スクリーンショット等)の比較が最も確実です。宣言的なCSS値だけからの推定では、ブラウザ既定のフォーカス表示や半透明・ブレンドモードの重なりを正しく評価できない場合があります。
- グラデーション・画像背景: 背景が単色でない場合(画像・グラデーション・パララックスなど)、単一のコントラスト比を計算できません。本ツールは単色の組み合わせのみを想定しています。
- 部分的コントラスト: フォーカスインジケータ全体が3:1を満たす必要はなく、3:1を満たす部分だけが面積要件の対象になり得ます。グラデーションの一部だけが基準を満たすようなケースは、本ツールでは扱えません。
- box-shadowによるインジケータ: box-shadowで疑似的にフォーカスリングを描く実装は、ぼかし(blur)や広がり(spread)により実際の可視領域・色の変化がCSS値から単純計算しにくく、本ツールの角丸矩形モデルでは正確に再現できません。
- アンチエイリアシング・解像度補正: 規範上、ユーザエージェントの解像度補正やアンチエイリアシングによって変更されたピクセルは無視してよいとされていますが、どのピクセルがそれに該当するかの自動判別は困難です。
- 面積の内側/外側/ストラドル配置による数%の差: 同じ厚さのインジケータでも、コンポーネントの内側・外側・境界線をまたぐ配置のどこに描画するかによって、幾何学的な面積が数%変動し得ます。本ツールは「外側(outset)配置」を前提に計算しており、境界に近いケースは元の解説文書の図(Understanding文書 Figure 4〜6)による目視確認を推奨します。
- サブコンポーネントの認定: メニュー項目やグリッドセルなど、何を「コンポーネント/サブコンポーネント」として扱うかは視覚的提示に依存し、機械的な単一の正解はありません。
判定方法(計算式)
本ツールは次の計算式で判定しています。すべてクライアントサイド(お使いの端末内)で計算しており、入力値がどこかに送信されることはありません。
1. 相対輝度(sRGB)
| sRGB値の線形化 | RsRGB ≤ 0.04045 なら R = RsRGB / 12.92、そうでなければ R = ((RsRGB + 0.055) / 1.055) ^ 2.4(G, Bも同様) |
| 相対輝度 | L = 0.2126 × R + 0.7152 × G + 0.0722 × B |
2. コントラスト比
| コントラスト比 | CR = (L1 + 0.05) / (L2 + 0.05)(L1: 明るい方の相対輝度、L2: 暗い方の相対輝度) |
| 判定基準 | 丸める前の値で CR ≥ 3.0 かどうかを判定(表示は小数第2位までに丸め) |
3. 必要面積(太さ2 CSS pxの外周)
| 角丸矩形(幅w, 高さh, 角丸半径r) | 必要面積 = 4h + 4w − (16 − 4π) × r |
4. 実インジケータ面積(外側=outset配置、角丸考慮)
| 外側の角丸矩形 | W = w + 2(o + t)、H = h + 2(o + t)、R = r + o + t |
| 内側の角丸矩形 | W = w + 2o、H = h + 2o、R = r + o |
| 角丸矩形の面積(共通式) | 面積 = W × H − (4 − π) × R² |
| リング(実インジケータ)面積 | 外側の面積 − 内側の面積 |
w=幅, h=高さ, r=角丸半径, t=リング太さ, o=オフセット(すべてCSS px)。角丸半径は幅・高さの半分を超えないよう自動的に調整して計算します。
- WCAG 2.2 勧告本文(2024年12月12日付) SC 2.4.13「フォーカスの外観」: https://www.w3.org/TR/WCAG22/#focus-appearance
- WCAG 2.2 用語集(相対輝度・コントラスト比・フォーカスインジケータ・外周): https://www.w3.org/TR/WCAG22/#dfn-relative-luminance / https://www.w3.org/TR/WCAG22/#dfn-contrast-ratio / https://www.w3.org/TR/WCAG22/#dfn-focus-indicator / https://www.w3.org/TR/WCAG22/#dfn-perimeter
- Understanding SC 2.4.13 Focus Appearance(W3C解説文書、英語): https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
- WCAG 2.2 本文 日本語訳(WAIC、ウェブアクセシビリティ基盤委員会): https://waic.jp/translations/WCAG22/
- Understanding SC 2.4.13 日本語訳(WAIC): https://waic.jp/translations/WCAG22/Understanding/focus-appearance.html
このツールを引用する場合: 「フォーカスインジケーター チェッカー(conbu.jp、情報確認日: 2026年7月22日)」のように、ツール名と情報確認日を明記してください。リンクの設置は任意です。
変更履歴
2026-07-22: 初版公開
免責事項: 本ツールは、WCAG 2.2 達成基準2.4.13「フォーカスの外観」(レベルAAA)の考え方を理解するための簡易計算ツールであり、正式な適合試験・監査ではありません。判定結果は「満たす可能性があります」「満たさない可能性が高い」「要確認」のいずれかで示され、「WCAG適合」を保証するものではありません。実際のブラウザ描画、グラデーション・画像背景、アンチエイリアシングの影響、例外該当性などは反映されないため、最終的な適合判断は実装物の目視確認や専門家によるレビューを行ってください。詳しくは免責事項をご覧ください。