カラーコントラストチェッカー
2 色を入力すると、WCAG コントラスト比と AA/AAA の判定がすぐに分かります。
前景色と背景色を hex または RGB で入力し、WCAG コントラスト比を即座に計算。AA/AAA の結果、テキストプレビュー、任意の調整提案を表示します。
このカラーコントラストチェッカーの使い方
前景色と背景色を入力または貼り付けます。有効な入力は大文字 hex に正規化され、WCAG コントラスト比が即座に計算され、AA と AAA の閾値に対する合格/不合格が表示されます。修正案、URL 共有、リセットが利用できます。
WCAG コントラスト比の閾値
WCAG 2.x では通常テキスト AA は 4.5:1 以上、大きい文字 AA は 3:1 以上、通常テキスト AAA は 7:1 以上、大きい文字 AAA は 4.5:1 以上が求められます。本ツールは 4 つの結果を常に表示します。
対応する色形式
#RGB、#RRGGBB、rgb(r,g,b)、カンマ区切りの r,g,b を入力できます。チャンネルは 0–255 の整数。アルファ、8 桁 hex、HSL/HSLA、CSS 名前付き色は v1 非対応です。
合格と不合格の意味
合格は計算された比率がそのレベルの閾値以上であること、不合格は未満であることを意味します。色だけに頼らないよう、ラベルとアイコンも表示します。
よくある質問
アルファとグラデーションが非対応なのはなぜですか？
v1 は完全に不透明な sRGB 色のみを評価します。アルファ合成やグラデーションには本ツールがまだモデル化していない合成ルールが必要なため、rgba()、8 桁 hex、グラデーション分析は MVP 外です。
コントラスト比はどのように計算されますか？
不透明 sRGB に対する WCAG 相対輝度式を使用します。各チャンネルを線形化し輝度を求め、(明るい方 + 0.05) / (暗い方 + 0.05) を適用。表示は小数第 2 位まで、閾値判定は未丸め値を使用します。
修正案を提案とは何ですか？
選択した前景または背景色を、黒または白方向の明度パス上で決定的に移動し、選んだ WCAG レベルを満たす最も近い適合 hex と結果比率を返します（存在する場合）。
特定の色の組み合わせを共有できますか？
はい。有効な前景、背景、文字サイズは URL クエリ（例: ?fg=000000&bg=FFFFFF&size=normal）に同期され、結果へ直接リンクできます。
色は保存されますか？
計算はすべてブラウザ内で実行されます。最後の有効な色の組は利便性のため localStorage に保存される場合があります。リセットで入力、URL、保存状態を消去できます。