コントラスト比チェッカー

使い方

1. 文字の色に文字の色を、背景色にその後ろの色を入力します。
2. コントラスト比を読みます。4つの文字の確認と部品の確認で、組み合わせがどの水準に達するかが分かります。
3. 本文ではAA、通常の文字を目指します。大きな文字はより低いコントラストで足ります。大きさは以下の節にあります。
4. 確認に不合格の場合は、推奨の文字色から始め、実際のデザインで結果を試してください。

コントラスト比の求め方

WCAG 2.2では、どの色にも相対輝度が与えられます。赤、緑、青の各値は、まず線形にされます。0から1の尺度で0.04045以下の値は12.92で割り、それより大きい値は、0.055を足して1.055で割った後に2.4乗します。3つの結果に、赤0.2126、緑0.7152、青0.0722の重みを掛けます。コントラスト比は、明るい方の色の輝度に0.05を足したものを、暗い方の色の輝度に0.05を足したもので割った値です。

結果は、同じ2色なら1、白地に黒なら21までの値になります。

L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L1 + 0.05) ÷ (L2 + 0.05)

L1  luminance of the lighter colour
L2  luminance of the darker colour

水準

WCAG 2.2は、次の最小のコントラスト比を定めています。水準と達成基準を示すので、正確な文言を確かめられます。

• AA、通常の文字：4.5:1（達成基準1.4.3）。
• AA、大きな文字：3:1。18ポイント、または太字の14ポイントの文字です（1.4.3）。
• AAA、通常の文字：7:1（達成基準1.4.6）。
• AAA、大きな文字：4.5:1（1.4.6）。
• ページを使うために読み手が必要とするボタン、枠線、アイコン：3:1（1.4.11）。

このツールが扱わないこと

• 写真、画像、グラデーションの上の文字：文字の後ろの背景が文字ごとに変わるので、その位置の実際の画素を確かめてください。
• 透明な色：読み手がページで実際に見る色を入力してください。
• ホバーやフォーカスなどの状態：各状態の色も確かめてください。
• 読み手にとって文字が大きいかどうか：フォントの大きさと太さで決まるので、このページでは分かりません。

よくある質問