画像コントラストチェッカー

用途

WCAG コントラストチェッカーは通常 HEX を 2 つ入力しますが、実際のスクリーンショットでアクセシビリティを点検するデザイナーが持っているのは HEX ではなくピクセルです。本ツールは画像（スクリーンショット、ヒーローデザイン、賑やかな背景のロゴ）をアップロードし、任意の 2 点をクリックすると、その下の色を 1 ピクセルもしくは 3×3／5×5 平均でサンプリングし、WCAG 2.1 のコントラスト比を計算します。AA／AA-Large／AAA／AAA-Large、UI コンポーネント閾値（1.4.11）の合否も提示します。すべてブラウザ内で動作します。

使うべきタイミング

• ソースのないスクリーンショット（マーケサイト、競合 UI、PDF）を点検したいとき。
• 賑やかな写真背景のロゴで「背景色」が単一値でない場合の監査。
• グラデーション沿いや半透明テキストの背後で、最悪コントラスト点を探したいとき。
• デザインを組み直さずに UI の 2 状態（ボタン静止 vs ホバー）を素早く比較したいとき。

サンプリングの仕組み

1 ピクセルのサンプルは精確ですがノイジーです（アンチエイリアシング、JPEG ノイズ、サブピクセル描画など）。UI 用途では通常 5×5 平均がベスト：人間が説明する色を返し、クリック直下のピクセルそのものではありません。1px はロゴの縁や鋭い色境界の検査に。

よくある注意点

• アンチエイリアシング。 テキストの縁はデザイン意図にない色に平均化されます。文字のストロークの中央をクリックしてください。
• JPEG 圧縮。 圧縮が強い画像では平坦部に色ドリフトが出ます。5×5 平均が緩和します。
• 半透明レイヤー。 コントラストに効くのは描画されたピクセルで、ソース色ではありません。本ツールは描画ピクセルを読みます — まさに欲しい挙動です。
• 確認するのは色であって、意図ではない。 静止で AA を通り、別ショットでホバーが落ちるなら、両方アクセシビリティバグです。
• 画像スケーリング。 大きな画像はパフォーマンスのため縮小されます。サンプル値は表示ピクセルに準じます。極小要素のピクセル単位サンプルが必要ならアップロード前にクロップしてください。