AA（推奨される最低基準）
欧州アクセシビリティ法を含む、ほとんどのアクセシビリティ規制が求めるレベルです。
- 通常テキスト
- 4.5:1
- 大きいテキスト / UI
- 3:1
カラーコントラストチェッカー（WCAG AA・AAA）
テキストが背景の上で読みやすいかを確認できます。WCAGのコントラスト比を計算し、通常テキスト・大きいテキスト・UI要素のAAとAAAをチェックして、基準を満たす最も近い色を提案します。
良好
プレビュータイトル
いろはにほへと ちりぬるを わかよたれそ つねならむ
カラー
通常テキスト
AA 4.5 · AAA 7
AAAAA大きいテキスト
AA 3 · AAA 4.5
AAAAAUI要素
AA 3
AA
コントラスト 4.64:1. 通常テキスト: AA 合格, AAA 不合格. 大きいテキスト: AA 合格, AAA 合格. UI要素: AA 合格.
基準を満たす色
通常テキストで基準を満たす、同じ色相の最も近い色です。クリックすると適用されます。
AAは通常テキストで4.5:1、大きいテキストで3:1が必要です。AAAはそれぞれ7:1と4.5:1です。
組み合わせの例
よくある色の組み合わせです。合格するものもあれば、しないものもあります。読み込んで確認しましょう。
コントラスト比とは？なぜ重要なのか
コントラスト比は、2つの色の明るさの差を測るもので、通常はテキストの色と背景の色を比べます。数値が高いほど、テキストと背景を見分けやすくなります。国際的な基準であるWebコンテンツ・アクセシビリティ・ガイドライン（WCAG）は、テキストのサイズと目指す適合レベルに応じて最低限の比率を定めています。
コントラスト不足は見た目だけの問題ではありません。ロービジョンの人、色覚に特性のある人、あるいは日差しの下でスマートフォンを使うすべての人にとって読みにくくなります。さらに多くの国では、デジタルアクセシビリティに関する規制によりWCAGへの準拠が法的に求められています。
AAとAAAのレベルを解説
AAA（強化レベル）
重要なコンテンツや、より高いアクセシビリティが必要な利用者向けに推奨されますが、サイト全体で必須とは限りません。
- 通常テキスト
- 7:1
- 大きいテキスト
- 4.5:1
3ステップでコントラストを確認
テキストと背景を選ぶ
テキスト色または背景色を押し、ピッカー、スポイト、コード入力で調整します。透明度にも対応しています。
用途ごとに確認
比率と、通常テキスト・大きいテキスト・アイコンや入力欄の枠線などのUI要素について、AAとAAAを満たすかが表示されます。
提案を適用
基準を満たさない場合、同じ色相で基準を満たす最も近い色を提案します。クリックひとつで完了です。
大きいテキストとみなされるもの
WCAGでは、18ポイント（24 px）以上、または太字で14ポイント（約18.66 px）以上を大きいテキストとみなします。線が太いため、低いコントラストでも読めます。AAは3:1、AAAは4.5:1で十分です。
それ以外は通常テキストで、AAは4.5:1、AAAは7:1が必要です。注記、ラベル、キャプションなどの小さな補助テキストに注意してください。不合格になりやすいのはこれらです。
ボタン、アイコン、入力欄のコントラスト
コントラストはテキストだけの問題ではありません。WCAGは、ページを操作するために見える必要があるUI要素に最低3:1を求めています。フォームの入力欄の枠線、情報を伝えるアイコン、フォーカスインジケーター、コントロールの状態などです。
白地にとても薄いグレーの枠線はおしゃれに見えるかもしれませんが、多くの人には入力欄の位置がわかりません。
対象外
- ロゴ
- 装飾的なテキスト
- 無効化されたコントロール
- 画像や写真
コントラスト比の計算方法
コントラスト比は2色の相対輝度、つまり目の感度を補正したうえで各色が発する光の量を比較します。
L1- 明るいほうの色の相対輝度。0（黒）から1（白）まで。
L2- 暗いほうの色の相対輝度。
0.05- 画面に反射する周囲の光を補正します。そのため最大は21:1（黒地に白）、最小は1:1（同じ色）です。
(L1 + 0.05) / (L2 + 0.05)
Aa(1 + 0.05) / (0 + 0.05) = 21:1
よくある質問
通常テキストでは、4.5:1以上でWCAGのAAレベルを満たします。これが推奨される最低基準です。強化されたコントラスト（AAAレベル）には7:1が必要です。
AAはほとんどのアクセシビリティ規制が求める最低レベルです。AAAはより厳しい強化レベルで、重要なコンテンツに推奨されますが、サイト全体で必須とは限りません。
大きな文字はサイズと線の太さだけで読みやすいため、WCAGは通常テキストの4.5:1に対して、より低い比率（AAで3:1）を認めています。
18ポイント（24 px）以上、または太字で14ポイント（約18.66 px）以上のテキストです。AAは3:1、AAAは4.5:1が必要で、通常テキストの4.5:1と7:1より低い基準です。
多くの国で義務付けられています。特に公的機関が対象で、欧州アクセシビリティ法などの規制により民間企業にも広がっています。法的義務がなくても、WCAGに準拠すればすべてのユーザーの体験が向上します。
両方の色の相対輝度（どれだけ光を反射するかの指標）から計算し、1:1（コントラストなし、同じ色）から21:1（最大値、純白と純黒）までの比率で表します。
いいえ。WCAGはロゴ、装飾的なテキスト、無効化されたコントロールを対象外としています。一方、有効なボタン、フォームの入力欄、意味を持つアイコン、フォーカスインジケーターには3:1以上が必要です。
比率は実際に見える色で計算します。半透明のテキストは測定前に背景と混ぜ、半透明の背景は白と混ぜます。透明度はツールのカラー入力欄から追加できます。
ツールの提案を使ってください。ブランドが変わらないよう同じ色相のまま、AAまたはAAAを満たす最も近いテキスト色や背景色を提案します。カラーピッカーで色のバリエーションを探すこともできます。