パレットのコントラスト検証

パレットのコントラスト検証機能は、デザインパレット内の色ペアがWCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）に準拠しているかを確認し、テーマに適用する前にチェックします。

概要

この機能は、テキストと背景色のコントラスト比を検証することで、サイトの配色がアクセシビリティ基準を満たしていることを保証します。視覚に障害を持つユーザーにとって読みづらい可能性のある色の組み合わせを防ぐのに役立ちます。

入力形式

この機能は、以下の形式でカラーパレットを入力として受け取ります。

{
  "colors": [
    {
      "name": "primary",
      "hex": "#678233"
    },
    {
      "name": "text",
      "hex": "#ffffff"
    },
    {
      "name": "background",
      "hex": "#f5f5f5"
    }
  ],
  "wcag_level": "AA"
}

パラメータ

パラメータ	型	必須	説明
`colors`	array	はい	`name`と`hex`プロパティを持つ色のオブジェクトの配列
`wcag_level`	string	いいえ	WCAG準拠レベル：「A」、「AA」（デフォルト）、または「AAA」
`pairs_to_check`	array	いいえ	検証したい特定の色のペア（例：`["primary-text", "background-text"]`）

チェックされるWCAGレベル

この機能は、WCAGの基準に従ってコントラスト比を検証します。

レベル	通常のテキスト	大きなテキスト	最小比率
A	3:1	3:1	3:1
AA	4.5:1	3:1	4.5:1
AAA	7:1	4.5:1	7:1

通常のテキスト — 18pt未満のテキスト（または太字で14pt未満）
大きなテキスト — 18pt以上のテキスト（または太字で14pt以上）

出力スキーマ

この機能は、詳細な検証レポートを返します。

{
  "compliant": true,
  "wcag_level": "AA",
  "pairs": [
    {
      "pair": "primary-text",
      "color1": "#678233",
      "color2": "#ffffff",
      "contrast_ratio": 5.2,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": false,
      "status": "pass"
    },
    {
      "pair": "background-text",
      "color1": "#f5f5f5",
      "color2": "#333333",
      "contrast_ratio": 12.1,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": true,
      "status": "pass"
    }
  ],
  "summary": {
    "total_pairs": 2,
    "passing": 2,
    "failing": 0,
    "recommendations": []
  }
}

出力フィールド

フィールド	型	説明
`compliant`	boolean	パレット全体が指定されたWCAGレベルを満たしているかどうか
`wcag_level`	string	チェックされたWCAGレベル
`pairs`	array	各色のペアの詳細な結果
`contrast_ratio`	number	計算されたコントラスト比（1:1から21:1）
`status`	string	各ペアの「pass」（合格）または「fail」（不合格）
`recommendations`	array	不合格なペアを改善するための提案

使用例

プロンプト:

私の配色パレットがWCAG AAの基準を満たしているか確認してください。プライマリカラーは#678233、テキストカラーは#ffffff、背景は#f5f5f5です。

結果: この機能はすべての色の組み合わせを検証し、以下の結果を返します。

✅ プライマリ + テキスト: 5.2:1の比率（WCAG AAを合格）
✅ 背景 + テキスト: 12.1:1の比率（WCAG AAAを合格）
総合：WCAG AAに準拠しています

テーマビルダーとの連携

テーマビルダーの「デザイン方向性」選択を使用する場合、パレットのコントラスト検証機能は以下の処理を行います。

選択されたカラーパレットを分析します。
すべてのテキストと背景の組み合わせをチェックします。
選択されたWCAGレベルに基づいて検証を行います。
準拠していないペアについて推奨事項を提供します。
アクセシブルでない配色が適用されるのを防ぎます。

ベストプラクティス

AAレベルから始める — WCAG AAはほとんどのウェブサイトの標準です。
適用前にテストする — デザインを確定する前にパレットを検証しましょう。
すべての組み合わせをチェックする — テキスト、リンク、UI要素すべてが基準を満たしているか確認してください。
ユーザーの好みを考慮する — 色覚過敏を持つユーザーがいる場合があります。
コントラストチェッカーを使用する — この機能をブラウザツールと組み合わせて検証を行うと効果的です。

不合格なペアと推奨事項

色のペアが検証に失敗した場合、この機能は推奨事項を提供します。

{
  "pair": "primary-text",
  "status": "fail",
  "contrast_ratio": 2.8,
  "wcag_aa": false,
  "recommendations": [
    "テキスト色を#ffffffに明るくすると（比率は5.2:1になります）",
    "背景色を#556b2fに暗くすると（比率は4.8:1になります）",
    "代わりに#4a6b1fのような別のプライマリカラーを使用する（比率は6.1:1になります）"
  ]
}

Generate Logo SVG — 検証済みのカラーパレットを使用してロゴを作成
Create Menu — アクセシブルな色でナビゲーションを構築

概要​

入力形式​

パラメータ​

チェックされるWCAGレベル​

出力スキーマ​

出力フィールド​

使用例​

テーマビルダーとの連携​

ベストプラクティス​

不合格なペアと推奨事項​

関連機能​

概要