カラーコントラストチェッカー
文字色と背景色の組み合わせを WCAG 2.2 の AA・AAA 基準でチェックできます。正確なコントラスト比、通常テキスト・大きなテキスト・UI コンポーネントの合否、共有用リンクをすぐに取得。無料でプライバシーも安心：処理はすべてブラウザ内で完結します。
プリセット
ライブプレビュー
大きな見出しテキスト（24px 太字）
16px の通常の本文テキストです。いろはにほへと ちりぬるを わかよたれそ つねならむ。十分なコントラストがあれば、ロービジョンや色覚特性のある人、直射日光の下でスマートフォンを見る人にも読みやすい文章になります。
14px の小さな文字 — 注釈などの細かい文字も通常テキストの基準を満たす必要があります。
コントラスト比の計算方法
WCAG ではコントラストを相対輝度で定義します。これは人の目が感じる色の明るさを 0（黒）〜 1（白）で表したものです。ContrastCheck は各色について次の処理を行います。
- 16 進の値を赤・緑・青の各チャンネルに分け、それぞれ 255 で割ります。
- 各チャンネルを線形化します。0.04045 以下の値は 12.92 で割り、それ以外は
((c + 0.055) / 1.055)^2.4で変換します。 - 目の感度に応じて重み付けします：
L = 0.2126·R + 0.7152·G + 0.0722·B
コントラスト比は (L_lighter + 0.05) / (L_darker + 0.05) で求められ、同じ色どうしの 1:1 から白地に黒の 21:1 までの値をとります。結果は四捨五入せずにしきい値と比較します：通常テキストは 4.5:1（AA）と 7:1（AAA）、大きなテキストは 3:1（AA）と 4.5:1（AAA）、UI コンポーネントとグラフィックは 3:1 です。
どのレベルを目指すべきか迷ったら、こちらをお読みください：WCAG AA と AAA のコントラスト、どちらを選ぶべき？
カラーコントラストに関するよくある質問
›良いコントラスト比とはどのくらいですか？
WCAG 2.2 のレベル AA では、通常の本文テキストで 4.5:1 以上、大きなテキストで 3:1 以上が必要です。レベル AAA では通常テキストが 7:1、大きなテキストが 4.5:1 に引き上げられます。コントラスト比は 1:1（同じ色）から 21:1（白地に黒）までの範囲です。
›WCAG における「大きなテキスト」とは？
標準の太さで 18 ポイント（約 24 CSS ピクセル）以上、または太字で 14 ポイント（約 18.66 CSS ピクセル）以上のテキストを指します。文字が大きいほど読みやすいため、大きなテキストのしきい値は低く設定されています。
›UI コンポーネントとグラフィックの 3:1 要件とは何ですか？
WCAG 達成基準 1.4.11「非テキストのコントラスト」では、操作可能なコントロールの視覚的な境界（入力欄の枠線、フォーカスリング、トグルの状態）や、コンテンツの理解に必要なアイコン・グラフの線などのグラフィックに 3:1 のコントラスト比を求めています。
›前景色と背景色の順番は結果に影響しますか？
影響しません。WCAG の計算式は常に明るい色の輝度を暗い色の輝度で割るため、前景色と背景色を入れ替えても比率は同じです。プレビューの見た目は変わりますが、数値や合否は変わりません。
›入力したデータはどこかにアップロードされますか？
いいえ。このツールはすべてブラウザ内で動作します。色が保存されるのはページの URL（?fg=…&bg=…）だけなので、特定の組み合わせをブックマークしたり共有したりできます。
›4.49:1 は 4.5:1 にほぼ近いのに、なぜ不合格なのですか？
WCAG のしきい値は厳密な最低値で、四捨五入はされません。ContrastCheck は正確な比率で判定し、表示値も切り上げずに切り捨てるため、4.49:1 と表示される組み合わせは通常テキストの AA で不合格になります。提案される色を使えば、わずかな調整で基準をクリアできます。
›APCA や WCAG 3 には対応していますか？
現時点では未対応です。ContrastCheck は WCAG 2.x のコントラスト比を採用しています。これは現在の法令や調達基準（米国 ADA ガイダンス、Section 508、EN 301 549 / 欧州アクセシビリティ法、JIS X 8341-3）が参照している基準です。