⚡すべてのツール 💻開発者ツール 📝テキストツール 🎨デザインツール 🖼️画像・メディア 🔢計算ツール 🔒セキュリティ 📄PDFツール 📐単位変換

カラーコントラスト分析と色覚模擬

背景と文字のコントラスト比をWCAG 2.1基準で即時計算し、配色の自動修正を提供。ドラッグ＆ドロップ画像からの色抽出や4つの色覚障害フィルター表示をサポートします。

⚖️ カラーコントラスト解析 (WCAG 2.1)

文字色

背景色

コントラスト比

12.3:1

WCAG 2.1 AA

PASS

WCAG 2.1 AAA

PASS

コンポーネントリアルタイムプレビュー

これは読みやすさをテストするためのサンプルテキストです。優れたコントラストは視覚障害者を含むすべてのユーザーを助けます。

✨ スマートコントラスト修正

ワンクリックで文字の明るさを自動調整し、AA（4.5:1）レベルに合格させます

👁️ 画像色盲シミュレータ

📤 画像をドラッグ＆ドロップするか、クリックしてアップロード PNG, JPG, WebP 対応。ブラウザ上で安全にローカル処理されます。

シミュレーションタイプ

📚 ウェブコンテンツ色彩アクセシビリティガイド (WCAG 2.1)

AAレベル：通常のテキストは 4.5:1 以上、大きなテキスト（18pt以上）は 3:1 以上が必要です。
AAAレベル：通常のテキストは 7.0:1 以上、大きなテキストは 4.5:1 以上が必要です。
相対輝度（Luminance）は色の見た目の明るさで、0（最も暗い黒）から 1（最も明るい白）までの値です。

使い方

1 カラーコントラスト分析と色覚模擬を開き、処理する内容を入力、貼り付け、または選択します。
2 目的に合わせてオプションと出力形式を調整します。
3 結果を確認し、必要に応じてコピーまたはダウンロードします。

主な利用シーン

背景と文字のコントラスト比をWCAG 2.1基準で即時計算し、配色の自動修正を提供。ドラッグ＆ドロップ画像からの色抽出や4つの色覚障害フィルター表示をサポートします。日常業務、開発、学習、簡易確認に利用できます。

プライバシーとデータ処理

このツールはブラウザで動作します。機密データを扱う前に、端末とブラウザの安全性を確認してください。

コントラスト比チェッカー：WCAG の AA・AAA 基準と色覚シミュレーション

このコントラスト比チェッカーは、WCAG 2.1 の計算式で文字色と背景色のコントラスト比を求めます。RGB を「相対輝度」に変換し、（明るい方 + 0.05）÷（暗い方 + 0.05）で 1:1 から 21:1 の値を算出します。白地に黒文字が最大の 21:1、同じ色同士は 1:1 です。カラーピッカーか HEX コードで色を指定すると、プレビューの文字とボタンにすぐ反映されます。

WCAG の AA レベルは通常のテキストで 4.5:1 以上、AAA レベルは 7:1 以上が必要です。大きな文字（18pt 以上、または 14pt の太字）はそれぞれ 3:1 と 4.5:1 に緩和されます。画面の AA／AAA バッジは通常テキストの基準で判定しています。比率は四捨五入できません。白地の #777777 は 4.47:1 で、ほぼ届いているように見えても不合格です。#767676 なら 4.54:1 で AA を満たし、#595959 は約 7.00:1 で AAA に届きます。

基準を満たさない場合は「スマート修正」を押してください。色相の方向を保ったまま、暗い背景なら文字色を明るく、明るい背景なら暗くして、AA の 4.5:1 に届くまで調整します。届かない場合は黒または白に置き換えます。使える色をすばやく見つける近道ですが、ブランドカラーは最終的にデザイナーが微調整するのがおすすめです。

右側の色覚シミュレーターでは、画像をアップロードするかサンプル画像を使い、1型（P型）、2型（D型）、3型（T型）色覚と全色盲の見え方をカラーマトリクスで再現します。グラフや地図、ステータス色が色だけで区別されていないかを確認できます。画像は 800×600 以内に縮小してブラウザの Canvas で処理し、アップロードはしません。あくまで近似であり、実際の見え方には個人差があります。