カラーパレット＋WCAGチェッカー
コントラスト比のチェック、AA／AAA適合確認、パレットバリエーションの生成、CSSやTailwind v4カラートークンのエクスポートをローカルで行えます。
前景色
背景色
プライマリカラーの変換
#1A73E8rgb(26, 115, 232)hsl(214 82% 51%)oklch(0.574 0.195 257.9)生成されたパレット
CSS変数
:root {
}Tailwind v4 @theme
@theme {
}カラーパレット＋WCAGチェッカーをテストしました — 次は 色覚検査 を試そう →
WCAGカラーコントラストチェッカーとは？
「カラーパレット + WCAG チェッカー」は、2 つの sRGB 色間の相対輝度コントラスト比を計算し、Web Content Accessibility Guidelines (WCAG) に対して評価します。公式は固定されています。各チャネルを sRGB からリニアライトに線形化します（L = R*0.2126 + G*0.7152 + B*0.0722、ガンマデコード後）。その後、(L_lighter + 0.05) / (L_darker + 0.05) を計算します。結果はコントラスト比で、1.0（同一色）～ 21.0（純黒対純白）の範囲です。WCAG 2.1 は 3 つのしきい値を設定しています。通常の本文 (AA) は 4.5:1、18pt 以上または 14pt 太字の大きいテキスト (AA) は 3:1、より厳密な AAA グレードは 7:1 / 4.5:1 です。WCAG 2.2 (2023 年 10 月発行) は、2.1 では存在しなかった UI コンポーネントとフォーカス可視アウトラインに 3:1 の要件を追加しました。グレーディングを超えて、このツールは単一のシードカラーから OKLCH 空間（HSL とは異なり知覚的に均一）で協調パレット（補色、類似色、シェード、ティント）を生成し、結果を CSS カスタムプロパティまたは Tailwind v4 @theme トークンとしてエクスポートします。設計ハンドオフ用に PNG スウォッチシートが付属しています。
WCAGカラーチェッカーの使い方
前景色と背景色を HEX として入力します（#1A73E8 を #FFFFFF の上に）— コントラスト比と、AA 通常 (4.5:1)、AAA 通常 (7:1)、AA 大 (3:1)、AA UI (3:1、WCAG 2.2) の合格/不合格バッジが即座に表示されます。色のペアが失敗した場合、提案ツールは OKLCH 輝度軸に沿って前景色をより暗くまたはより明るく調整し、色相と彩度を保持するため、ブランドカラー ID はそのまま保たれます。「推奨色を使用」をクリックして適用します。テストの典型的な失敗：純黄 #ffff00 の上に白いテキスト（#ffffff 前景）— 比率は 1.07:1 で、3:1 を大きく下回り、見た目では「高コントラスト」に見えるにもかかわらず。黄色上の黒は 19.55:1 で、深く合格します。チェッカーの下、パレットパネルは入力から生成された補色と類似色のバリアントを表示します。CSS 変数をコピー、Tailwind 4 テーマトークンをコピー、または PNG スウォッチをダウンロードします。
WCAGカラーコントラスト準拠が重要な理由
WCAG コントラスト準拠は、米国での ADA、EU で販売される製品およびサービスに対して 2025 年 6 月から有効な欧州アクセシビリティ法 (EAA)、および公共部門の調達に対する EN 301 549 に基づいて強制可能な法律です。EAA に基づく罰金は、司法管轄区に応じて €30 000 ～ €500 000 に達します。法的リスクを超えて、4.5:1 のしきい値は、視力 20/40 の人が本文を快適に読む必要があるコントラストに概算されます。これは辺境の障害ではなく、自然な水晶体黄変後の 40 歳以上のほとんどの読者です。最初からコンプライアンス対応のトークンを設計することにより、すべてのコンポーネントを通じてブランドカラーホットフィックスを実行する改造コストが回避されます。一般的な落とし穴は、目で対比を判定することです。ブランドピンクと薄緑松石が設計者には「読みやすく見える」（視力 20/20、スタジオ照明下）ですが、蛍光灯オフィス照明下では 2× 失敗します。比率を早期に実行します — トークン定義段階で、コンポーネント構築時ではなく — 意見ではなく算術で質問を解決します。
よくある質問
合格の提案はどのように機能しますか？
TeaFunは選択した前景色の色相と彩度をできる限り維持し、明度を調整してペアが少なくとも本文テキストのWCAG AAに到達するようにします。
Tailwindのエクスポートは新しいv4形式を使用しますか？
はい。エクスポートは`@theme`トークンと`oklch()`値を使用しているため、Tailwind v4プロジェクトに直接貼り付けられます。
クライアント案件に使えますか？
はい。チェッカーはブラウザのみで動作するため、ブランドカラーのテスト、トークンのエクスポート、PNGスウォッチの生成を第三者サービスに送信せずに行えます。
このツールを大きな作業フローの中で使う
これらのコレクションは、同じ作業でよく続けて使うツールやガイドをまとめています。
同じタグを見る
同じワークフロー、形式、用途を持つ別のツールへすぐ移動できます。