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

前景色と背景色の WCAG コントラスト比をブラウザ内で確認し、通常文字と大きな文字の AA / AAA を判定します。

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

カラーコントラストチェッカーは、前景色と背景色の WCAG コントラスト比をブラウザ内でローカルに確認し、1:1 から 21:1 の比率と通常文字 / 大きな文字の AA / AAA 判定を表示します。

使い方

  1. 前景色と背景色を HEX、RGB、HSL、一般的な CSS 色名で入力します。
  2. リアルタイムのコントラスト比と AA / AAA 判定を確認します。
  3. プレビューで実際の文字の読みやすさを確認します。
  4. レポートをコピーしてデザイン連携、フロントエンド確認、アクセシビリティ記録に使います。

特徴

  • WCAG コントラストをローカル計算
  • 通常文字と大きな文字の AA / AAA を判定
  • 透明色は白背景で合成してから計算

利用する理由

  • 本文、ボタン、リンク、アイコン色の読みやすさをすばやく検証できる
  • デザインと実装のアクセシビリティ差分を減らせる
  • データを送信せずブラウザ内で確認できる

関連カラー工具

GIF作成

静止画や動画の断片から動くGIFを作成します。

画像サイズ変更

画像サイズを一括で変更し、ピクセルや比率指定、比率固定、ローカル保存に対応します。

画像を ICO に変換

画像を favicon やアプリアイコン向けの ICO に変換し、複数サイズを1ファイルにまとめられます。

SVG を PNG/JPG に変換

SVG を PNG または JPG に書き出し、サイズや背景色を設定してローカル保存できます。

SVG 最適化

ブラウザ内で SVG コードを最適化し、不要なメタデータを削除して軽量な SVG を出力します。

EXIF ビューア

ブラウザ内で画像の EXIF、GPS、カメラ情報、撮影パラメータを読み取ります。

画像メタデータ削除

ブラウザ内で JPEG、PNG、WebP 画像から EXIF、XMP、ICC などのメタデータを削除します。

画像パレット抽出

画像から主要色、比率、カラーパレットを抽出し、HEX、CSS、JSON としてローカル出力できます。

カラーピッカー

ブラウザ内で手動入力、画面、アップロード画像から色を取得し、HEX、RGB、HSL、HSV、CMYK、CSS 値を確認できます。

カラーコンバーター

ブラウザ内で HEX、RGB、HSL、HSV、HWB、LAB、LCH、CMYK、CSS キーワード間の色変換を双方向で行い、アルファにも対応します。

CSS グラデーションジェネレーター

ブラウザ内で linear-gradient、radial-gradient、conic-gradient を作成し、カラーストップ編集、ライブプレビュー、CSS コピーに対応します。

CSS ボックスシャドウジェネレーター

ブラウザ内で box-shadow のオフセット、ぼかし、拡散、透明度、角丸、inset を調整し、ライブプレビューと CSS コピーに対応します。

HTML カラーネーム一覧

ブラウザ内で HTML / CSS の命名色を検索・一覧表示し、色名、HEX、RGB をコピーできます。

favicon 生成

1枚の画像から favicon 一式、site.webmanifest、HTML 断片を生成します。

Gemini ウォーターマーク除去

Gemini の可視ウォーターマークをブラウザ内でローカル除去し、まとめて処理・保存できます。

画像を AVIF に変換

PNG や JPG などの画像を一括で AVIF に変換し、品質、縮尺、ZIP 保存に対応します。

PNG 圧縮

PNG のまま容量を圧縮し、縮尺や色数削減、プレビュー、ZIP 保存に対応します。

画像を WebP に変換

PNG や JPG などの画像を品質・縮尺を調整しながら一括で WebP に変換し、プレビューと ZIP 保存にも対応します。