ミントグリーンとピンクの配色例｜淡い2色の境界を見分けやすくする

ミントグリーンとピンクは、やわらかい色同士を並べたいときの配色候補です。ただし、どちらも明るく淡い色にすると、色みは違っても二つの領域の境界が分かりにくくなる場合があります。今回は架空の「ハーブと花の体験教室」の申込みページを例に、並んだ案内枠を見分けやすくする方法と、色を使う面積を減らす方法を比較します。

淡いミントとピンクは色みが違っても明るさが近い

例として、ミントグリーンに■#DFF3EA、淡いピンクに■#F9E2EAを選びます。HEXコードとは、Webで色を指定するときに使う「#」と6桁などの英数字の表記です。この二色のコントラスト比は約1.06:1です。コントラスト比とは、隣り合う色などの明るさの差を数値で表したもので、1:1に近いほど差が小さくなります。

ミントとピンクは色相（緑系・赤系といった色みの違い）が離れていますが、明るさは近いため、二色を直接接して配置するだけでは明確な区切りになりません。白っぽい隙間を挟む方法もありますが、明るい色面の輪郭が必ず強くなるわけではありません。

まず「別の情報のまとまりとして見せたいのか」「飾りとして色を添えたいのか」を決めます。情報を分けるなら余白・枠線・見出しを使い、飾りなら色を置く範囲を小さくします。色だけに区別を任せないことが基本です。

体験教室の案内枠で比べる二つの配色

案1：ミントとピンクの色面を並べ、輪郭を付ける

「ハーブのしおり作り」の案内をミントグリーン■#DFF3EA、「花のカード作り」の案内をピンク■#F9E2EAの背景にします。二つの枠の間は16pxほど空け、必要に応じて両方にくすんだグレー紫■#817780の2px程度の線を付けます。この線とミントの比は約3.72:1、ピンクとの比は約3.50:1です。淡い面同士を大きく変えずに、各枠の形を示せます。

ミントの見出しは濃い緑■#315348、ピンクの見出しは濃い赤紫■#4F3241にします。それぞれの背景との文字コントラスト比は約7.37:1、9.17:1です。持ち物や開催時間の本文には共通の濃いグレー■#303639を使い、ミント上で約10.60:1、ピンク上で約9.98:1を確保します。「ハーブ」「花」と言葉でも分類し、背景の色だけでは内容を判断させません。

案2：カードは共通の明るい色にし、見出し帯だけを2色にする

文章が多い場合は、ページ背景を薄いグレー■#F4F2EE、カード本文の背景をアイボリー■#FCFAF6にそろえ、カード上部の帯だけをミント■#DFF3EAとピンク■#F9E2EAに分ける方法があります。ページとカード本文の背景比は約1.07:1なので、それだけを境界にせず、カード全体を■#817780の枠線で囲みます。この線はページ背景と約3.85:1、カード本文の背景と約4.12:1です。

見出し帯の文字色は案1と同じ濃い緑■#315348と赤紫■#4F3241を使えます。カード本文には濃いグレー■#303639を置くと、アイボリー■#FCFAF6との比は約11.76:1です。各カードに「日程を見る」ボタンを設けるなら、共通の深い緑■#2D4944を背景、アイボリー■#FCFAF6を文字にすると約9.38:1になります。帯の色が違っても、同じ操作には同じボタン色を使い、迷いにくくします。

枠線の意味とスマートフォンでの見え方を確認する

WCAG（Web Content Accessibility Guidelines、Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字と背景のコントラスト比は4.5:1以上、規定の大きな文字は3:1以上が必要です。操作部品や意味のある図形の認識に不可欠な線・輪郭などには、隣接色との3:1以上が求められます。ただし、装飾だけの枠線すべてに3:1が義務付けられているわけではありません。線が境界を示す必要があるかを先に判断してください。

スマートフォンで案内枠を縦に並べたときも、間隔と見出しが残っているかを確かめます。申込状況や選択中の項目をミントとピンクの違いだけで示さず、「受付中」「選択中」などの文字も添えましょう。また、写真や半透明の色が重なる場合は実際に接する色で再計算します。ここで挙げた比率は指定した不透明な色同士の計算結果で、完成ページ全体の基準適合を保証するものではありません。

HueRollではHEXコードから濃淡や配色候補を調べ、選択した色と白・黒のコントラストを確認できます。一方、任意の二色の比較やAAの自動判定には対応していません。ミントとピンクの淡さはそのままに、境界が必要な場所を枠線・余白・見出しで補うと、情報を整理しやすくなります。