まず、測定対象物を特定します。
テキストの色と実際の背景色を、3ビットまたは6ビットのHEX値で入力してください。このツールは不透明なsRGBカラーに基づいて計算します。透明な色、背景画像、グラデーションの場合は、まずテキストの位置における実際の合成背景を決定する必要があり、単にいずれかの色値を代用として使用することはできません。
この色の組み合わせにおけるテキストコントラストのチェック結果だけでは、ページ全体がWCAGの評価基準を満たしているとは言えません。フォントサイズ、フォントの種類、インタラクティブな状態、その他のアクセシビリティ要件については、実際のページで確認する必要があります。
比率の計算方法
各 8 ビットカラーチャンネルを 255 で割って c を求めます。c ≤ 0.04045 の場合、線形値は c ÷ 12.92 です。それ以外の場合は、((c + 0.055) ÷ 1.055) の 2.4 乗です。相対輝度 L = 0.2126R + 0.7152G + 0.0722B で、R、G、B は上記の線形値を使用します。
(明るい方の L + 0.05) ÷ (暗い方の L + 0.05). 白と黒は 21:1、同じ色は 1:1 です。文字色と背景色を入れ替えてもコントラスト比は変わりませんが、見た目は変わります。
四捨五入を合格と勘違いしないでください。
通常の文字は AA で 4.5:1 以上、AAA で 7:1 以上が必要です。大きな文字はそれぞれ 3:1 以上と 4.5:1 以上です。大きな文字は 18pt 以上、または太字で 14pt 以上です。小さな文字に大きな文字の基準を適用しないでください。
白背景における#777777のコントラスト比は約4.478:1であり、通常のテキスト（AA）の要件である4.5:1を満たしていません。インターフェース上で4.5と表示されていても、その表示値は判断には使用できません。このサイトでは小数点以下3桁まで表示していますが、条件判定には計算された完全な値を使用します。
色のペアを実際のインターフェースに戻す
プレビューでは入力された色のみが表示され、本文には16px、見出しには24pxが使用されます。まず、対象ページで実際のテキストの色、背景、フォントサイズ、太さを確認し、次に通常状態、ホバー状態、フォーカス状態を確認してください。デザイン案で最も見栄えの良い色の組み合わせだけを確認するのではなく、必ず実際の色を確認してください。
テキストを徐々に暗くしたり、背景を明るくしたりした後、計算を繰り返し、実際のデバイス上でフォントと読みやすさを確認します。ここでの色コントラストテストは、色覚異常の識別、アイコンの意味、ページ全体の適合性を測定するものではありません。色値と検証箇所は、後日確認するために保持されます。