サイトの配色をAIで決める｜3色の役割とコントラスト確認手順

結論: 色の案はAIに出してもらい、使えるかどうかは計算ツールの数字で決めます。

• これから3色を決めたい → AIにHEX（#から始まる色の番号）付きで頼む
• AIの案が読みやすいか確かめたい → WebAIM Contrast Checker
• 公開済みのページの色を直したい → Chrome DevTools
• 合格ラインは、普通の文字が4.5:1、大きな文字とボタンの枠が3:1

ロゴの色はもう決まっている。なのに背景、見出し、ボタンの色が決まらない。カンプを開いたまま、カラーピッカーの前で手が止まっていませんか。

「このホームページの基本となる背景色や見出しの色などを考えていますが、なかなかしっくりきません。」 — 企業ブログ（2024年11月）

AIに頼めば、案はすぐ出てきます。ただ、その案が読みやすいかどうかは別の話です。

ここでは「AIで案を出す → 数字で確かめる → 直す」の3段階を順に書きます。

この記事の目次

1. メイン・サブ・アクセントは何%ずつ使う？
2. AIに配色を頼むときの指示文（コピペ用）
3. 文字と背景のコントラスト比、何対何なら合格？
4. コントラスト比の確認ツールはどれを使う？
5. 手順：AIの配色案を数字で確かめて直す
6. コントラストが足りないときの直し方
7. よくある質問
8. この記事のまとめ

メイン・サブ・アクセントは何%ずつ使う？

面積の大きい順に「サブ（背景）＞メイン＞アクセント」。これだけ覚えておけば足ります。

「70:25:5」は、エックスサーバーなど制作会社の解説記事でよく使われる目安です。規格ではありません。比率がぴったりでなくても問題ありません。

困るのは、記事によって色の呼び方がばらばらなことです。この記事ではこう呼びます。

← 表は横にスクロールできます →

MDNの解説も、まずサイトを表す色を1つ決め、色数はなるべく絞るよう勧めています。面は白・黒・グレーで埋めて、色は強調したい場所にだけ置く。考え方はこれで全部です。

AIに配色を頼むときの指示文（コピペ用）

伝えるのは「業種・誰に・どんな印象・固定したい色・出力の形」の5つです。

「HEXで」の一言は外さないでください。印刷物向けの事例をもとにすると、CMYK（印刷用の色の数字）で返ってくることがあります。

Webサイトの配色を3色で提案してください。
・業種：〇〇（例：地域の整体院）
・見てほしい人：〇〇（例：30〜50代、肩こりに悩む会社員）
・与えたい印象：〇〇（例：清潔、落ち着き、相談しやすい）
・固定する色：ロゴの色 #〇〇〇〇〇〇 は変えない
・出力：サブ（背景）・メイン・アクセントの3色をHEXで。
  それぞれの使う場所と、その色を選んだ理由。
  案は3パターン。

理由まで書かせておくと、クライアントへの説明にそのまま使えます。

「メインカラー、アクセントカラーともに複数提示し、またその色の理由も回答してくれています。」 — Zennの記事（2024年8月）

最初の案で決めなくて大丈夫です。追加の注文を重ねて配色を詰めていった企業ブログの事例もあります。

「かなりいい感じですが、少し単調ですね。。。飽きてきたので、ChatGPTのモデルをo3-mini-highに変更し、追加の要求をしました」 — 企業ブログの担当者（2025年2月）

「提案された色をそのままPowerPointやCanvaでスポイトして使ってもいいし、あくまで「色選びの参考値」として考慮しても十分意味はあるなと。」 — note（2025年7月）

文字と背景のコントラスト比、何対何なら合格？

普通の文字は4.5:1以上。大きな文字とボタンの枠は3:1以上です。

基準の出どころはWCAG 2.2（W3Cが決めた、Webの読みやすさの国際ガイドライン）です。上の数字は、まず目指すAAレベルのもの。「大きな文字」は18ポイント以上、または14ポイント以上の太字を指します。

← 表は横にスクロールできます →

px（画面上の大きさの単位）で言うと、WebAIMの説明ではおおよそ24px、太字なら18.66pxです。日本語フォントについてWCAGは「同等の文字サイズ」としか書いていません。迷ったら余裕を持たせておくほうが安全です。

地味に引っかかるのが、4.499:1は不合格という点。W3Cの解説に、計算した値は四捨五入しないと明記されています。

