🧩 監査対象のUIコンポーネントを選択
監査したいパーツを選ぶと、標準的なスタイルとパラメータが即座に展開されます。
1
UIカラー ＆ スタイリング設定
2
寸法・タイポグラフィ（ターゲット＆テキスト間隔）
px
px
px
WCAG 1.4.12 テキスト間隔シミュレーション
🎯 WCAG 2.2 統合アクセシビリティ総合スコア
WCAG 2.2 レベルAA 完全適合
100
/ 100 点
1. 文字コントラスト (1.4.3)
PASS (4.6:1)
2. 境界線＆フォーカス (1.4.11)
PASS (3.2:1)
3. ターゲットサイズ (2.5.8)
PASS (48×48)
4. テキスト間隔 (1.4.12)
PASS (可変)
🖥️ 実機UIプレビュー＆フォーカス擬似体験
クリックまたはTabキーでフォーカス枠を確認
ボタンのテキスト
🔍 4大達成基準の個別監査レポート ＆ 詳細ツール連携
💻 合格推奨CSSコード（コピペ用）
/* Generated Accessible CSS */
WCAG 2.2 / JIS X 8341-3 適合性検査報告書
Web UIアクセシビリティ4大基準 監査証書
検査対象コンポーネント: プライマリボタン
発行日: 2026年10月25日
発行システム: goroneko ツールラボ
総合適合判定
WCAG 2.2 レベルAA 適合
総合スコア
100 / 100
| 達成基準 (Criterion) | 対象項目 | 実測値 | 要求基準 (AA) | 判定 |
|---|
【検査基準】W3C Recommendation Web Content Accessibility Guidelines (WCAG) 2.2 / 日本産業規格 JIS X 8341-3:2016
※本証書はクライアント提示および社内品質管理の根拠書類として出力されたものです。
📚 技術基準
WCAG 2.2 レベルAAが要求する「4大UIアクセシビリティ」
なぜ「色」だけでなく「境界線」「ターゲット」「文字間隔」が必須なのか？
1. コントラスト (1.4.3)
最低 4.5:1 (大文字 3:1)
文字色と背景色の明度差。白内障やロービジョン、屋外の直射日光下でも文字が確実に読めるための基本要件。
2. 非テキスト境界線 (1.4.11)
最低 3.0:1 (入力欄・枠線)
「どこがボタンでどこが入力欄か」を視覚的に特定するための境界線の明度差。Tailwind標準の淡色枠線（slate-200等）はほぼ不合格になります。
3. ターゲットサイズ (2.5.8)
最低 24×24px (推奨 44px)
手の震えや指タップの誤操作を防ぐクリック可能面積。見た目が小さなアイコンでも、余白や擬似要素でタップ領域を拡張することが義務付けられています。
4. テキスト間隔 (1.4.12)
行高1.5倍・字間0.12倍で崩れない
ディスレクシア等のユーザーが文字間隔を広げた際に、高さ固定（height）で文字が切断されないこと。`min-height` を使用することが必須です。
おすすめWebアクセシビリティ実務書籍・機材 (Amazonアソシエイト: tag=divelayer-22)
スポンサーリンク