WCAGコントラストチェッカー & シミュレーター
高機能なWCAG 2.1 / 2.2カラーコントラストチェッカー兼アクセシビリティシミュレーター。テキストやUI、グラデーションをテストし、色覚異常をリアルタイムに再現します。
アクセシブルなデザインが重要な理由
これは、選択した色の組み合わせがどのように表示されるかを確認するためのサンプル段落です。良好なコントラストは、すべての人にとっての読みやすさを保証します。
Select a simulation mode below to apply filters to the live preview area.
If your current colors fail the WCAG checks, use the auto-fix suggestions below to find the closest compliant colors while keeping your original brand aesthetics.
Current colors pass WCAG AA. No fixes needed!
Suggested Compliant Variants:
Export your selected colors as CSS variables, Tailwind configuration, or design tokens.
通常テキスト
大きいテキスト
UIコンポーネント
よくある質問
コントラストチェッカーの使い方
-
前景色と背景色を設定する
カラーピッカーを使うか、HEX、RGB、HSLの値を入力して、文字色（前景色）と背景色を指定します。コントラスト比は即座に更新されます。 -
WCAGの結果を確認する
ツールはコントラスト比（例：5.2:1）を表示し、WCAG AA（通常テキストで4.5:1）とAAA（7:1）に合格しているかどうかを示します。大きいテキスト（18pt以上）はしきい値が低くなります。 -
色覚異常をシミュレートする
シミュレータータブに切り替えると、第二色覚異常、第一色覚異常、第三色覚異常などの色覚タイプを持つユーザーに、選択した配色がどのように見えるかをプレビューできます。 -
必要に応じて自動修正を使用する
色が不合格の場合は、Auto-Fixをクリックしてください。ツールは、できる限り色相と彩度を維持しながら、最も近いAAまたはAAA準拠の色合いを計算します。
コントラスト比の参照表
テキストのカテゴリー別のWCAG 2.1最低コントラスト要件：
| コンテンツの種類 | WCAG AA | WCAG AAA | 比率の例 |
|---|---|---|---|
| 通常テキスト（18pt未満） | 4.5:1 ✓ | 7:1 ✓ | #000 on #fff → 21:1 |
| 大きいテキスト（18pt太字以上） | 3:1 ✓ | 4.5:1 ✓ | #333 on #fff → 12.6:1 |
| UIコンポーネント・アイコン | 3:1 ✓ | 該当なし | #767676 on #fff → 4.5:1 |
| 装飾要素 | 要件なし | 要件なし | 背景画像は対象外 |
主な利用シーン
UI／ビジュアルデザインレビュー
開発への引き渡し前にデザインシステム内のすべてのテキストと背景の組み合わせをテストし、問題を早期に発見します。
アクセシビリティ監査
クライアント向けアクセシビリティレポートやWCAG 2.1 / 2.2準拠認証のために、コントラスト比を記録として提供します。
色覚異常テスト
男性の約8%が体験する色覚の見え方をシミュレートし、色覚異常のあるユーザーにも重要な情報が欠落しないことを確認します。
法令遵守
製品公開や入札前に、ADA（米国）、EAA（EU）、EN 301 549のデジタルアクセシビリティ要件を満たします。
開発者によるQA
デザインツールに切り替えることなく、コードレビュー中にCSSカラー変数のコントラストを素早く確認できます。
仕組み
すべての計算は、WCAG 2.1の輝度計算式を使ってブラウザ内で実行されます — サーバーへの通信は不要です。
WCAGでは、輝度を線形化されたRGBチャンネルの加重和として定義しています：L = 0.2126R + 0.7152G + 0.0722B。コントラスト比は (L1 + 0.05) / (L2 + 0.05) で計算され、L1は明るい方の色です。
シミュレーターは、標準的なダルトン化行列（Machadoら, 2009年）を適用し、各色覚異常タイプで知覚されるsRGB値を変換します。
Auto-FixはHSL空間の明度チャンネルを走査し、色相と彩度を変えずに目標比率（AAまたはAAA）に達する最小限の調整幅を見つけ出します。
こんな方におすすめのツールです
UI/UXデザイナー
デザイン引き渡し前に配色をテストし、準拠したデザインシステムを維持します。
アクセシビリティ専門家
WCAG監査、クライアントレポート、準拠認証のためのコントラスト証跡を作成します。
フロントエンド開発者
ブラウザを離れることなく、開発中やコードレビュー中にCSSカラー変数を素早く確認できます。
プロダクトマネージャー
製品公開や入札応募の前に、法的アクセシビリティ準拠（ADA、EAA）を確保します。
コンテンツ制作者
画像や色付き背景に重ねたテキストが、すべてのユーザーにとって読みやすいことを確認します。
より良いアクセシブルデザインのためのヒント
- 常にWCAG AA（4.5:1）を基準の目標とし、本文テキストではAAA（7:1）を目指しましょう — 特に医療、行政、金融系サイトでは重要です。
- 第二色覚異常だけでなく、8タイプすべての色覚異常シミュレーションを実行しましょう。タイプごとに影響を受ける色の組み合わせが異なります。
- 情報を色だけで伝えるのは避け、常にアイコン、パターン、テキストラベルと色を組み合わせましょう。
- コントラストの調整にはHSLを使いましょう：色相を変えるのではなく、前景と背景の明度差を大きくします。
- 実機のモバイル端末を強い日差しの下でテストしましょう — 実環境の条件は、モニターでは見えないコントラストの問題を明らかにします。
アクセシビリティコントラストが重要な理由
- 男性の約12人に1人、女性の約200人に1人が何らかの色覚異常を持っています — コントラストが不十分だと、こうしたユーザーを直接排除してしまいます。
- ADA（米国）および欧州アクセシビリティ法（EU、2025年）は、公共向けデジタル製品にWCAG 2.1 AA準拠を義務付けています。
- コントラスト不足は、世界のアクセシビリティ監査で発見される最も一般的なWCAG違反トップ3の一つです（WebAIM Millionレポート）。
- アクセシブルな配色設計は、強い日差しの下、低品質なディスプレイ、加齢に伴う視力低下など、すべてのユーザーの読みやすさを向上させます。
パフォーマンスとプライバシー
すべてのコントラスト計算、色覚異常シミュレーション、自動修正は、JavaScriptを使ってブラウザ内で完全に実行されます。色の値、スクリーンショット、利用データがサーバーに送信されることは一切ありません。1回の計算は5ミリ秒未満で完了し、初回読み込み後はオフラインでも動作します。
豆知識：WCAGと色覚
WCAG 2.1と2.2の違い
WCAG 2.2（2023年）では新しい達成基準（2.4.11 フォーカスの見た目、3.2.6 一貫したヘルプ）が追加されましたが、コントラストに関する基本要件（1.4.3、1.4.6）は2.1と同一のまま維持されています。
輝度と明るさの違い
WCAGは、知覚に基づいて重み付けされた指標である「相対輝度」を使用します。明るい黄色（#ffff00）は非常に高い輝度（0.93）を持ち、暗いネイビー（#003366）は低い輝度（0.02）を持つため、比率は9.8:1になります。
色覚異常の種類
第二色覚異常（赤緑、最も一般的）は男性の約6%に見られます。第一色覚異常（赤の識別が困難）は約2%、第三色覚異常（青黄）は約0.01%、全色盲は約0.003%です。
APCA — 将来の標準規格
Advanced Perceptual Contrast Algorithm（APCA）は、WCAG 3.0向けに提案されています。フォントサイズ、太さ、極性に応じて異なる方法でコントラストを評価する規格で、今後の動向が注目されます。
トラブルシューティング
豆知識
WCAGコントラスト比の計算式は、WCAG 1.0（1999年）で単純な明度差のチェックとして初めて導入されました。その後、WCAG 2.0（2008年）で大幅に改訂され、CIE 1931色空間と人間の視覚系が光を処理する仕組みに基づく「相対輝度」モデルが採用されました。現在の4.5:1というしきい値は、支援技術なしで視力20/80相当の弱視ユーザーが経験する約3:1のコントラスト低下をおおむね相殺できるように選ばれています。
すべての人が使える製品を作りましょう
アクセシブルなカラーコントラストは、単なる準拠チェック項目ではなく、すべてのユーザーに恩恵をもたらす基本的なデザイン品質です。この無料ツールは、リアルタイムのWCAGチェック、色覚異常シミュレーション、そしてインテリジェントな自動修正を一つにまとめており、データがブラウザから外に出ることはありません。今すぐパレットをテストし、不合格の箇所を修正して、誰にとっても使いやすい製品をリリースしましょう。