コントラスト比 チェッカー｜WCAG AA・AAAを無料判定
文字色と背景色を入力すると、コントラスト比とWCAG 2.2の合否をリアルタイムで確認できます。デザイン案をその場で比較でき、色データはブラウザ内だけで計算します。
2色を入力してチェック
例を試す
判定結果
見出しテキストのプレビュー
本文テキストが背景色の上でどのように見えるかを確認できます。数値と実際の読みやすさを一緒に確認してください。
通常テキストのAA基準を満たしています。
コントラスト比 チェッカーの使い方
- 「文字色」にテキストやアイコンのHEXカラーコードを入力します。
- 「背景色」に、その文字や部品のすぐ後ろにある色を入力します。
- 結果の比率とAA・AAAの各判定を確認します。入力中も自動更新されます。
- 不合格なら明るい色をさらに明るくするか、暗い色をさらに暗くして再確認します。
- 必要なら色を入れ替え、プレビューとコピーしたCSSを実際のデザインで試します。
WCAG 2.2のコントラスト比基準
コントラスト比は、明るい色と暗い色の相対輝度から求める1:1〜21:1の値です。差が大きいほど数値は高くなります。通常サイズの文字はAAで4.5:1以上、AAAで7:1以上が基準です。大きな文字はAAで3:1以上、AAAで4.5:1以上、操作に必要なUIコンポーネントやグラフィカルオブジェクトは隣接色と3:1以上が目安になります。
| 対象 | AA | AAA | 確認例 |
|---|---|---|---|
| 通常テキスト | 4.5:1以上 | 7:1以上 | 本文、注釈、フォームラベル |
| 大きなテキスト | 3:1以上 | 4.5:1以上 | 24px以上、または約18.66px以上の太字 |
| 非テキスト・UI部品 | 3:1以上 | 規定なし | 入力枠、アイコン、グラフの必要な部分 |
基準の詳細は、WCAG 2.2 日本語訳とデジタル庁デザインシステムのカラーアクセシビリティで確認できます。
入力と出力の例
#1F2937 の文字を #FFFFFF の背景に置くと、コントラスト比は約14.68:1になり、通常テキストのAAA基準まで満たします。一方、#6B7280 と #F3F4F6 は約4.39:1で、AA通常テキストの4.5:1にわずかに届きません。境界付近では、丸めて表示された数字だけで判断せず、ツール内部の未丸め値による合否を確認してください。
パステル背景は見た目が柔らかい反面、白文字との明度差が不足しやすい組み合わせです。まずこのカラーコントラストチェッカーで数値を確認し、本文には濃いグレーや濃紺を試すと調整しやすくなります。
計算方法・精度・限界
このツールはsRGB値を線形化して相対輝度を求め、明るい側をL1、暗い側をL2として (L1 + 0.05) / (L2 + 0.05) を計算します。透明色、画像やグラデーションの一部分、背景画像の上にある文字は、単純な2色だけでは正しく評価できません。実際に隣接する表示色を取得して確認してください。
合格はページ全体のアクセシビリティ適合を保証するものではありません。フォーカス表示、色だけに依存しない情報伝達、文字サイズ、操作性なども別途確認が必要です。ブランドカラーを変えられない場合は、背景、文字の太さ、枠線、配置する面の色を調整し、実機でも読みやすさを確認してください。