1:1 to 21:1 · AA · AAA
コントラストチェッカー
白地に黒のWCAGコントラスト比は最大値の21:1で、#0060fd上の白は5.13:1です。文字色と背景色を入力すると、お手持ちの色の組み合わせを確認できます。
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
コントラスト比と5つの判定は入力に合わせて更新されます。比は小数第2位で切り捨てられ、切り上げはされません。そのため4.499は4.49:1と表示され、4.5:1の判定には不合格です。
Scanned by 
NortonTM Safe Web
概要
- 価格
- 料金なし
- アカウント
- 不要
- アップロード
- 対象外 — 色を入力するだけで、何も送信されません
- 計算式
- (明るい方の輝度 + 0.05) ÷ (暗い方の輝度 + 0.05)
- しきい値
- AA：通常の文字4.5:1、大きな文字3:1。AAA：通常の文字7:1、大きな文字4.5:1。UI部品は3:1
- 規格
- WCAG 2.2の相対輝度とコントラスト比の定義
よく知られた組み合わせのコントラスト比
これらの行はチェッカーと同じコードで生成されています。チェックマークは組み合わせが要件を満たすこと、バツ印は満たさないことを示します。
| 文字色 | 背景 | 比 | AA 通常 | AA 大 | AAA 通常 | AAA 大 | UI部品 |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| 判定 | 最小の比 |
|---|---|
| AA、通常の文字 | 4.5:1 |
| AA、大きな文字 | 3:1 |
| AAA、通常の文字 | 7:1 |
| AAA、大きな文字 | 4.5:1 |
| AA、UI部品とグラフィック | 3:1 |
色の組み合わせを確認する手順
2色を入力
文字色と背景色を任意のCSS表記で入力するか、ピッカーを使います。入れ替えボタンで2色が入れ替わるので、暗い背景に明るい文字を確認するときに便利です。
比を読む
比は1:1（同じ色）から21:1（白地に黒）までです。フィールドの下の見本には組み合わせが16 pxと24 pxで表示されるので、自分の目でも結果を確かめられます。
5つの判定を見る
各タイルにはWCAGの要件ごとに合格か不合格が表示されます。通常の文字のAAとAAA、大きな文字のAAとAAA、UI部品のAAです。通常の文字がAAに不合格の場合は、合格する最も近い文字色が提案されます。
コントラスト比の計算方法
WCAGは相対輝度を使ってコントラストを測ります。相対輝度は色の明るさを0（黒）から1（白）で表したものです。赤、緑、青の各チャンネルを255で割り、0.04045以下の値は12.92で割り、それより大きい値は（値 + 0.055）を1.055で割ったものの2.4乗にします。輝度は、赤の0.2126倍、緑の0.7152倍、青の0.0722倍の合計で、目が各色に反応する強さを反映しています。コントラスト比は、明るい方の輝度に0.05を足したものを、暗い方の輝度に0.05を足したもので割った値です。
WCAG 2では、レベルAAで通常の文字に4.5:1以上、大きな文字に3:1以上、レベルAAAではそれぞれ7:1と4.5:1が求められます。大きな文字とは18ポイント（24 CSSピクセル）以上、または太字で14ポイント（約18.66ピクセル）以上の文字です。達成基準1.4.11では、フィールドの枠線やグラフの線など、利用者が見分ける必要のあるUI部品やグラフィックに3:1が求められます。比は丸めずに各しきい値と比較されます。色に透明度がある場合は、測定の前に、透明な背景を白の上に、透明な文字色を背景の上に重ねます。このページが実装しているのはWCAG 2.xだけで、ガイドラインの次期版で議論されているAPCAは計算しません。
コントラストの質問
WCAGは文字にどのくらいのコントラスト比を求めていますか？
レベルAAでは、通常の文字は4.5:1以上、大きな文字は3:1以上が必要です。レベルAAAでは、通常の文字が7:1、大きな文字が4.5:1です。比は文字色と、そのすぐ後ろの色の間で測ります。
大きな文字とは何ですか？
WCAGでは、大きな文字を18ポイント（24 CSSピクセル）以上、または太字で14ポイント（約18.66 CSSピクセル）以上の文字と定義しています。それより小さいものは通常の文字として扱われ、より高い比が必要です。
白地でAAに合格する最も薄いグレーは？
白地の#767676は比が4.54:1で、通常の文字の4.5:1の判定に合格します。1段階薄い#777777は4.47:1で不合格です。7:1（AAA）の場合、最も薄いグレーは7.00:1の#595959です。
4.5に見えるのに4.49が不合格になるのはなぜですか？
判定は正確な比としきい値を比べます。4.499という比は4.5を下回るので不合格で、ページは切り上げずに4.49:1と表示します。実際の例は、白地の純粋な赤です。3.99:1は近い値ですが、通常の文字の4.5:1の判定には不合格です。
アイコン、枠線、フォームのフィールドにはどのくらいのコントラストが必要ですか？
WCAG 2.1で追加された達成基準1.4.11「非テキストのコントラスト」では、フィールドの枠線、フォーカスリング、グラフの線など、利用者が見分ける必要のあるUI部品やグラフィックと、その隣の色との間に3:1以上を求めています。無効なコントロールや装飾だけのグラフィックは対象外です。
比に合格すればページはアクセシブルですか？
いいえ。コントラストは数ある要件の1つです。文字の大きさと太さ、行間、色だけで意味を伝えないこと、フォーカスの見やすさ、画像やグラデーション上の文字、色覚の異なる人にどう見えるかもすべて関係します。この結果は判断材料の1つとして使い、実際のコンテンツでページをテストしてください。