Toolantern
ホーム › コントラストチェッカー
更新日:2026年10月9日

コントラストチェッカー

テキスト色と背景色を入力すると、WCAGコントラスト比と、通常テキスト・大きなテキストのAA/AAA合否がすぐに表示されます。ライブプレビュー付きです。

大きなテキストのプレビュー

いろはにほへと ちりぬるを わかよたれそ つねならむ

このツールでできること

チェッカーは、テキスト色と背景色のWCAGコントラスト比を計算し、WCAG 2.xの4つの閾値(通常テキストと大きなテキストそれぞれのAA・AAAレベル)で合否を判定します。ライブプレビューでは、両方のサイズの実際のテキストとして色を確認できます。

輝度の公式

まず各色の相対輝度を計算します。各RGBチャンネルを線形化し(0.03928以下の値は12.92で割り、それより大きい値は((v+0.055)÷1.055)の2.4乗を使います)、L=0.2126×R+0.7152×G+0.0722×Bとして合成します。係数は人間の目が緑の光に最も敏感であることを反映しています。

コントラスト比は(L1+0.05)÷(L2+0.05)で、L1は明るい方の色の輝度です。1:1(同一色)から21:1(白地に黒)までの範囲です。

計算例

青背景#3B82F6に対する白テキスト#FFFFFFのコントラスト比は約3.7:1です。大きなテキストのAA(3:1必要)には合格しますが、通常テキストのAA(4.5:1必要)には不合格です。見出しには十分ですが、本文には不向きです。

4つの閾値

注意点

この比率は輝度コントラストのみを測定します。フォントのレンダリング、細いストローク、画像上の透明度、輝度以外の色覚の違いは考慮されません。

あくまで目安です。表示の公表価格に基づいて計算しており、実際の請求額とは異なる場合があります。 利用規約

よくある質問

良いコントラスト比とは?

通常テキストは少なくとも4.5:1(WCAG AA)を目指しましょう。これは多くのアクセシビリティ法の基準です。7:1でより厳しいAAAレベルになります。大きな見出しは3:1でAAに合格します。

WCAGで大きなテキストとは?

18pt(24px)以上、または太字で14pt(約19px)以上のテキストです。それより小さいものは通常テキストの閾値が適用されます。

AAとAAAの違いは?

AAはほとんどの法規制が求める標準的な適合レベルです。AAAはより厳しく、可能な限り推奨されます。特に全員が読む本文テキストでは重要です。

ダークモードにも使えますか?

はい。明るいテキスト色をテキスト色に、暗い面を背景色に入力してください。計算は方向に依存しないため、2色を入れ替えても比率は同じです。

ブランドカラーが白背景で不合格になるのはなぜですか?

多くのブランドカラーは白背景で4.5:1に届くには明るすぎます。大きな見出しやグラフィックのアクセント(3:1で十分)に使い、本文には暗めのバリエーションを選びましょう。

ほかの無料ツール