配色コントラストチェッカー

文字色と背景色のコントラスト比を計算し、WCAG の AA・AAA を判定します。満たさないときは最も近い修正候補を提案します。

✨ できること

  • WCAG 2.x の相対輝度からコントラスト比を小数2桁で計算し、入力した瞬間に更新
  • 通常文字の AA / AAA、大きい文字の AA / AAA、UI 部品の 3:1 を同時に判定
  • 実際の色で本文・見出し・ボタンをプレビュー。読みづらさを目で確認できる
  • 満たさないときは明度だけを動かして基準を満たす「最も近い色」を提案。クリックで採用

🪄 こんなときに

サイトの配色を決めるとき

ブランドカラーのまま明度だけ調整して、読める組み合わせに寄せる。

アクセシビリティ対応の確認

公共サイトやフォームで求められる AA を満たしているかを一目で確認。

ボタンやリンクの色決め

文字だけでなく、境界線やアイコンに必要な 3:1 も同時に見られる。

デザインレビューの共有

判定結果を URL にしてそのまま共有。相手の画面でも同じ配色が開く。

🔒 プライバシー

色の解析と判定はすべてブラウザ内で行われ、サーバーには送信されません。URL共有の短縮を使うときだけ、共有URL(指定した色を含む)が短縮サービスに送られます。

❓ よくある質問

WCAG の AA と AAA は何が違いますか?

AA は多くの国のガイドラインや調達基準で求められる標準的な水準で、通常の文字は 4.5:1 以上、大きい文字は 3:1 以上が必要です。AAA はより高い水準で、通常の文字 7:1、大きい文字 4.5:1 を求めます。まず AA を満たし、本文の可読性を高めたい箇所で AAA を目指すのが実務的です。

コントラスト比はどう計算していますか?

WCAG 2.x の定義どおり、各色の相対輝度 L を求めて (L1 + 0.05) ÷ (L2 + 0.05) で計算します(L1 が明るい方)。相対輝度は sRGB の各チャンネルを 0〜1 に正規化し、0.03928 以下なら 12.92 で割り、それ以外は ((c + 0.055) / 1.055) の 2.4 乗に変換したうえで、0.2126R + 0.7152G + 0.0722B で合成した値です。比は 1:1〜21:1 の範囲になります。

「大きい文字」の定義は?

18pt(約 24px)以上、または 14pt(約 18.66px)以上の太字です。この条件を満たす文字は AA で 3:1、AAA で 4.5:1 まで緩和されます。日本語のように字画が多い書体では、基準を満たしていても実際には読みづらいことがあるため、本文には通常文字の基準を使うのが安全です。

文字以外にもコントラストは必要ですか?

必要です。WCAG 2.1 の達成基準 1.4.11「非テキストのコントラスト」では、ボタンの境界線、フォームの枠、アイコン、グラフの要素など、意味を伝える図形と UI 部品に隣接色との 3:1 以上を求めています。このツールでは同じ 2 色の比から 3:1 の判定も同時に表示します。

🔗 関連ツール

色を指定

#aabbcc / #abc / rgb(0,0,0) / hsl(210,50%,40%) で入力できます

コントラスト比

コントラスト比
- : 1

WCAG の判定

プレビュー

大きい文字は 18pt(約 24px)以上、または 14pt(約 18.66px)以上の太字を指します。

修正候補