前景色
背景色
プレビュー
通常テキスト — The quick brown fox jumps over the lazy dog.
大きなテキスト（24px 通常）
大きなテキスト（18.67px 太字）
UI コンポーネント
—
コントラスト比
| レベル | 通常テキスト | 大きなテキスト | UIコンポーネント |
|---|---|---|---|
| AA | — | — | — |
| AAA | — | — | 該当なし |
WCAG 2.1 — AAでは、通常テキストに≥4.5:1、大きなテキストとUIコンポーネントに≥3:1が必要です。
AAAでは、通常テキストに≥7:1、大きなテキストに≥4.5:1が必要です。
大きなテキスト = 18pt（24px）のレギュラー、または14ptの太字（18.67px）。
コントラストチェッカーとは？
WCAG AA および AAA アクセシビリティ準拠のための色コントラスト比を確認します。通常テキスト、大きなテキスト、UI コンポーネントの前景色と背景色の組み合わせを即座に検証できます。
コントラストチェッカーの使い方
- 前景のテキスト色を入力または選択してください。
- テキスト背後の背景色を入力または選択してください。
- コントラスト比とWCAGの合格/不合格結果をすぐに確認できます。
- 組み合わせがアクセシビリティ目標を満たすまで、どちらかの色を調整してください。
色のコントラストを理解する ▾
例
入力
白い背景に中灰色のテキストをチェックする場合：
出力
結果: 大きなテキストは AA を満たします（≥ 3:1）が、通常テキストは AA を満たしません（4.5:1 が必要）。すべての AA レベルを満たすには、グレーを少し濃くしてください。
一般的な使用例
- UI 更新をリリースする前に、ボタンとリンクのコントラストを確認してください
- ブランドシステムとスタイルガイドのテキスト色を検証してください
- マーケティング用グラフィックの可読性を確認してください
- 明るい背景に暗い色、暗い背景に明るい色の組み合わせをすばやくテストできます
よくある質問
AA と AAA のコントラストレベルの違いは何ですか？
WCAG AA では、通常テキストに 4.5:1、大きなテキストに 3:1 の比率が必要です — これが標準的な法的要件です。AAA では、通常テキストに 7:1、大きなテキストに 4.5:1 が必要で、重度の低視力ユーザーに対するアクセシビリティが強化されます。
このチェックでは、非テキストのコントラスト（アイコン、境界線）も確認しますか？
はい — WCAG 1.4.11（非テキストのコントラスト）では、UI コンポーネントとグラフィック要素に 3:1 が必要です。表の AA UI コンポーネントの結果がこの要件をカバーしています。
自分の色は AA を満たしていますが AAA を満たしていません — 修正する必要がありますか？
すべてのコンテンツに AAA 準拠は必須ではありません。ほとんどの法域では、WCAG AA が標準的な法的要件です。可能な場合は AAA を目指してください。ただし、法的準拠には AA で十分です。
大きなテキストとは何を指しますか？
WCAG では、大きなテキストを、通常ウェイトで 18pt（24px）以上、太字で 14pt（約 18.67px）以上と定義しています。大きなテキストは本質的に読みやすいため、コントラスト要件が低くなります（AA では 3:1）。