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

> WCAG AA／AAAコントラストチェック、合格色の提案、CSS変数、Tailwind v4エクスポート、PNGスウォッチを備えた無料カラーパレットジェネレーター。

- **Category:** 開発者
- **URL:** https://www.teafun.cyou/tools/color-palette-wcag/
- **Privacy:** Runs entirely in your browser — no uploads, no account, no tracking.
- **Also known as:** wcag contrast, color contrast, palette checker, color picker, colour picker, color palette, contrast checker, accessibility contrast
- **Related tools:** [色覚検査](https://www.teafun.cyou/tools/colorblind/), [モニターのリフレッシュレート](https://www.teafun.cyou/tools/monitor/), [フロアプランツール](https://www.teafun.cyou/tools/floor-plan/)
- **Tags:** Color, Design, Display

## About

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

## 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× 失敗します。比率を早期に実行します — トークン定義段階で、コンポーネント構築時ではなく — 意見ではなく算術で質問を解決します。

_SEO title: カラーパレット＋WCAGチェッカー – 無料のアクセシブルなパレットツール | TeaFun_

## FAQ

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

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

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

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

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

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