コントラスト比の確認ツールはどれを使う？

HEXを2つ入れて確かめるならWebAIM。公開済みのページならDevTools。パレット全体を見るならAdobe Colorです。

← 表は横にスクロールできます →

WebAIM Contrast Checkerは、文字色と背景色を入れるだけです。「普通の文字」「大きな文字」「グラフィック/UI」の3つについて合否が出ます。

Chrome DevToolsは、文字色の色見本をクリックすると「Contrast ratio」欄に合否が出ます。「Use suggested color」を押せば、基準を満たす色に自動で置き換わります。

Adobe Colorのコントラストチェッカーも、文字色と背景色の組み合わせをWCAGの基準で判定します。

AI案を最初に確かめるなら、個人的にはWebAIMがいちばん分かりやすいと思います。入力1回で3種類の合否が並ぶので、どこが足りないかが一目で分かるからです。

手順：AIの配色案を数字で確かめて直す

実際に重なる組み合わせごとに比を書き込めば、確認漏れは起きません。

← 表は横にスクロールできます →

AIに比を計算させて終わり、はやめておきましょう。数字は計算ツールで出す。最後は実際の画面に当てて、目で見る。この順番です。

「私自身はデザインに関して学習途中のため、このAIの回答が正しいのか判断しかねますが、実際にメインカラー、アクセントカラーを使用してみて現在は違和感なくUIを調整できております。」 — Zennの記事（2024年8月）

コントラストが足りないときの直し方

色味はそのまま、明るさだけを動かします。オレンジのボタンなら、白文字を濃い文字に替えるのが早道です。

図は、この記事のオレンジ（#e0653a）をWCAGの計算式に当てはめた結果です。白い文字でも見た目は読めます。でも、普通の文字としては基準に届きません。

オレンジ系のボタンはこうなりやすいので、真っ先に測ってください。直し方は4つです。

• 明るさだけを動かす：WebAIMのLightnessスライダーか、DevToolsの「Use suggested color」を使う
• 文字色を入れ替える：アクセント色の上の文字を、白から濃い色に変える
• 細いフォントを避ける：W3Cの解説では、細い字は実際より薄く見えることがある。太めにするか、比に余裕を持たせる
• 色だけで区別しない：エラーなら赤＋アイコン＋文字、のように別の手がかりを添える

最後の1つは、意外と抜けます。鳥取県の資料には「日本人男性の約２０人に１人、女性の約５００人に１人が色弱（赤緑色弱）であると推定」とあります。DevToolsとAdobe Colorなら、色覚の違いによる見え方も確かめられます。

ロゴの文字そのものは、コントラストの基準の対象外です。ただ、ロゴと同じ色を本文やボタンの文字に使えば、そこは対象になります。

あなたのブランドカラーが明るめなら、「ロゴ用」と「文字用の濃い版」の2つを用意しておくと後で困りません。

よくある質問

よく出る疑問3つに、短く答えます。

• Q. 70:25:5は守らないといけない？ A. 目安です。面積の順番（サブ＞メイン＞アクセント）が入れ替わらなければ、細かい比率は気にしなくて大丈夫です。
• Q. バナー広告の文字にも当てはまる？ A. WCAGは「文字画像」（画像になった文字）も対象にしています。スマホで小さく出る広告ほど、比に余裕を持たせると読みやすくなります。
• Q. 白い背景に真っ黒な文字がいちばん良い？ A. 比としては最大です。ただMDNには、コントラストが高すぎるとサイトが派手で不快に感じられることがある、とも書かれています。本文は濃いグレーにして、4.5:1以上を保てば十分です。

この記事のまとめ

案はAIに出してもらい、合格かどうかは数字で決める。これだけです。

• 色は3つ。面積はサブ（背景）＞メイン＞アクセントの順
• AIには業種・相手・印象・固定したい色・HEXでの出力を伝える
• 普通の文字は4.5:1、大きな文字とボタンの枠は3:1。4.499:1は不合格
• 足りないときは明るさだけを変えるか、文字色を入れ替える
• 色だけで情報を区別しない

次にやることは1つです。今つくっているサイトのボタン色と文字色のHEXを、WebAIM Contrast Checkerに貼ってみてください。1分ほどで終わります。

この記事は、Webサイトの動く部品集 AETHER Motion の制作チームが書いています。