コントラスト比チェッカー（WCAG 2.2）

計算方法

コントラスト比の計算方法

WCAG 2.2ではコントラスト比を（L1＋0.05）÷（L2＋0.05）と定義しています。L1は明るい方の色、L2は暗い方の色の相対輝度です。結果は1:1（同じ色）から21:1（白地に黒）までの範囲になります。

コントラスト比のチェック手順

1. 文字色（前景色）を入力するか選びます。
2. 背景色を入力するか選びます。
3. コントラスト比と適合する基準（AA、AAA）を確認し、必要なら提案された色を使います。

例：白地に黒は21:1です。白地にグレー#767676は4.54:1で通常の文字のAAに適合しますが、白地に青#3B82F6は3.68:1しかなく、大きな文字のAAにしか適合しません。

相対輝度はW3Cの定義どおりに計算します。sRGBの各チャンネルを255で割って線形化し、0.04045以下の値は12.92で割り、それより大きい値は（（値＋0.055）÷1.055）^2.4とします。そのうえでL＝0.2126×R＋0.7152×G＋0.0722×Bです。

例：白地に#777777：0x77＝119、119÷255＝0.4667 →（（0.4667＋0.055）÷1.055）^2.4＝0.1845。3つのチャンネルが同じなのでL＝0.1845。白はL＝1です。コントラスト比＝（1＋0.05）÷（0.1845＋0.05）＝4.48:1。大きな文字（3:1）には十分ですが、通常の文字（4.5:1）にはわずかに届きません。提案される#767676なら4.54:1になります。

WCAG 2.2の基準

WCAGでいう大きな文字は18ポイント以上、または14ポイント以上の太字です。ブラウザではおよそ24pxと18.67pxに相当します。ロゴ、純粋に装飾的な文字、無効なコントロールなどは例外です。

四捨五入はしません

WCAGは正確な値で比較します。4.499:1は4.5:1を満たしません。そのためチェッカーは丸める前の比で判定し、表示は小数第2位までとします。四捨五入すると基準に届いたように見える場合は切り捨てて表示します（4.50ではなく4.49）。

透明な色の扱い

アルファ値のある色（例：rgba(0, 0, 0, 0.6)や#00000099）は、ブラウザの描画と同じように重ねて計算します。半透明の背景は白の上に、半透明の文字色は背景の上に重ねます。実際のページの下地が別の色なら、その不透明な色を背景色として入力してください。

よくある質問

出典・根拠

• SC 1.4.3: W3C – WCAG 2.2: Contrast (Minimum), Level AA
• SC 1.4.6: W3C – WCAG 2.2: Contrast (Enhanced), Level AAA
• SC 1.4.11: W3C – WCAG 2.2: Non-text Contrast, Level AA
• WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
• WCAG 2.2: W3C – WCAG 2.2: Definition “contrast ratio”
• W3C WAI – Understanding SC 1.4.3: Contrast (Minimum)

更新日：2026年9月27日