WCAGコントラストチェッカー

文字色と背景色を入力するとコントラスト比とWCAG AA・AAA通過判定を即時表示します。デザインのアクセシビリティ確認に。

前景 (文字)

背景

– :1

–

通常テキスト — Sample 12345

大きいテキスト — 見出し 24px

太字大きい — Bold 18.66px

通常テキスト < 18pt または < 14pt 太字

AA 4.5:1 –

AAA 7:1 –

大きいテキスト ≥ 18pt または ≥ 14pt 太字

AA 3:1 –

AAA 4.5:1 –

UIコンポーネントボタン・アイコン・境界線

AA 3:1 –

使い方

2色を入力

前景(文字)色と背景色をカラーピッカーで選択またはHEX/RGBで直接入力してください。

コントラスト比を確認

結果カードに1:1から21:1までの比率とプレビューテキストが表示されます。

AA・AAA通過判定

通常テキスト(4.5:1、7:1)と大きいテキスト(3:1、4.5:1)に対するAA・AAA結果が並列表示されます。通過は緑、不合格は赤。

WCAGコントラスト基準は？

WCAG 2.1基準で通常テキスト(<18ptまたは<14pt太字)はAA 4.5:1 / AAA 7:1、大きいテキスト(≥18ptまたは≥14pt太字)はAA 3:1 / AAA 4.5:1です。UIコンポーネントやグラフィックは別途3:1基準が適用されます。

比率はどう計算されますか？

2色の相対輝度(L1、L2)を求め、`(明るい色 + 0.05) / (暗い色 + 0.05)`で計算します。結果は1:1(同色)から21:1(黒/白)の範囲です。

透明度のある色は？

コントラスト比は不透明色同士で比較するのが標準です。透明色は実際に合成された色(背景と混色した結果)を入力してください。

「大きいテキスト」の定義は？

18pt(24px)以上、または14pt(18.66px)以上の太字が大きいテキストです。それ以上の場合、AA・AAAともに低い比率でも通過できます。

サーバーに送信されますか？

いいえ。すべての計算はブラウザ内で行われ、入力した色が外部に送信されることはありません。