カラーパレット抽出&コントラストチェッカー

画像から配色を抽出

画像内でよく使われている色を自動で抽出します。

＋

クリックして画像を選択、またはドラッグ&ドロップ

JPEG / PNG / WebP に対応

画像はサーバーに送信されず、ブラウザ内だけで処理されます。

前景色・背景色のコントラスト比を計算し、WCAG AA/AAA基準に適合するか判定します。上のパレットから「文字色に使う」「背景色に使う」で反映することもできます。

文字色(前景)

背景色

サンプルテキスト Aa

この配色で本文がどう見えるかのプレビューです。The quick brown fox.

AA・通常文字(4.5:1以上)-

AA・大きな文字(3:1以上)-

AAA・通常文字(7:1以上)-

AAA・大きな文字(4.5:1以上)-

Web Content Accessibility Guidelines(WCAG)が定める、文字と背景の見やすさの基準です。「大きな文字」は18pt(約24px)以上、または太字14pt(約18.5px)以上が目安です。AA基準は一般的な達成目標、AAAはより厳しい基準です。

アップロードした画像を縮小してピクセルごとの色を集計し、近い色同士をまとめたうえで出現頻度が高い色を上位6色抽出しています。外部APIやライブラリは使わず、Canvas APIだけで完結しています。

アイキャッチ画像のサイズ調整には画像圧縮・リサイズツールもどうぞ。