WCAGコントラストチェッカー
文字色と背景色の組み合わせのコントラスト比をWCAG AA・AAA基準で確認 — 通常サイズと大きいサイズのテキストをライブプレビュー付きで。
796回閲覧
素早い茶色の狐が怠けた犬を飛び越える
大きいテキストの例 24px
コントラスト比とは
コントラスト比は2色の相対輝度を比較する値で、1:1(同色)から21:1(白地に黒)まであります。WCAGは通常テキストで4.5:1(AA)、大きいテキストで3:1(24px以上、または太字18.7px以上)を要求します。より厳しいAAAレベルではそれぞれ7:1と4.5:1が必要です。UIコンポーネントや図形は隣接色に対して3:1が必要です。
計算では各sRGBチャンネルを線形化し、重み付けして(L = 0.2126R + 0.7152G + 0.0722B)、(L₁+0.05)/(L₂+0.05)を求めます。直感はしばしば外れます — 白地の中間グレー#777は多くの人には十分読みやすく見えますが、実際は4.48:1でAAにわずかに届きません。この余裕は弱視のユーザー、日光下での視認性、安価なディスプレイのためのものです。
よくある質問
文字色と背景色を入れ替えるとコントラスト比は変わる?
いいえ — 計算式は常に明るい色を分子に置くため、比率は対称です。読みやすさは主観的に違って感じられることがあります(暗地に明るい文字はにじんで見える等)が、WCAGのスコアは同じです。
大きいテキストとは何を指す?
24px(18pt)以上の標準ウェイト、または約18.7px(14pt)以上の太字です。大きいテキストはAAで3:1しか必要ないのは、文字が大きいと低いコントラストでも読みやすさが保たれるためです。
ブランドカラーが基準を満たさない — どうすればいい?
装飾用途にはそのまま使い、テキスト用途では基準を満たすまで濃く/薄く調整します。色調・階調のスケールを用意すると便利です。プレースホルダーテキストや無効状態の要素は要件の対象外ですが、できるだけ妥当な範囲に収めましょう。
関連ツール
問題を報告
WCAGコントラストチェッカー