コントラストチェッカー
2 色の WCAG コントラスト比を算出し、通常文字 / 拡大文字ごとの AA・AAA 合否をバッジで表示。プレビュー付きで、処理はすべてブラウザ内です。
Aa — The quick brown fox jumps over the lazy dog. 0123456789
Aa — Large & bold sample 24px
WCAG のしきい値 — 通常文字:AA ≥ 4.5、AAA ≥ 7。拡大文字(≥ 24px、または ≥ 18.7px の太字):AA ≥ 3、AAA ≥ 4.5。
このツールは完全にブラウザ内で動作します。データは端末から出ず、サーバーへアップロードされることはありません。
使い方
- 1前景色に HEX か rgb() を入力するか、カラーピッカーで選びます。
- 2同じく背景色を設定します。
- 3コントラスト比と AA / AAA バッジを確認するか、プリセットをタップします。
- 4プレビューで実際の見え方を自分の目で確かめます。
コントラストチェッカー
前景色と背景色(#333 や #1F2937 のような HEX、rgb()/rgba() も可)を入力すると、小数第 2 位までの WCAG コントラスト比と、重要な 4 つのしきい値(AA と AAA、通常文字と拡大文字)の合否バッジがすぐ出ます。プレビューでは実際の色で本文と大きめの文字サンプルを確認できます。
計算は WCAG 2.x 公式の相対輝度の式で、W3C のチェッカーと同じものです — ここの 4.5 はどこでも 4.5 です。プリセットには 4.54:1 のぎりぎりのグレー×白の組み合わせがあり、AA のラインがどれだけ厳しいか体感できます。
よくある質問
合格に必要なコントラスト比は?
WCAG 2.x では通常の本文は AA で 4.5:1、AAA で 7:1。大きめの文字(24px 以上、または 18.7px 以上の太字)は AA で 3:1、AAA で 4.5:1 です。UI 部品や図形は 3:1 が基準です。
コントラスト比はどう計算していますか?
sRGB チャンネルを線形化して相対輝度 L = 0.2126·R + 0.7152·G + 0.0722·B を求め、比 = (明るい方の L + 0.05) / (暗い方の L + 0.05) とします。WCAG 2.x 仕様書の式そのもので、W3C の公式チェッカーと一致します。
半透明の色はどう扱われますか?
alpha が 1 未満の rgba() は白にフラット化してから計算します。WCAG 自体に透明度の概念はないため、正式な数値が必要なら実際の背景に合成した不透明色を入力してください。
関連ツール
ツールを埋め込む
1 行であなたのサイトにツールを。訪問者のブラウザ内で動きます。
<iframe src="https://zoyku.com/ja/tools/contrast-checker?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — contrast-checker" loading="lazy"></iframe>