ライト＆ダークモード両対応 セマンティックカラートークン＆WCAG 2.2 フォーカス外観・コントラスト総合設計スタジオ
「ライトモードで合格しても、ダークモードに反転させるとコントラストが足りなくなる」「ボタン枠線やWCAG 2.2のフォーカスリングが3:1基準を満たさない」問題を根絶。ライト＆ダークのセマンティックカラートークンを左右並列でリアルタイム編集し、実機UIコンポーネント上で視覚的・科学的に検証できます。
ライトモード (Light Mode) カラートークン
ダッシュボード・アクセシビリティ監査
WCAG 2.2のコントラスト要件を満たしたUIは、日光下のモバイル画面や色覚特性を持つユーザーを含め、すべての人が快適に利用できます。
最終更新: 2026年10月25日 / 判定: 正常稼働中
📊 ライトモード コントラスト比＆WCAG 2.2 判定結果
| 組み合わせ要素 | コントラスト比 | APCA (Lc) | WCAG 2.2 基準 | 判定 |
|---|
ダークモード (Dark Mode) カラートークン
ダッシュボード・アクセシビリティ監査
WCAG 2.2のコントラスト要件を満たしたUIは、日光下のモバイル画面や色覚特性を持つユーザーを含め、すべての人が快適に利用できます。
最終更新: 2026年10月25日 / 判定: 正常稼働中
📊 ダークモード コントラスト比＆WCAG 2.2 判定結果
| 組み合わせ要素 | コントラスト比 | APCA (Lc) | WCAG 2.2 基準 | 判定 |
|---|
💻 セマンティックカラートークン 一括エクスポート
CSSカスタムプロパティ（CSS変数）、Tailwind CSS設定、W3C Design Tokens JSONを出力します。
デザインシステム カラートークン＆WCAG 2.2 アクセシビリティ適合仕様書
ライト＆ダークモード セマンティックカラートークン・フォーカス外観監査報告書
ライトモード トークン定義
ダークモード トークン定義
| モード | 監査対象UI組み合わせ | コントラスト比 | 適用WCAG 2.2基準 | 判定 |
|---|
📖 WCAG 2.2 アクセシビリティ・コントラスト比の公表基準と算定根拠
1. 通常テキスト vs ラージテキスト (1.4.3 / 1.4.6)
W3C WCAG 2.1/2.2 および JIS X 8341-3 において、本文・通常テキストは4.5:1以上（Level AA）、7.0:1以上（Level AAA）が義務付けられています。18pt（約24px）以上、または14pt（約18.66px）太字以上の「ラージテキスト」は3.0:1以上（AA）、4.5:1以上（AAA）が基準となります。
2. WCAG 2.2 新基準: フォーカス外観 (2.4.11 / 2.4.13)
キーボード操作（Tab移動）時に表示されるフォーカスインジケータ（輪郭・リング）は、隣接する背景色に対して3.0:1以上のコントラスト比を確保する必要があります。本ツールでは、ボタンおよび入力欄のフォーカスリングが基準をクリアしているかを自動判定します。
3. 次世代コントラストAPCA（WCAG 3.0ドラフト）
従来の比率計算（4.5:1等）は背景の明暗極性や空間周波数（フォントの細さ）を考慮しない弱点がありました。APCA（Accessible Perceptual Contrast Algorithm）は人間の視覚応答に基づき、本文読みやすさとしてLc 60〜75以上を推奨値としています。
※本スタジオの初期パレット値は、一般的なWeb制作・Design Systemで利用される「入力例（初期プリセット）」です。プロジェクトのブランドカラーやデザイン要件に合わせて自由にカスタマイズしてご活用ください。