🎨 デザインシステム＆アクセシビリティ実務仕様

UIカラーパレット WCAG 2.2 コントラスト比一括マトリクス検証
＆アクセシブル配色ジェネレーター

ブランドカラー、背景色、テキスト色など複数色で構成されるUIカラーパレットの全組み合わせ（総当たりマトリクス）を瞬時に計算。
Web Content Accessibility Guidelines (WCAG) 2.2のコントラスト基準（AA / AAA / 大文字・UIコンポーネント）への適合可否を一目で可視化し、不合格ペアに対しては色相・彩度を維持した最短輝度補正カラーを提示します。

⚡ 試算用パレットプリセット（ワンクリック適用） ※代表的なUIパレットの例です。色を追加・編集・削除できます。

🎨 パレット構成カラー（5色）

カラー名・Hexコードを編集、または新規カラーを追加してください（最大8色推奨）。

📊 全組み合わせコントラスト比マトリクス（行：背景色 × 列：文字・要素色）

セルをクリックすると、その組み合わせの実機プレビューと最短輝度補正を確認できます。

AAA (≥ 7.0:1) AA (≥ 4.5:1) Large/UI (≥ 3.0:1) Fail (< 3.0:1)

🔍 選択ペア詳細＆最短輝度補正（最短二分探索アルゴリズム）

Primary vs Background

現状のコントラスト判定

Sample Text 日本語サンプル (16px) 18pt以上の大テキスト・UIコンポーネント

背景: (L: ) 文字: (L: ) 比率:

✨ AA達成 (4.5:1) 最短輝度補正カラー色相・彩度維持

現在の色相（Hue）と彩度（Saturation）を最大限保持したまま、明度（Lightness）のみを二分探索で調整して基準（4.5:1）を満たす最短修正色です。

Sample Text 日本語サンプル (AA 4.5:1 合格) 推奨代替テキスト色

推奨カラー:

新比率: 4.52:1

実機UIコンポーネント適用モックアップ

ボタン (Button)

アラート・情報通知バナー

重要なお知らせ：設定が正常に保存されました。

フォーム入力枠 (Input)

ステータスバッジ Active Status

色覚多様性（P型/D型/T型/白黒）SVGシミュレーションや一次資料照合： 🔬 この2色を単一ペア精密監査ツールで検証 →

💻 コードエクスポート（CSS変数 / Tailwind CSS 設定）

CSS カスタムプロパティ (Variables)

Tailwind CSS (tailwind.config.js)

📖 WCAG 2.2 / JIS X 8341-3 コントラスト基準の公式定義と適用範囲

通常テキスト（AA基準: 4.5:1）

本文や標準フォント（18pt未満、太字の場合は14pt未満）に適用される最低基準です。白内障や加齢・弱視ユーザーが支障なく文字を判読するために必須とされます。

大テキスト・UI部品（AA基準: 3.0:1）

18pt以上（太字14pt以上）の見出しテキスト、およびボタン枠線・フォーム入力欄境界線・アクティブ状態アイコンなどのUIコンポーネントに要求される基準です。

高度適合レベル（AAA基準: 7.0:1）

公共機関や医療機関・シニア向けサービスで推奨される最高基準です。直射日光下でのスマートフォン閲覧時など、過酷な照明環境下でも確実に判読可能です。

※本ツールの適合判定は、入力された特定カラーペアの数理的コントラスト比（相対輝度比）に基づく局所的検証です。ウェブページ全体のアクセシビリティ適合（JIS X 8341-3適合証明や適合レベルAA宣言等）を行うには、HTMLマークアップ・キーボード操作性・スクリーンリーダー対応など規格全体の網羅的試験が必要です。

[ 広告 ]

📚 Webアクセシビリティ＆デザインシステム実務必読書・おすすめ機材 Amazon.co.jpアソシエイトリンク

アクセシビリティ実務