WCAGコントラストチェッカー — AA/AAA比率
文字色と背景色を選ぶと WCAG コントラスト比と、通常/大きい文字それぞれの AA・AAA 合否がわかります。手順：色を選ぶか HEX を入力 →「判定」→ 比率とバッジを確認 → 入れ替えや提案を試す。例：#767676 を #ffffff の上に置くと約 4.54:1 — AA 通常文字は合格、AAA 通常文字は不合格。色データはアップロードされません。
使い方
カラーピッカーまたは HEX 入力で前景と背景を指定します。sRGB を相対輝度に変換し、コントラスト比を算出。AA/AAA（通常/大きい文字）の合格/不合格を表示します。色の入れ替え、概要コピー、コントラスト不足時の提案適用が可能です。
知っておくべきルール
WCAG コントラストは色相だけでなく相対輝度に基づきます。比率が想定と違うときは次を確認してください。
- 相対輝度 L は sRGB チャンネルを WCAG の線形化曲線で変換して求めます。比率 = (明るい L + 0.05) / (暗い L + 0.05)。
- 閾値：AA 通常文字 4.5:1、AA 大きい文字 3:1、AAA 通常文字 7:1、AAA 大きい文字 4.5:1。1 つの比率で 4 バッジすべてを判定します。
- 不透明 sRGB の HEX（#RGB / #RRGGBB）のみ対応。無効な HEX はエラー表示。前景と背景が同じ場合は 1:1 で全レベル不合格です。
- プライバシー：色はこのタブ内でローカル処理され、サーバーには送信されません。
例
サンプル読込：前景 #767676、背景 #ffffff で約 4.54:1。AA 通常文字は合格（4.5:1 以上）、AA 大きい文字は合格（3:1 以上）、AAA 通常文字は不合格（7:1 以上）、AAA 大きい文字は合格（4.5:1 以上）。色を入れ替えると比率の変化が確認できます。
こんなときに
- UI デザイン：納品前に本文・ラベルとブランド背景のコントラストを確認。
- ボタン・チップ：白文字 on カラー、またはその逆が AA 通常/大文字を満たすか検証。
- ダークモード：明/暗サーフェスを入れ替え、補助テキストが 4.5:1 または大文字 3:1 を維持するか確認。
Frequently asked questions
WCAG のコントラスト閾値は？
AA 通常文字は 4.5:1 以上、AA 大きい文字（18 pt 通常または 14 pt 太字以上）は 3:1 以上、AAA 通常文字は 7:1 以上、AAA 大きい文字は 4.5:1 以上です。このページでは 4 つのバッジを一度に表示します。
大きい文字とは？
大きい文字は読みやすいため、より低いコントラストでも許容されます。WCAG では 18 pt 以上の通常字、または 14 pt 以上の太字が「大きい文字」です。プレビューに大きい行と通常行の両方を表示しています。
色データは外部に送られますか？
いいえ。計算はすべてブラウザ内で行われ、色の値は送信されません。
配色提案の使い方は？
4.5:1 を下回る場合、AA 通常文字を満たす前景または背景の明るさ調整案を示すことがあります。白/黒へ混ぜた起点色であり、ブランドカラーの最終案ではありません。
ブランドカラートークンとの関係は？
任意の文字/背景の組み合わせを検証するのに使えます。セマンティックトークン付きのブランドパレット全体はブランドカラートークンツールへ。写真から色を拾う場合は画像から色抽出ツールも利用できます。
Related tools
お問い合わせ・フィードバック
分かりにくい点、不具合、不足があれば下にメッセージを書いてください。ツールに関する内容はすべて確認します。