Skip to main content

アクセシブルカラーパレットジェネレーター WCAGのコントラスト要件を満たすカラーパレットを生成します。

アクセシブルパレットジェネレーター illustration
🎨

アクセシブルパレットジェネレーター

WCAGのコントラスト要件を満たすカラーパレットを生成します。

1

背景色を設定

背景色を入力してください。

2

WCAG レベルを選択

AA (4.5:1) または AAA (7:1) のコンプライアンス ターゲットを選択します。

3

閲覧 & コピー

アクセシブルな色とそのコントラスト比率を表示し、コピーできます。

Loading tool...

What Is アクセシブルパレットジェネレーター?

アクセシブルなパレットジェネレーターは、選択した背景色に対してWCAGのコントラスト要件を満たすカラーを見つけることができます。個々のカラーを手動でテストする代わりに、このツールはカラースペクトルをスキャンし、対象のコントラスト比率(AAでは4.5:1、AAAでは7:1)を達成したカラーのみを提示します。各カラーは、背景に対してライブテキストプレビューとその正確なコントラスト比率で表示され、アクセシブルでデザインの美しさにも合ったカラーを見つけることが容易になります。これにより、アクセシブルな設計において最も一般的な課題の一つである、視覚的に魅力的でありながらアクセシビリティ標準に準拠したカラーを探すという問題が解決されます。ジェネレーターは色相と明度のレベルをスイープし、アクセシブルなオプションの多様な範囲を提供します。

Why Use アクセシブルパレットジェネレーター?

  • WCAG のコントラスト要件を満たす色を見つける自動機能
  • AA (4.5:1) と AAA (7:1) のコンプライアンス レベルを選択可能
  • 背景色にテキストのプレビューが表示される
  • 各提案された色の正確なコントラスト比率を表示
  • 手動でのコントラスト チェックに要する時間を大幅に削減

Common Use Cases

アクセシブル Web デザイン

WCAG 要件を満たす色のパレットを作成できます。

デザイン システム作成

システム内の各背景色に対してアクセシブルなテキスト カラーを生成します。

クライアント プロジェクト

クライアントにアクセシビリティが事前に検証された色のオプションを提示できます。

是正

既存の色がコントラスト チェックに失敗した場合、アクセシブルな代替案を見つけることができます。

Technical Guide

ジェネレーターは、色相角(0-360°で30°間隔)と明度レベル(10-90%で10%間隔)を70%の固定彩度で繰り返し処理します。生成された各カラーについて、指定された背景に対するWCAGコントラスト比率を相対的な輝度式によって計算します。最小比率しきい値を満たすカラーは収集され、コントラスト比率(最大から先に)で並べ替えられ、ユーザーに提示されます。アルゴリズムはフルカラースペクトルをカバーし、多様なカラーオプションを提供します。高いコントラスト比率は読みやすさの向上を示しています。最小しきい値はWCAG 2.1の成功基準1.4.3(AA)および1.4.6(AAA)に基づいています。

Tips & Best Practices

  • 1
    背景色から始めてアクセシブルなテキスト カラーを見つけます - 逆はしないでください
  • 2
    ダークな背景の場合は明るい色、アクセシブルな色が多くなります。一方、ライトな背景では暗い色です。
  • 3
    コントラスト比率が高いほど良いです - 可能であれば最小限度を超えることを目指します
  • 4
    アクセシブルな色もカラー ブラインド シミュレーションでテストすることを忘れないでください
  • 5
    一貫性のために、アクセシブル パレットは小さく保ちます (4-6 色)

Related Tools

Frequently Asked Questions

Q 色がアクセシブルになる条件とは?
背景色とのコントラストが十分にある場合、その色はアクセシブルです。WCAG AA では通常のテキストに対して ≥4.5:1、AAA では ≥7:1 が必要です。
Q 結果から一部の色相が欠けているのはなぜですか?
特定の背景色に対して、一部の色相/明度の組み合わせは必要なコントラストを達成できません。たとえば、白い背景に黄色のテキストはほぼすべての明度で AA に失敗します。
Q 常に AAA コンプライアンスを目指すべきですか?
AAA (7:1) は理想的ですが、必ずしも法的に必要ではありません。大多数のアクセシビリティに関する法律では AA (4.5:1) のコンプライアンスが必要です。可能であれば AAA を目指しますが、AA が標準ベンチマークであることを覚えておいてください。

About This Tool

アクセシブルパレットジェネレーター is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.