卵色と水色を合わせる配色｜淡い2色の使い分け

卵色と水色はどちらも明るい色ですが、広い面積で隣り合わせると、情報の区切りが分かりにくくなることがあります。淡い2色を組み合わせるときは、どちらを主役の背景にするか決め、文字やボタンには十分に濃い色を使うのがポイントです。この記事では親子向け工作教室の案内ページを例に、卵色と水色の使い分けを具体的に紹介します。

卵色と水色は「面積」と「役割」で使い分ける

卵色（たまごいろ）は卵の黄身を思わせる、少し赤みのある明るい黄色です。今回の色見本は卵色■#FCD475を採用します。水色は青みのある明るい色で、配色用の見本として■#CAEAF2を選びました。いずれも色名だけでHEXコードが一つに決まるわけではありません。HEX（ヘックス）はWebで色を6桁の英数字で指定する形式です。

この2色は黄と青という色みの違いがあっても、明るさの差を数値で表すコントラスト比は約1.12:1です。そのため、背景を交互に塗るだけでは、カードの境界や操作する場所を明確に区別できません。

たとえば卵色を大きな告知エリアに、水色を開催日時や持ち物の案内欄に使うと役割が整理できます。反対に水色をページ上部の背景にするなら、卵色は「事前予約制」などの小さな案内帯に絞ります。どちらの場合も、見出しと本文には濃い紺色■#26394Aを共通して使うと、2色の背景を切り替えても文字色が増えません。

親子向け工作教室の案内ページで比べる2つの配色

例1：卵色を主役にする。「親子のものづくり教室」の冒頭背景を卵色■#FCD475にし、講座名と短い説明を紺色■#26394Aで表示します。文字と背景のコントラスト比は約8.39:1です。日時と参加費は水色■#CAEAF2のカードにまとめ、文字は紺色■#26394Aのままにします。こちらの文字との比は約9.38:1です。

カードが卵色の背景に埋もれないよう、輪郭に灰青色■#657681の線を付けます。線は外側の卵色■#FCD475と約3.32:1、内側の水色■#CAEAF2と約3.71:1の差があります。「参加を申し込む」ボタンは卵色の上に紺色■#26394Aの背景で置き、白■#FFFFFFの文字を載せます。文字とボタン背景の比は約11.89:1です。

例2：水色を主役にする。夏の工作教室を案内するなら、ページ冒頭を水色■#CAEAF2にして、見出しと説明を紺色■#26394Aで表示します。この組み合わせは約9.38:1です。卵色■#FCD475は「事前予約制」と書いた小さな帯に回し、帯の文字も紺色■#26394Aにすると約8.39:1になります。帯の周囲には灰青色■#657681の枠を付け、淡い2色の境界を補います。申込みボタンは水色の上に紺色■#26394Aで配置し、白■#FFFFFFの文字を使います。

淡い背景では白文字と境界線に注意する

卵色■#FCD475と白■#FFFFFFのコントラスト比は約1.42:1、水色■#CAEAF2と白■#FFFFFFは約1.27:1です。どちらも白文字を直接載せる組み合わせには向きません。また、水色の上に白い情報カードを置く場合も、2色の差は約1.27:1なので、必要に応じて灰青色■#657681の枠や余白で区切ります。この枠と白■#FFFFFFとの比は約4.71:1です。

WCAG 2.2というWebのアクセシビリティ指針のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上を原則求めています。重要な操作部品の境界など、文字以外の表示には隣接色との3:1以上が必要な場合もあります。色だけで「申込み可能」「受付終了」を分けず、言葉や形でも状態を示してください。

HueRollではHEXを入力して色を調整し、選択色と白・黒のコントラストを確認できます。ただし任意の2色間の比較やAA判定には対応していません。実際に使う背景・文字・ボタン・枠の組み合わせは、公開前に別途確認しましょう。