WCAG 2.2対応 UIコンポーネント＆フォーカスリング境界線（3:1）自動診断＆推奨CSSジェネレーター
従来のアクセシビリティ診断は「文字色 vs 背景色」の文字コントラスト（4.5:1）ばかりが注目されていました。 しかしWCAG 2.2および改正障害者差別解消法（2024年4月義務化）では、 「入力欄のボーダーやアイコン、スイッチ境界線（非テキスト 1.4.11: 3:1以上）」や 「キーボード操作時のフォーカス枠（Focus Appearance 2.4.13: 3:1以上）」が厳格に求められます。 淡いグレーの枠線（#e2e8f0等）は実は違反対象です。本ツールは多重境界コントラストを一括検証し、最短合格色と安全なCSSを即座に生成します。
本ツールの前提・公表基準（初期値はモダンUIでよく使われる配色例です）
・非テキスト達成基準 1.4.11 (AA)：UI部品の境界線・状態変化アイコン等は隣接背景と3.0:1 以上が必須。
・フォーカス表示 2.4.13 (AA)：フォーカスインジケーターは、非フォーカス時の部品および隣接背景に対して3.0:1 以上が必須。
UIカラーパレット設定 リアルタイム同期
※背景に対してコントラスト比 3.0:1 以上が必須。
※背景および部品本体に対してコントラスト比 3.0:1 以上が必須。
※本文は背景に対して 4.5:1 以上が必須。
アクセシブル準拠 CSS
UIコンポーネント ライブプレビュー
Tabキーでフォーカス移動可能WCAG 2.2 達成基準 判定レポート AA基準
基準値: 3.0:1 以上（UIの輪郭を弱視・高齢者が識別可能か）
基準値: 3.0:1 以上（キーボード操作時の枠線が背景から浮き出ているか）
基準値: 4.5:1 以上（通常の本文サイズでの可読性）
基準値: 4.5:1 以上（白文字や濃色文字の視認性）
デザイナー＆エンジニアが陥る「WCAG 2.2」3大トラップ
1. `outline: none` の完全撤廃と `:focus-visible` の義務化
クリック時の青い枠線を消すために `outline: none;` や `border: none;` を指定するのは最大のアクセシビリティ違反です。マウス操作時には非表示にしつつ、キーボード操作時のみ明瞭な枠を出す `:focus-visible` を使用するのがWeb標準です。
2. 「淡いグレー枠線」は非テキストコントラスト（3:1）でほぼ全滅する
Tailwind CSSの `border-slate-200`（#e2e8f0）は、白背景（#ffffff）に対してコントラスト比 **約 1.2:1** しかありません。WCAG 2.2の1.4.11を満たすには、最低でも `border-slate-400`（#94a3b8 / 3.0:1以上）まで濃くする必要があります。
3. `outline-offset` で二重境界を作り、どんな背景でもコントラストを担保
フォーカスリングとボタン本体の間に `outline-offset: 2px;` を挟むことで、ボタン自体が青色でも、白い隙間が生まれるためフォーカスリングの視認性を3:1以上で安全に両立できます。