カラーパレット＋WCAGチェッカー

コントラスト比のチェック、AA／AAA適合確認、パレットバリエーションの生成、CSSやTailwind v4カラートークンのエクスポートをローカルで行えます。

すべての色計算はブラウザ内でローカルに実行されます。アップロードも、アカウント登録も、デザインデータの送信もありません。

前景色

背景色

コントラスト比 4.51:1

AA本文テキスト合格

AAA本文テキスト不合格

AA大きなテキスト合格

色覚安全性をテスト

プライマリカラーの変換

HEX #1A73E8

RGB rgb(26, 115, 232)

HSL hsl(214 82% 51%)

OKLCH oklch(0.574 0.195 257.9)

生成されたパレット

#1A73E8

プライマリ

#E88F1A

補色

#1ADAE8

類似色（左）

#281AE8

類似色（右）

#0F4A97

シェード

#6DA6F0

ティント

CSS変数

:root {
  --color-primary: #1A73E8;
  --color-background: #FFFFFF;
  --color-accessible: #1A73E8;
  --color-complementary: #E88F1A;
  --color-analogous-left: #1ADAE8;
  --color-analogous-right: #281AE8;
  --color-shade: #0F4A97;
  --color-tint: #6DA6F0;
}

Tailwind v4 @theme

@theme {
  --color-primary: oklch(0.574 0.195 257.9);
  --color-background: oklch(1.000 0.000 89.9);
  --color-accessible: oklch(0.574 0.195 257.9);
  --color-complementary: oklch(0.727 0.156 65.4);
  --color-analogous-left: oklch(0.811 0.135 203.2);
  --color-analogous-right: oklch(0.443 0.276 269.2);
  --color-shade: oklch(0.421 0.139 257.6);
  --color-tint: oklch(0.717 0.124 255.4);
}

WCAGカラーコントラストチェッカーとは？

カラーパレット＋WCAGチェッカーは、前景と背景の色の組み合わせをWeb Content Accessibility Guidelines（WCAG 2.1）のコントラスト比要件に照らして評価します。正確なコントラスト比、本文と大テキストの両サイズでのAAおよびAAA準拠の合格/不合格ステータスを報告し、不合格の場合は最も近い合格色を提案します。コントラストチェック以外にも、プライマリカラーから補色、類似色、シェード、ティントのバリエーションを含む完全なカラーパレットを生成し、CSSカスタムプロパティまたはTailwind v4の@themeトークン（oklch()値）としてエクスポートします。デザインハンドオフ用のPNGスウォッチシートもダウンロードできます。すべての計算はローカルで実行され、サードパーティサービスは関与しません。

WCAGカラーチェッカーの使い方

前景色と背景色をHEX値で入力します（例：#1A73E8 on #FFFFFF）。チェッカーが即座にコントラスト比と、WCAG AA本文テキスト（4.5:1）、AAA本文テキスト（7:1）、AA大テキスト（3:1）の合格/不合格バッジを表示します。不合格の場合、元の色相と彩度を維持した最も近い合格前景色が提案されます。「提案色を使用」をクリックして適用します。チェッカーの下で、生成されたパレットバリエーションを閲覧し、CSS変数またはTailwind v4テーマトークンをコピーし、デザイナーとの共有用にPNGスウォッチをダウンロードできます。

WCAGカラーコントラスト準拠が重要な理由

WCAG 2.1のコントラスト要件は任意のガイドラインではなく、ADA（米国）、EAA（EU）、EN 301 549（欧州）に基づく多くの法域で法的要件です。AAコントラスト比を満たさないということは、一部のユーザーが物理的にテキストを読めないことを意味し、アクセシビリティ訴訟のリスクにさらされます。最初からWCAG準拠を組み込んだデザインシステムは、コストのかかる後付け修正を避けられます。コンポーネントが構築される前のデザイントークン段階でコントラストをチェックすることは、出荷済み製品の監査よりもはるかに安価です。CSS変数やTailwind v4 @theme値として直接準拠トークンをエクスポートすることで、デザイン意図と本番コードの間のギャップを埋めます。

よくある質問

合格の提案はどのように機能しますか？

TeaFunは選択した前景色の色相と彩度をできる限り維持し、明度を調整してペアが少なくとも本文テキストのWCAG AAに到達するようにします。

Tailwindのエクスポートは新しいv4形式を使用しますか？

はい。エクスポートは`@theme`トークンと`oklch()`値を使用しているため、Tailwind v4プロジェクトに直接貼り付けられます。

クライアント案件に使えますか？

はい。チェッカーはブラウザのみで動作するため、ブランドカラーのテスト、トークンのエクスポート、PNGスウォッチの生成を第三者サービスに送信せずに行えます。

同じタグを見る

同じワークフロー、形式、用途を持つ別のツールへすぐ移動できます。

表示 4 色 3 デザイン 3