配色チェッカー（コントラスト比・補色・色覚シミュレーション）
文字色と背景色を入れると、WCAG 2.1 のコントラスト比とAA・AAAの合否を判定し、基準を満たす最も近い色まで提案します。補色・類似色・トライアドなど色相環からの配色パターンとHEX／RGB／HSLの変換、1型・2型・3型の色覚とグレースケールでの見え方の比較も同じ画面で行えます。
読み込み中...
ABOUT
配色チェッカー（コントラスト比・補色・色覚シミュレーション）について
配色チェッカーは、色を1つ決めたあとに必要になる確認を1画面でまとめて行うツールです。文字色と背景色のコントラスト比を WCAG 2.1 の基準で判定し、基準に届かない場合は色相と彩度を保ったまま明度だけを変えた「合格する最も近い色」を示します。補色・類似色・トライアドなど色相環から取る配色パターンと HEX／RGB／HSL の変換、1型（P型）・2型（D型）・3型（T型）の色覚とグレースケールでの見え方の比較も同じ画面で確認できます。
配色チェッカー（コントラスト比・補色・色覚シミュレーション）の使い方
- 1上の入力欄に文字色（基準色）を入れる。カラーピッカーのほか、#4F46E5・rgb(79,70,229)・hsl(243,75%,59%) のどの書き方でも読み取る
- 2背景色を入れて「コントラスト」タブで比とAA・AAAの合否を見る（不合格なら合格する近い色が提案される）
- 3「配色パターン」タブで補色・類似色・トライアドなどの組み合わせとカラーコードを確認する（色見本をクリックするとコピーできる）
- 4「色覚シミュレーション」タブで、グラフや資料に使う色をまとめて入れて、取り違えやすい組み合わせがないか確かめる
- 5共有URLをコピーすると、同じ色の判定結果をそのまま他の人に渡せる
使いやすい場面
- サイトやスライドの文字色が背景に対して読みにくくないかを、公開前に数値で確かめる
- ブランドカラーを本文に使いたいが、そのままでは薄い場合に、印象を変えずに濃さだけ調整する
- ロゴやバナーの差し色を決めるために、基準色の補色や分裂補色を出す
- グラフの系列色が、色覚タイプによって同じ色に見えてしまわないかを確認する
- 白黒で印刷・コピーされる資料の色分けが、明度の差だけで区別できるかを確かめる
- デザインから受け取った HEX を RGB や HSL に変換して、CSS やスライドに貼る
利用時のポイント
- コントラスト比は WCAG 2.1 の相対輝度から計算します。白と黒の組み合わせが最大の 21.00:1 です。
- 合否の基準は、通常の文字が AA 4.5:1・AAA 7:1、大きい文字（24px以上、または太字18.66px＝約19px以上）が AA 3:1・AAA 4.5:1、ボタンの枠線やグラフの色分けなど文字以外の要素が 3:1 です。
- 比は切り捨てで表示し、判定も同じ値で行います。4.49:1 が「4.5」と表示されて合格に見えることはありません。
- 提案する色は、色相と彩度を固定して明度だけを動かし、4.5:1 を満たす最も近い色を明るい方向・暗い方向の両方から探したものです。
- 配色パターンは画面（光の三原色）の色相環＝HSL の色相を回して作るため、赤の補色はシアンになります。絵の具のように色料で混ぜる色相環では、赤の補色は緑とされます。補色は180°、類似色は±30°、分裂補色は150°と210°、トライアドは120°と240°、テトラードは90°・180°・270°です。
- CMYK はカラープロファイルを使わない単純変換の参考値です。印刷所への入稿値としては使えません。
- 色覚シミュレーションは Machado ほか（2009）の変換行列を重度1.0で適用したものです。実際の見え方には個人差があり、最終確認は当事者や専用ソフトで行ってください。
- 見分けやすさの判定には CIEDE2000 の色差を使い、10 を下回る組み合わせを「取り違えやすい」として表に出します。
- 判定はすべてブラウザ内で計算しており、入力した色がサーバーに送信されることはありません。
こんなときに使えます
配色チェッカー（コントラスト比・補色・色覚シミュレーション）は、次のような場面の答えになります。
- この文字色と背景色の組み合わせは読みにくくない？
- コントラスト比が足りないとき、どの色にすればいい？
- この色の補色（反対色）は何色？
- グラフの色分けが色覚タイプによって同じに見えないか確かめたい
- HEXをRGBやHSLに変換したい
- 白黒で印刷しても区別できる配色にしたい
よくある質問
- コントラスト比はいくつあれば十分ですか？
- 本文サイズの文字なら 4.5:1 以上が目安です（WCAG 2.1 の AA）。24px以上の大きい文字や太字18.66px以上なら 3:1 で足ります。より厳しい AAA は通常の文字で 7:1、大きい文字で 4.5:1 です。ボタンの枠線、入力欄の境界、グラフの塗り分けといった文字以外の要素も 3:1 以上が求められます。
- ブランドカラーが基準を満たしません。色を変えるしかないですか？
- 多くの場合、色相と彩度はそのままで明度だけを動かせば足ります。このツールは 4.5:1 を満たす最も近い色を明るい方向・暗い方向の両方から探して提案するので、見た目の印象を保ったまま直せます。それでも届かない場合は、ブランドカラーは見出しや面の色に使い、本文は黒に近い色にするという分け方が現実的です。
- 補色はどうやって求めるのですか？
- 色相環で正反対にある色、つまり色相を180°回した色です。たとえば色相240°の青の補色は60°の黄になります。補色どうしは最も目立つ組み合わせですが、同じ面積で並べるとぶつかって見えるため、片方を差し色に絞るか、補色の両隣を使う分裂補色（150°と210°）にすると扱いやすくなります。
- 色覚タイプによって見え方が違うと、何が問題になりますか？
- 日本人男性のおよそ5%が1型か2型の色覚で、赤と緑が近い色に見えます。グラフを赤と緑で塗り分けると、その人たちには同じ色の帯に見えてしまいます。このツールは色を並べて4つの見え方で表示し、CIEDE2000 の色差が10を下回る組み合わせを表に出すので、どのペアが危ないかがその場で分かります。
- 色で区別できない場合はどうすればいいですか？
- 色以外の手がかりを足すのが確実です。折れ線なら実線・破線・点線で分ける、棒グラフなら模様を入れる、凡例に頼らずグラフに直接ラベルを置く、といった方法があります。色を残したまま改善したい場合は、色相ではなく明度を離してください。明度差があれば、白黒コピーでも色覚タイプが違っても区別できます。
- HEX・RGB・HSL はどう使い分けますか？
- HEX（#4F46E5）はデザインツールとの受け渡しに、RGB は画面表示の計算に、HSL は色を調整するときに向きます。HSL は色相・彩度・明度が分かれているため、「同じ色のまま少し暗くする」「色味だけずらす」といった操作が1つの数値で済みます。このツールの配色パターンとトーンも HSL で計算しています。
ARTICLES
配色チェッカー（コントラスト比・補色・色覚シミュレーション）の使い方ガイド
画像・デザイン色覚多様性に配慮した配色｜色だけで伝えない資料の作り方赤で「注意」、緑で「正常」と塗り分けた資料が、人によっては同じ色に見えていることがあります。見え方の違いは珍しいものではなく、男性では20人に1人ほどと言われます。この記事では、見分けにくい色の組み合わせと、色以外の手がかりを足して誰にでも読める資料・グラフにする方法をまとめます。画像・デザインブランドカラーの決め方｜ロゴの色が与える印象と選ぶ手順有名なサービスのロゴは、形をぼかしても色だけで見当がついてしまいます。それは色が「意味」ではなく「目印」として記憶されているからです。この記事では、色に持たせられる役割と、迷わずブランドカラーを1色に絞るための手順をまとめます。仕組み解説色の残像錯視とは｜白黒画像に色がついて見える仕組みと作り方色を反転した画像をしばらく見つめてから白黒画像に切り替えると、白黒のはずの写真に色がついて見えます。この記事では、この「負の残像」が起きる理由と、うまく見えるようにするコツ、自分の写真で錯視画像を作る手順をまとめます。画像・デザイン補色とは｜色相環で見る反対色の関係と、配色で失敗しない使い方補色は「色相環で正反対にある色」のことですが、赤の反対がシアンだと説明されることも、緑だと説明されることもあります。この記事では、2つの説明が食い違う理由と、代表的な組み合わせ、配色で使うときの面積比のコツを整理します。
Special Thanks