色のコントラスト比チェッカー（WCAG）
文字色と背景色を入力すると、WCAG 2.x基準のコントラスト比をリアルタイムで計算し、レベルAA・AAAの通常テキスト・大きな文字それぞれに適合するかを判定します。ブラウザ内で処理され、入力内容がサーバーに送信されることはありません。カラーコードの形式変換には カラーコード変換 もあわせてご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
プレビュー
大きな文字のサンプル
これは通常サイズの文字のサンプルです。実際の見え方を確認できます。
コントラスト比:
判定結果
- 通常テキスト・レベルAA（4.5:1以上）
- 通常テキスト・レベルAAA（7:1以上）
- 大きな文字・レベルAA（3:1以上）
- 大きな文字・レベルAAA（4.5:1以上）
注意事項
- 色は「#333333」のようなHEX形式、または「rgb(51, 51, 51)」「51, 51, 51」のようなRGB形式で入力できます。
- 「大きな文字」の基準は、通常の太さで18pt（約24px）以上、または太字で14pt（約18.66px）以上の文字を指します。
- 判定はWCAG 2.x（2.0〜2.2共通）のコントラスト比の計算式に基づきます。次期WCAG 3で検討されているAPCAなど、新しい算出方式には対応していません。
- 透明度（アルファ値）には対応していません。rgba()形式を入力した場合はアルファ値を無視して計算します。
用語解説
コントラスト比
2つの色の明るさの差を1:1〜21:1の数値で表したものです。値が大きいほど、文字と背景の色の差がはっきりしていて読みやすいことを示します。
WCAG（Web Content Accessibility Guidelines）
W3Cが策定する、Webコンテンツをより多くの人にとって利用しやすくするための達成基準です。日本ではJIS X 8341-3の基礎にもなっています。
レベルAA / AAA
WCAGの達成基準には3段階（A・AA・AAA）があります。多くのWebサイトはAAへの準拠を目標とし、AAAはより厳しい基準です。
大きな文字（Large Text）
WCAGにおいて、通常の太さで18pt（約24px）以上、または太字で14pt（約18.66px）以上の文字のことです。大きな文字は小さな文字より視認性が高いため、コントラスト比の基準がやや緩やかになります。
よくある質問
WCAGのAAとAAAの違いは何ですか？
通常のテキストでは、AAはコントラスト比4.5:1以上、AAAは7:1以上が必要です。大きな文字ではAAが3:1以上、AAAが4.5:1以上です。多くのサイトはまずAAの達成を目標にします。
「大きな文字」とはどのくらいのサイズですか？
WCAGでは、通常の太さで18pt（約24px）以上、または太字で14pt（約18.66px）以上の文字を大きな文字とみなします。大きな文字は基準が緩やかです。
画像内の文字やロゴにも適用されますか？
ロゴや装飾的な要素はWCAGのコントラスト基準の対象外ですが、ボタンやアイコンなど機能を持つUI要素には3:1以上が求められます。文字を画像化したもの（文字の画像）も、ロゴや写真に写り込んだ文字を除き、HTMLの文字と同じ基準（AAの場合、文字サイズに応じて4.5:1または3:1）が適用されます。このツールは文字色と背景色の2色間の比を計算します。
このページをシェア