コントラスト比計算ツール
テキスト色と背景色のWCAGコントラスト比を確認し、適合するアクセシビリティレベルを判定して、基準を満たす推奨色を取得できます。
コントラスト比の結果
コントラスト比
-
2つの色を入力してください。
大きいテキストのサンプル
通常の本文テキストのサンプル。コントラスト不足の影響を最も受けやすいサイズです。
- AA、通常テキスト (4.5:1)
- -
- AA、大きいテキスト (3:1)
- -
- AAA、通常テキスト (7:1)
- -
- AAA、大きいテキスト (4.5:1)
- -
AAに適合する推奨テキスト色
以下の色は現在の背景色に対して4.5:1以上のコントラスト比を確保します。選択するとテキスト色として試せます。
使い方
コントラスト比とは前景色と背景色の輝度の差であり、WCAGガイドラインに従い(L1 + 0.05)を(L2 + 0.05)で割って算出されます。L1は明るい方の相対輝度、L2は暗い方の相対輝度です。WCAG AAでは通常テキストに4.5:1、大きいテキストに3:1が求められます。
- 2つの色を入力または選択してください
16進数値を入力するか、カラーピッカーを使用してください。
- 比率とレベルを確認してください
各WCAGレベルについて、その比率での合格または不合格が表示されます。
- 推奨色を試してください
下のスウォッチから選択すると、現在の背景色で即座にAA基準を満たせます。
WCAGコントラスト比の計算式
コントラスト比 = (L1 + 0.05) ÷ (L2 + 0.05)
相対輝度Lは線形化されたsRGBから導出されます。各チャンネルはガンマ補正済みの0-255からsRGB伝達関数を用いて線形光に変換され、人間の視感効率に合わせて0.2126R + 0.7152G + 0.0722Bで重み付けされます。可能な最大比は21:1で、純白上の純黒の場合です。
4.5:1ルールが適用される対象
WCAGの4.5:1という比率は、テキストおよび画像化されたテキストに特に適用されます。装飾用の画像、ロゴタイプ、テキスト代替のない純粋な視覚的アイコンは除外されます。ボタン、フォーム入力欄の枠線、フォーカスインジケーターなどの非テキストUIコンポーネントについては、WCAG 1.4.11に基づき3:1のみが求められます。これは、単純な図形に比べて文字の細い線を読みやすく保つにはより高いコントラストが必要なため、基準が低く設定されています。
ダークテーマは見やすくても不適合になる場合があります
WCAGのアルゴリズムはsRGBリニア化輝度を使用しており、知覚される明るさと線形関係にはありません。ダークテーマでは、ほぼ黒の背景に中間グレーのテキストを組み合わせることが多く、見た目は読みやすくても比率が4.5:1を下回る場合があります。例えば、#1A1A24上の#999999は約3.6:1となりAA不適合ですが、テキストを約#ABABAB以上に明るくすると閾値を満たします。
よくある質問
WCAG AAレベルで本文テキストに必要なコントラスト比はいくらですか?
WCAG 2.1レベルAAでは、通常の太さで18px未満、または太字で14px未満のテキストに最低4.5:1、大きなテキスト(18px以上の通常太さ、または14px以上の太字)に3:1のコントラスト比が必要です。レベルAAAでは、通常のテキストに7:1、大きなテキストに4.5:1が必要です。可能な最大比率は21:1で、純白(#FFFFFF)上の純黒(#000000)です。
WCAGのコントラスト比はどのように計算されますか?
計算式は(L1 + 0.05)を(L2 + 0.05)で割ったものです。ここでL1は明るい色の相対輝度、L2は暗い色の相対輝度です。相対輝度は線形化されたsRGB値から求められます。各チャンネルはガンマ補正済みの0-255からsRGB伝達関数を用いて線形光に変換され、人間の視感効率に合わせて0.2126R + 0.7152G + 0.0722Bとして重み付けされます。
すべてのUI要素に4.5:1のコントラスト比が必要ですか?
いいえ。WCAGの4.5:1という比率は、テキストおよび文字画像に特に適用されます。装飾的な画像、ロゴタイプ、テキスト代替のない純粋に視覚的なアイコンは除外されます。非テキストのUIコンポーネント(ボタン、フォーム入力、フォーカスインジケーター)は、WCAG 1.4.11に基づき3:1のコントラストのみが必要です。より厳しい4.5:1の閾値が存在するのは、テキストの読みやすさが細かい文字の線幅に依存するためです。
読みやすく見えるのに、ダークモードのデザインがWCAGに適合しないのはなぜですか?
WCAGのアルゴリズムはsRGB線形化輝度を使用しますが、これは知覚される明るさと線形関係にはありません。ダークテーマでは、中間のグレーのテキストとほぼ黒の背景を組み合わせることが多く、見た目のコントラストは十分でも輝度比が4.5:1を下回る場合があります。例えば、#1A1A24の背景に#999999のテキストでは約3.6:1となり、AAレベルに適合しません。同じ背景でテキストを約#ABABAB以上に明るくすると、閾値に到達します。
フォーム入力のプレースホルダーテキストにもカラーコントラストの要件は適用されますか?
はい。WCAG 1.4.3では、意味のあるコンテンツを伝えるプレースホルダーテキストは4.5:1のコントラスト比を満たす必要があります。多くのデザインでは不透明度の低いプレースホルダーテキスト（例：40%グレー）が使用されていますが、これはこの基準を満たしません。達成基準1.4.3はプレースホルダーテキストを無条件に除外するものではなく、例外は非アクティブなUIコンポーネントや純粋な装飾にのみ適用され、説明的なヒントテキストには適用されません。