WCAGコントラストチェッカー
テキストと背景色のコントラスト比をWCAG 2.1基準でリアルタイム判定。AA/AAAレベルの適合チェックと改善色の提案に対応。Webアクセシビリティ向上を目指すデザイナー・開発者向けの無料ツールです。
最終更新:
使い方
使い方を開く使い方を閉じる
- 1
色を入力
前景色（テキスト色）と背景色をHEXコードまたはカラーピッカーで入力します。
- 2
コントラスト比を確認
自動的にコントラスト比が計算され、WCAG AA/AAAの適合状況が表示されます。
- 3
改善提案を確認
不適合の場合、AA基準を満たすための改善色が提案されます。「適用する」で反映できます。
コントラスト比: 12.63:1,通常テキスト AA: 適合,大きいテキスト AA: 適合
プレビュー
通常サイズのテキストはこのように表示されます。フォントサイズ16px以下が対象です。
大きいテキスト（18pt以上/14pt太字以上）
WCAG適合判定
| AA | AAA | |
|---|---|---|
| 通常テキスト最小 4.5:1 | 適合 | 適合 |
| 大きいテキスト最小 3:1 | 適合 | 適合 |
改善提案
現在の色の組み合わせはAA基準を満たしています。
WCAGコントラストチェッカーについて
WCAG（Web Content Accessibility Guidelines）に基づいてテキストと背景のコントラスト比を計算し、アクセシビリティ基準への適合を判定するツールです。コントラスト比が不足すると、弱視や色覚異常のユーザーがテキストを読めなくなる深刻な問題につながります。特にグレー系のテキストや淡いブランドカラーは、見た目では十分に見えても数値が基準を下回るケースが多く、ツールによる客観的な確認が欠かせません。AA基準（通常テキスト4.5:1）を満たすだけでなく、社内ガイドラインや官公庁向けシステムではAAA基準（7:1）が求められる場合もあり、両方の適合状況を一度に確認できます。不適合の場合は明度調整による改善色を自動提案するため、デザイナーが試行錯誤する時間を大幅に削減できます。
主な機能
- 前景色・背景色のコントラスト比をリアルタイム計算
- WCAG AA/AAA適合判定（通常テキスト・大きいテキスト）
- 不適合時に明度調整による改善色を自動提案
- テキストプレビューで実際の見え方を確認
活用シーン
- Webサイトやアプリのアクセシビリティ対応
- デザインシステムのカラーパレット検証
- WCAG準拠のコントラスト比確認
- 官公庁・医療・教育機関向けシステムのAA/AAA対応
- コードレビュー前のカラー変更の事前確認
- ブランドカラーを変えずに合格できる代替色の探索
よくある質問
WCAG AA と AAA の違いは何ですか？
AAは最低限必要な基準（通常テキスト4.5:1、大きいテキスト3:1）、AAAはより高い基準（通常テキスト7:1、大きいテキスト4.5:1）です。一般的にはAA準拠が推奨されます。
大きいテキストの基準は何ですか？
18pt（24px）以上の通常テキスト、または14pt（約18.66px）以上の太字テキストが「大きいテキスト」に該当し、より緩い基準が適用されます。
コントラスト比の計算方法は？
WCAG 2.0で定義された相対輝度の計算式を使用します。(L1 + 0.05) / (L2 + 0.05) で、L1は明るい色、L2は暗い色の相対輝度です。
改善提案の色はどのように決まりますか？
入力した前景色の明度（Lightness）を段階的に調整し、AA基準（4.5:1）を満たす最もオリジナルに近い色を提案します。ブランドカラーのトーンをできるだけ維持しながら合格できる色を探すことができます。
プレースホルダーテキストにもコントラスト基準が適用されますか？
WCAGの達成基準1.4.3はプレースホルダーテキストにも適用されます。入力フォームのプレースホルダー色も同じコントラスト比基準を満たす必要があります。
ダークモードのカラーはどう確認すればよいですか？
ダークモード用のテキスト色と背景色をそれぞれ入力して確認します。ライトモードとダークモードで異なるコントラスト問題が発生しやすいため、両方のパターンを個別にチェックすることを推奨します。