コントラストチェック

文字色と背景色のコントラスト比を計算し、WCAG の AA 基準の目安を確認します。

文字色

背景色

WCAG 2.2：通常文字 AA 4.5:1 / AAA 7:1、大きな文字 AA 3:1 / AAA 4.5:1。大きな文字は24 CSS px以上、または太字約18.67px以上。背景に透明度がある場合は白い下地に合成します。

8.24 : 1

通常文字 AA：基準以上（4.5:1）通常文字 AAA：基準以上（7:1）大きな文字 AA：基準以上（3:1）大きな文字 AAA：基準以上（4.5:1）UI・図形の隣接色：基準以上（3:1）

判定は丸める前の比率で行います。UI・図形は隣接色との比率のみを確認するもので、ページ全体の適合を保証しません。無効な操作部品などの例外は文脈で判断します。

色と言葉の、いい関係。

読みやすい配色は、伝えたい内容をそっと支えます。小さな文字でも確認してみましょう。

これは 14px のサンプルテキストです。

通常文字は 4.5:1、大きな文字は 3:1 が AA の基準。大きな文字は概ね 24 CSS px、太字では約 18.7 CSS px 以上です。透明な背景は白の上に合成します。

4.5未満なので、表示上の丸めで合格にしません。少し暗くした #767676 なら約4.54 : 1です。

色の基準だけの判定です。文字サイズ、太さ、行間、画像に重なる位置やフォーカス表示も確認してください。