色と文字の、読みやすさ実験室。
コントラスト比
チェッカー。
その色で、
言葉は届いている？
文字色と背景色を選んで、読みやすさの目安をすぐ確認。
無料・登録不要。入力した色はブラウザ内で処理し、保存・送信しません。操作イベントのみ計測します。
01 / 色を選ぶ
例：#767676 / #FFF。透明度なしの単色に対応。
02 / コントラスト比
4.54:1
判定は丸める前の値を使用します。
- 通常の文字 AA必要比率 4.5:1✓ 合格
- 通常の文字 AAA必要比率 7:1× 不合格
- 大きな文字 AA必要比率 3:1✓ 合格
- 大きな文字 AAA必要比率 4.5:1✓ 合格
- UI・意味のある図形 AA必要比率 3:1✓ 合格
03 / 文字で見る
通常の文字 / 16px
伝えたいことを、読みやすく。
色の組み合わせで、言葉の届き方は変わります。
大きな文字 / 24px
暮らしに、余白を。
04 / 読みやすさの調整案
片方の色を白・黒へ近づけた案です。色相をできるだけ保ち、通常の文字の基準を満たす組み合わせを探します。
よくある質問
AA・AAAとは？
WCAGの達成基準のレベルです。文字のコントラストはAA（1.4.3）で通常4.5:1以上、大きな文字3:1以上。AAA（1.4.6）では通常7:1以上、大きな文字4.5:1以上です。ここでは配色の基準だけを判定します。
「大きな文字」の定義は？
18pt（24 CSS px）以上、または太字で14pt（約18.67 CSS px）以上が目安です。細い書体や日本語の字形、実際の表示環境によって読みやすさも変わるため、実機でも確認してください。
UI・図形の判定は何を見る？
AAの非テキストのコントラスト（1.4.11）は、操作部品や状態を識別するために必要な視覚情報、意味のある図形に対し、隣接色との3:1以上を求めます。このツールでは選んだ2色のみを比較します。無効な部品や装飾などには例外があります。
これでサイト全体の適合性が分かる？
いいえ。透明度、写真、グラデーション、ホバー状態などは評価しません。ロゴ・装飾などの例外も自動判別しません。文字の大きさ、操作性、代替テキストなどを含めたサイト全体の監査ではありません。
読みやすさから、伝わるデザインへ。