# カラーコントラストチェッカー 文字色と背景色を、この場でWCAG 2.2に照らして比較できます。ページのURLを入力すれば、コントラストの最低基準を下回るテキストをすべて、測定された色と、合格する最も近い色とともに表示します。 ## このツールで確認する項目 - 任意の2色のWCAGコントラスト比: 計算ツールはWCAG 2.2の定義にある相対輝度の計算式を使い、通常のテキスト、大きなテキスト、ユーザーインターフェースの部品について、AAとAAAの判定結果を表示します。計算はブラウザ内で行われます。 - 合格する色を算出: 組み合わせが不合格の場合、同じ色相で4.5:1または7:1に達する最も近い文字色を見つけるので、デザインの変更を最小限に抑えられます。 - ページ上のコントラストの低いテキストをすべて検出: ページのスキャンでは、実際のChromeブラウザでaxe-coreのcolor-contrastルールを実行し、不合格の要素ごとに文字色、背景色、フォントサイズ、コントラスト比を一覧表示します。 - 色の組み合わせごとにまとめて表示: テーマカラーを1つ変更すれば、通常はその色を使うすべての要素が修正されるため、不合格は文字色と背景色の組み合わせごとにまとめて表示します。 - 大きなテキストには適切な基準値を適用: 24ピクセル以上、または太字で18.66ピクセル以上のテキストに必要なのは、4.5:1ではなく3:1です。スキャンでは、各要素の計算後のサイズと太さから、適切な基準値を適用します。 - 測定できなかったものとその理由: 画像、グラデーション、重なった要素の上にあるテキストは、理由とともに別に表示するので、目視で確認すべきものが正確にわかります。 ## 確認できないこと - 写真、グラデーション、動画の上にあるテキストは測定できません。各文字の背後に画像のどの部分があるかをソフトウェアは判断できないため、これらは確認用に一覧表示します。 - ホバー、フォーカスなどの状態はチェックできません。スキャンはページを読み込んだ時点の状態を見ています。これらの色は計算ツールで確認してください。 - ページ上のアイコン、枠線、フォーム項目をWCAG 1.4.11に照らしてスキャンすることはできません。計算ツールでは、入力した任意の組み合わせについて3:1の判定結果を表示します。 - 文字が画像に焼き込まれたバナーのように、画像の一部になっているテキストは読み取れません。 - 入力したページ以外はテストできません。無料のフルスキャンでは、主要ページを最大5件までテストします。 ## なぜ重要なのか コントラスト不足は、ウェブで最も多いアクセシビリティの不適合です。WebAIMが2026年に上位100万件のトップページを分析したところ、83.9%でコントラストの低いテキストが見つかり、1ページあたり平均34件ありました。 薄い文字は、ロービジョンの人や色覚に特性のある人にとって読みにくく、明るい日差しの下でスマートフォンを使う人にとっても同じです。WCAG 2.2の達成基準1.4.3（レベルAA）では、コントラスト比の最低基準を通常のテキストで4.5:1、大きなテキストで3:1と定めています。 また、最も安く修正できる問題の1つでもあります。ほとんどのサイトでは、ごく少数のテーマカラーがほぼすべての不合格の原因になっており、それらを変更すればすべてのページがまとめて修正されます。 ## 結果の読み方 - コントラスト比: 1:1（同じ色どうし）から21:1（白地に黒）までの値です。比率は切り捨てて表示されるため、4.49:1と表示される組み合わせは最低基準の4.5:1を満たしていません。 - 通常のテキスト、AA（4.5:1）: WCAG 1.4.3で、本文、リンク、ラベル、ボタンの文字に求められる最低基準です。 - 大きなテキスト、AA（3:1）: 24ピクセル以上、または太字で18.66ピクセル以上のテキストが対象です。WCAGでは、大きなテキストを18ポイント、または太字で14ポイントと定義しています。 - AAA（7:1と4.5:1）: WCAG 1.4.6の強化レベルです。AAへの適合には必要ありませんが、より多くの読み手の助けになります。 - アイコン、枠線、フォーム項目（3:1）: WCAG 1.4.11では、コントロールや図形のうち、利用するために見える必要がある部分について、隣接する色との間に3:1を求めています。 - 不合格のテキスト: スキャンで基準値を下回ると測定された各要素を、セレクター、色、サイズ、比率とともに表示します。開くと、マークアップと、利用できる場合はスクリーンショットを確認できます。 - 目視で確認: axe-coreが測定できなかったテキストと、その理由です。たとえば、背後に画像やグラデーションがある場合です。 ## よくある問題の修正方法 - 白地にグレーの文字: #767676は、白地で4.5:1（4.54:1）に達するほぼ最も明るいグレーです。#999999（2.84:1）のようなさらに明るいグレーは、フッター、キャプション、プレースホルダー、価格でよく見られる不合格の原因です。 - ブランドカラーのボタン上の白い文字: ブランドカラー上の白い文字が不合格になる場合は、ボタンの背景を数段階暗くするか、暗い色の文字を使います。ホバー時とフォーカス時の色は明るくなりがちなので、あわせて確認してください。 - フォームのプレースホルダー: プレースホルダーもテキストなので、4.5:1が必要です。さらに望ましいのは、入力欄の上に見えるラベルを置き、プレースホルダーが唯一の説明にならないようにすることです。 - 画像やスライダーの上のテキスト: テキストを不透明または半透明の背景の上に置くか、画像に暗いオーバーレイを重ねたうえで、テキストの背後にある画像の最も明るい部分を確認します。 - セールバッジと小さな注記: 無効なコントロール内のテキストは1.4.3の対象外ですが、セールバッジ、価格、法的な注記は対象外ではありません。これらは、ストアのページで最も薄い文字になっていることがよくあります。 ## よくある質問 ### WCAGではどのくらいのコントラスト比が求められますか？ レベルAAでは、通常のテキストで4.5:1、大きなテキストで3:1（達成基準1.4.3）、ユーザーインターフェースのコンポーネントと意味のある図形で3:1（1.4.11）です。レベルAAAでは7:1と4.5:1が求められます（1.4.6）。 ### 大きなテキストとはどのようなものですか？ WCAGでは、大きな文字を18ポイント以上、または太字で14ポイント以上と定義しています。CSSピクセルでは約24px、太字で18.66pxです。 ### ロゴもコントラストの最低基準を満たす必要がありますか？ いいえ。WCAG 1.4.3では、ロゴタイプと、ロゴやブランド名の一部であるテキストは対象外です。純粋に装飾的なテキストや、無効なコントロール内のテキストも対象外です。 ### 画像の上のテキストが確認対象として表示されるのはなぜですか？ axe-coreは単色を測定します。テキストの背後に画像、グラデーション、別の要素があると、どの色どうしが接しているかを判断できないため、推測はせず、人が確認すべき要素として報告します。 ### AAAのコントラストは必要ですか？ AAAはレベルAAへの適合には必要なく、W3Cもサイト全体にAAAを求めることは推奨していません。それでも、デザイン上可能であれば、本文で7:1を確保するのは望ましいことです。 ### APCAはWCAGの一部ですか？ いいえ。APCAは、まだ草案の段階にあるWCAG 3に向けて議論されてきた別のコントラストの算出方法です。現在の適合性は、このツールが計算するWCAG 2のコントラスト比で判断されます。 ## 出典 - [W3C：WCAG 2.2 達成基準1.4.3 コントラスト（最低限）の解説](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) - [W3C：達成基準1.4.6 コントラスト（高度）の解説](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced) - [W3C：達成基準1.4.11 非テキストのコントラストの解説](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) - [W3C：WCAG 2.2における相対輝度の定義](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance) - [Deque：axe-coreのcolor-contrastルール](https://dequeuniversity.com/rules/axe/4.13/color-contrast) - [WebAIM：The WebAIM Million（2026）](https://webaim.org/projects/million/)