実際に重なる文字色と背景色を確認する
文字の色と背景の色をHEXで入力してください。このチェッカーは両方のsRGB値から相対輝度を計算し、明るい方と暗い方のコントラスト比を示します。同じ色同士では1:1、黒と白では最大の21:1です。色の名前や見た目だけによる判断よりも、数値の確認が役立ちます。異なる色相でも輝度が近ければ、文字が読み取りにくい場合があります。プレビューには選んだ文字色を実際の背景色の上に表示します。ページで本当に重なる色を入力してください。グラデーション、半透明の層、重ねた要素がある場合、文字の真後ろの背景色は設計トークンと異なることがあります。透明度を使うなら、まず合成後に見える不透明な色を求めて、その色で確認します。文字色と背景色を入れ替えても比の数値は同じです。
AAとAAAのしきい値を分けて読む
WCAG 2.2では通常サイズの文字に対し、AAのコントラスト比は少なくとも4.5:1です。条件を満たす大きな文字では3:1を使います。より厳しいAAAの目標は、通常文字が7:1、大きな文字が4.5:1です。このページは四つの判定を別々に表示するため、一つの合格から別の合格を推測する必要はありません。大きな見出しならAAを満たす配色でも、普通の本文では不合格になることがあります。CSSのクラス名ではなく、実際に描画された文字の大きさと太さで基準を選んでください。例として、濃い青の#1A365Dを白の#FFFFFFに重ねると約12.14:1となり、表示した四つの文字の基準をすべて満たします。青を明るくすると、境界を越えたときに判定が変わる様子を確認できます。
デザイン確認に数値を役立てる
最初に本文を調べてください。通常サイズの文字には、一般により厳しいしきい値が必要です。次に見出し、フォームのラベル、リンク、ナビゲーション、ボタン内の文字を、実際の状態ごとに確かめます。後からテーマを変更した際に再検査できるよう、調べた二つの色のコードを記録しておきます。プレビューは配色案の比較に便利ですが、数値を併用すると見た目の好みだけで決めずに済みます。文字ではない操作部品は別のWCAG基準に従います。この文字の判定に合格しても、アイコン、輪郭、フォーカス表示、ページ全体まで適合したことにはなりません。大きな文字の例外を使えるかどうかは、完成した文字のサイズと太さで決まります。総合的な点検ではキーボード操作や拡大表示なども確認してください。
測定で起きやすい誤りを避ける
ページ全体が白くても、文字が色付きカードの上にあるなら、白を背景として測らないでください。その文字の直後ろにある色を検査します。しきい値と比較する前に比を切り上げてもいけません。計算機は丸めていない値で合否を判断し、読みやすくするために表示だけを丸めます。表示が境界に近い4.50:1なら、色コードと完成画面を慎重に確認します。WCAGの式は指定されたsRGB値を使用します。画面やスクリーンショットで違って見えても、実装されたページで重ね合わせや状態変化を見直してください。不合格なら文字色、背景色、または両方を調整して再測定します。大きな文字の条件を確かめずにフォントだけ拡大しても、低い方のしきい値を適用できるとは限りません。