コントラスト比チェッカー
文字色と背景色の WCAG コントラスト比を計算し、AA/AAA の合否を判定。アクセシブルな配色に。
このツールについて
コントラスト比チェッカーは、文字色と背景色の読みやすさを WCAG の基準で数値化します。計算はブラウザ内で完結し、入力した色を外部へ送信しません。ここでは合格ラインの早見と、数値を満たしていても見落としやすい注意点をまとめます。
合格ラインの早見
- 通常サイズの文字：AA＝4.5:1 以上／AAA＝7:1 以上。
- 大きい文字：AA＝3:1 以上／AAA＝4.5:1 以上。
- ボタンの枠・アイコン・グラフの色など UI 部品：3:1 以上。
「大きい文字」の目安
WCAG では、おおむね 18pt（約 24px）以上の通常文字、または 14pt（約 18.66px）以上の太字を「大きい文字」とみなします。同じ配色でも、文字サイズによって求められる比が変わる点に注意してください。
色だけで情報を伝えない
コントラスト比を満たしていても、「赤字＝エラー」のように色だけで意味を伝えると、色の見分けが難しい人には伝わりません。下線・アイコン・ラベルなど、色以外の手がかりも添えるのが WCAG の考え方（色の使用）です。
半透明は「重なった後の色」で判定
rgba() や半透明の重ね合わせでは、実際に画面で見える合成後の色でコントラストが決まります。半透明のまま判定すると実態からずれるため、背景と合成した不透明な色に換算してから入力してください。
使い方
- 文字色と背景色を入力(またはカラーピッカーで選択)します。
- コントラスト比とプレビューが即座に表示されます。
- AA/AAA(通常・大きい文字)の合否を ✓ / ✗ で確認します。
よくある質問
入力した色は外部に送信されますか？
いいえ。コントラスト比の計算はすべてブラウザ内で行われ、入力した色の値が外部サーバーへ送信されることはありません。
AA と AAA の違いは何ですか？
どちらも WCAG の適合レベルで、AAA の方がより厳しい基準です。通常サイズの文字では AA が 4.5:1 以上、AAA が 7:1 以上を求めます。一般的な Web サイトはまず AA の達成を目標にすることが多いです。
「大きい文字」とは具体的にどのくらいですか？
WCAG では、おおむね 18pt(約 24px)以上の通常文字、または 14pt(約 18.66px)以上の太字を「大きい文字」とみなします。大きい文字は AA で 3:1、AAA で 4.5:1 と、通常文字より緩い基準が適用されます。
どんな色の形式で入力できますか？
#RRGGBB や #RGB の 16 進数表記に加え、rgb(255, 255, 255) のような形式で入力できます。前景色と背景色を指定すると、その組み合わせの比が計算されます。
コントラスト比 21:1 とは何ですか？
純粋な黒(#000000)と純粋な白(#FFFFFF)の組み合わせで得られる最大値です。1:1 は同じ明るさで判別できない状態を表し、値が大きいほど読みやすくなります。
透明度(アルファ値)は考慮されますか？
本ツールは前景色と背景色そのものの比を計算します。半透明の色は、実際に重なって見える色に相当する不透明な値へ換算してから入力すると、より実態に近い判定になります。