🔍
コントラストチェッカー（WCAG対応）
文字色と背景色のコントラスト比をWCAG 2.1基準（AA/AAA）で即チェック。Webアクセシビリティ対応に必須の無料ツール。
通常テキストサンプル（16px）
The quick brown fox jumps over the lazy dog.
小さなテキスト（12px）— アクセシビリティには要注意
#1E3A8A / #FFFFFF
コントラスト比
10.36:1
✅ WCAG AAA
通常テキスト基準
AA（通常）
✅ 合格
AA（大文字）
✅ 合格
AAA（最高）
✅ 合格
color: #1E3A8A; background-color: #FFFFFF; /* 10.36:1 */よく使われる配色パターン
WCAG 2.1 コントラスト基準について
- • AA（通常テキスト）：4.5:1以上 — ほとんどのWebサイトが目指す基準
- • AA（大文字/18px以上）：3:1以上 — 見出し・大きなテキスト向け
- • AAA（最高基準）：7:1以上 — 最も高いアクセシビリティレベル
- • 「大きなテキスト」= 通常体18px以上、または太字14px以上
コントラストチェッカーの使い方
文字色（Foreground）と背景色（Background）のHEXカラーコードを入力するか、カラーピッカーで色を選ぶと、 コントラスト比が即座に計算されWCAG 2.1基準に基づく合否判定が表示されます。
Webアクセシビリティとコントラスト
WCAG 2.1 AA基準（コントラスト比4.5:1以上）は、政府系サイト・企業サイトで広く求められる標準です。 日本のJIS X 8341-3やEUのEN 301 549、米国のSection 508でも参照されています。 デザイン段階でコントラストを確認することで、後から修正する手間を省けます。
チェックすべき主な箇所
本文テキスト・リンクテキスト・ボタンラベル・プレースホルダー・アイコンラベルなどは特に重要です。 背景画像の上のテキストは動的に変化するため、最も暗い部分と最も明るい部分の両方でチェックを推奨します。