画像の色抽出・コントラスト

ローカル画像のピクセルから色を抽出するか、色を直接入力します。HEX・RGB・HSL をコピーし、前景と背景をプレビューして WCAG 2 の文字コントラストを確認できます。

使い方

前景色・背景色を入力するか、画像を選びます。
ピクセルをクリックします。矢印キーや座標でも選択できます。
コントラストを確認し、色値をコピーするかレポートを保存します。

色とコントラストの範囲

#RGB、#RRGGBB、整数チャンネルの rgb(r, g, b)、hsl(h, s%, l%) に対応します。色相は 0–360、割合は 0–100 です。入力は不透明 sRGB 色です。HSL 表示は小数第1位に丸め、HEX／RGB は正確な 8 ビット値を保ちます。ブラウザーのデコードと Canvas の sRGB サンプルであり、ICC 校正や印刷校正は保証しません。

WCAG 2 の線形化 sRGB 相対輝度で計算します。通常文字 AA は 4.5:1、大きな文字 AA は 3:1、通常文字 AAA は 7:1 です。大きな文字は 18pt 以上、または太字 14pt 以上です。判定には丸め前の比率を使い、表示は丸めます。1 組の色だけを確認し、ページ全体の適合を認定するものではありません。

静止 JPEG／PNG／WebP 1 枚、8 MB・4 MP・各辺 4096px までです。形式・寸法を検証してから向きを反映してデコードします。画像のアップロード、永続保存、URL 取得は行いません。交換・削除・離脱でピクセルを解放し、編集で古いレポートと URL を無効化します。チェックポイント予算は 45 秒です。

よくある質問

透明なピクセルをそのまま不透明な文字色として使えますか？

見た目は背景によって変わります。選択した背景色と合成してからコントラストを計算します。完全に透明なピクセルに隠れた RGB を可視色として表示しません。