カラーコントラストとは
文字や意味のある視覚要素を背景から見分けやすくするための、明るさの差です。このツールは指定された不透明な単色2色だけを計算します。
WCAGのコントラスト比とは
WCAG 2.2では、sRGBから求めた相対輝度を使い、明るい色をL1、暗い色をL2として(L1 + 0.05) / (L2 + 0.05)で比率を求めます。結果は同色の1:1から黒と白の21:1までです。
AAとAAAの違い
AAは広く採用される中間の適合レベル、AAAはより高いコントラストを求めるレベルです。ただし、このツールの合格表示は2色間のコントラスト基準だけを示し、サイト全体のWCAG適合を保証しません。
通常テキストの4.5:1とは
WCAG 2.2のSC 1.4.3では、通常テキストと文字画像にAAで4.5:1以上が求められます。表示値ではなく、丸め前の比率で判定します。
大きなテキストの3:1とは
AAでは、大きなテキストは3:1以上です。目安は18pt以上、または14pt以上の太字で、W3C解説のCSS px換算ではそれぞれ約24px、約18.5pxです。単に18pxなら大きなテキストという意味ではありません。
7:1のAAA基準とは
SC 1.4.6のAAAでは、通常テキストが7:1以上、大きなテキストが4.5:1以上です。AAとAAAの両方を同時に表示します。
UI部品の3:1とは
SC 1.4.11では、UI部品や状態を識別するために必要な視覚情報、内容理解に必要なグラフィック部分などが隣接色に対して3:1以上となることを求めます。すべての画像や装飾が対象という意味ではありません。
コントラスト比の計算方法
各8bit成分を255で割り、0.04045以下なら12.92で割り、それ以外は((C + 0.055) / 1.055) ^ 2.4で線形化します。相対輝度は0.2126R + 0.7152G + 0.0722Bです。
透明色・背景画像・グラデーションの注意
初版は不透明な単色同士だけに対応します。透明度を含む色は、実際に合成された不透明色で確認してください。背景画像・グラデーション上の文字は、文字の背後にある実際の色との組み合わせを確認する必要があります。
この判定は色のコントラスト比のみを確認するものです。 キーボード操作、代替テキスト、見出し構造など、Webアクセシビリティのほかの要件は別途確認してください。
よくある質問
WCAGのコントラスト比を確認できますか？
はい。WCAG 2.2の相対輝度式で2色間の比率を計算します。
AAの通常文字は何対何ですか？
4.5:1以上です。丸め前の計算値で判定します。
大きな文字は何対何ですか？
AAでは3:1以上です。通常文字とは基準が異なります。
AAAの基準は何ですか？
通常テキストは7:1以上、大きなテキストは4.5:1以上です。
ボタンやアイコンの基準は何ですか？
SC 1.4.11の対象となるUI部品や意味のあるグラフィックでは、隣接色との3:1以上が基準です。
18ptとは何pxですか？
W3C解説では18ptはおおよそ24 CSS pxです。
14ptの太字とは何pxですか？
W3C解説では14ptはおおよそ18.5 CSS pxです。太字であることも条件です。
透明色も確認できますか？
初版では確認できません。不透明な単色へ合成した最終色を入力してください。
背景画像にも使えますか？
文字の背後にある実際の色を選んで確認する必要があります。場所ごとに背景色が変わる場合は、それぞれ評価してください。
AAに合格すればサイト全体がWCAG準拠ですか？
いいえ。このツールは指定した2色のコントラスト比だけを確認し、サイト全体の適合を保証しません。
カラーコードは保存されますか？
保存・外部送信しません。計算とプレビューはブラウザ内だけで完結します。