コントラストチェッカー
テキストの色と背景の色を選ぶと、正確なWCAGコントラスト比と、AA/AAAに合格するかどうかが表示されます。
大きいテキストのプレビュー(18pt以上)
通常テキストのプレビュー、本文でよく使われるサイズです。
バッジの意味
WCAG 2.1では、AA基準を満たすために通常テキストで4.5:1、大きいテキスト(18pt以上、または太字14pt以上)で3:1のコントラスト比が必要です。AAAはより厳しく、通常テキストで7:1、大きいテキストで4.5:1です。
仕組み
比率はWCAGの実際の相対輝度式で計算されます。近似ではありません。各チャンネルは255で割られ、次にsRGBのガンマカーブを取り除くために線形変換され、線形チャンネルは赤0.2126、緑0.7152、青0.0722で重み付けされます。これは各色が知覚される明るさにどれだけ寄与するかを反映しています。コントラスト比は(明るい方 + 0.05) / (暗い方 + 0.05)で、同じ色同士なら1:1、純粋な黒と白なら21:1になります。
「大きなテキスト」には正確な定義があり、正しく引用されないことがよくあります。通常太さで18pt(約24px)、または太字で14pt(約18.7px)です。そのため3.2:1の色の組み合わせは見出しには完全に合格しても、本文テキストには不合格になることがあります。この式は対称的で、前景と背景を入れ替えても比率は変わりません。そのため入れ替えボタンはプレビューのためだけにあります。正直な限界が一つあります。この比率は明るさの差のみを測定するため、赤と緑の組み合わせが理論上4.5:1をクリアしても、色覚特性を持つ人にとっては読みにくいことがあります。
2つの色はこのページのJavaScript内で、変更のたびにこれらの式を通過します。色の値はどこにも送信されません。カラーピッカーを操作している間、ネットワークタブで確認できます。
よくある質問
AAとAAAの違いは何ですか?
AAはほとんどのサイトが目標とする基準値で、通常テキストは4.5:1、大きいテキスト(18pt以上、または太字14pt以上)は3:1です。AAAはより厳しく、弱視のユーザー向けのコンテンツを想定しており、通常テキスト7:1、大きいテキスト4.5:1です。
画像もチェックできますか、それとも単色だけですか?
単色同士(背景に対するテキスト色)のみです。写真やグラデーションの上のテキストの場合は、その上に乗り得る最も暗い部分と最も明るい部分の両方に対してコントラストを確認してください。
ブラウザや監査ツールと同じ計算式ですか?
はい。標準のWCAG 2.1相対輝度・コントラスト比の計算式で、Lighthouseやaxeでも使われているのと同じものです。
ブログから： WCAGコントラストチェック：実践ガイド