WCAG Contrast Checker
WCAG Contrast Checker — ブラウザで動作します。入力は保存されません。
WCAGコントラスト
値を入力してから「計算する」を押してください。
使い方
- 前景（テキスト）HEXと背景HEXを入力します。初期は#111111と#ffffffです。
- 計算を押すとサンプル文のプレビュー、対比率、通常テキスト・大きなテキストの等級が出ます。
- 色を入れ替えるには色を入れ替えを押してから再計算します。
- 等級が不足ならHEXを少し暗くまたは明るく変えて再計算します。
- リセットは初期の白黒組み合わせに戻します。不透明HEXだけ対応します。
ポイント
WCAG色コントラスト検査はウェブアクセシビリティで本文・ボタン文字が背景とどれだけ区別されるかを見る指標です。相対輝度（relative luminance）で対比率を求めたあとWCAG 2.x基準と比べます。通常テキストはAA 4.5:1、AAA 7:1、大きなテキスト（約18pt以上または14pt太字）はAA 3:1、AAA 4.5:1です。ウェブアクセシビリティ本文・ボタン文字が背景と区別されるかWCAG 2対比率とAA・AAAを見る色コントラスト検査器です。アクセシビリティ検収で本文色と背景HEXの対比率・AA・AAAを素早く見る検査器です。最終的な法的判定ではありません。
結果は参考用計算で、最終アクセシビリティ審査・法的適合の代わりにはなりません。アルファがある半透明色、グラデーション、画像上のテキストはこの公式だけでは足りないことがあります。計算はブラウザ内だけで行われます。相対輝度公式は不透明sRGB HEXだけ仮定します。半透明オーバーレイ・写真上の文字は実際と違うことがあります。大きなテキストと通常テキストの基準が違うので、見出し色と本文色は別に計算するのがよいです。
計算例
前景#111111、背景#ffffffを計算すると対比率が約19:1水準で通常・大きなテキストともAAA通過に近いです。薄い灰色#9ca3afを白い背景に載せると通常テキストがAA不足になりやすいです。色を入れ替えを押すと背景が暗くなりプレビューの印象が変わります。#2563eb文字を#ffffffの上に載せると対比率が中盤にとどまり、通常テキストAAをぎりぎり超えるか不足することがあります。より暗いブルーに変えてみてください。#6b7280文字/#f9fafb背景は対比率が低く通常テキストが不足しやすいです。文字を#111に変えるとAAAに近づきます。
よくある質問
WCAGの大きなテキスト基準はどう適用しますか？
18pt以上または14pt太字に相当する緩和基準（3:1 / 4.5:1）を大きなテキスト欄に表示します。大きなテキスト欄は見出し・18pt以上に相当する緩和基準です。18pt・14pt太字の仮定は大きなテキスト欄にだけ適用されます。
WCAG AAA対比率はいくらですか？
通常テキスト7:1、大きなテキスト4.5:1以上です。AAはそれぞれ4.5:1と3:1です。AAAは本文7:1なのでブランドの薄い色はよく不足します。ブランドパステルはAAAをよく超えません。
透明アルファチャネルHEXもコントラスト計算できますか？
不透明HEXだけ対応します。透明度は対応しないので合成後の最終HEXを入れてください。半透明は合成後のHEXを入れてください。
色コントラストプレビューはどんな文ですか？
同じ前景・背景でサンプルテキストSample 가나다を見せます。プレビューはサンプル文にすぎず、実際のコンポーネントサイズと違うことがあります。
この検査は法的アクセシビリティ適合を保証しますか？
参考用計算です。最終審査は別に行ってください。法的適合判定はこの数字だけで断定しないでください。審査チェックリストをこの数字だけで代替しないでください。
前景と背景を一度に変えられますか？
色を入れ替えボタンが2つのHEXを入れ替えます。計算を再押ししてください。色を入れ替えでダークモード組み合わせもすぐ比べられます。
最終確認日: 2026-09-04