ミントグリーンと白がぼやけるときは？境界線と色の濃さを調整

ミントグリーンと白を組み合わせた画面がぼやけて見えるときは、色を濃くするだけでなく、境界線の必要性と文字・ボタンの明るさを見直します。特に白いカードや入力欄を淡いミントグリーンの上に置くと、どこまでが一つの要素なのか分かりにくくなることがあります。商品カードと申込みフォームを例に、色の使い分けを具体的に紹介します。

まず白との明るさの差を確認する

ミントグリーンは緑に青みを含む、比較的明るい色の呼び名です。ここでは淡いミント■#D5F2E7と、少し濃くしたミント■#AADFCBを比較します。どちらも今回の配色例として選んだ色で、色名に唯一の数値が決まっているわけではありません。HEX（ヘックス）は、Webで使う色を「#」と6桁の英数字で示すカラーコードです。

白■#FFFFFFと淡いミント■#D5F2E7のコントラスト比は約1.19：1、白■#FFFFFFと少し濃いミント■#AADFCBでも約1.49：1です。コントラスト比は2色の相対的な明るさの差を示す数値です。少し濃くするだけでは白との境界が十分に分かれない場合があるため、必要な部分には線や余白を組み合わせます。

商品カードと申込みフォームを色分けする

例A：白いページにミントの商品カードを置く場合。ページの背景を白■#FFFFFF、商品カードを淡いミント■#D5F2E7にし、商品名・価格・説明文には濃いチャコール■#27372Fを使います。チャコールとミントの文字コントラスト比は約10.57：1です。複数のカードは余白で区切り、選択中のカードなど輪郭が重要な箇所だけ、暗めの緑灰色■#4E7164の枠線を付けます。枠線は白■#FFFFFFに対して約5.43：1、ミント■#D5F2E7に対して約4.57：1です。「商品を見る」ボタンは深緑■#17624Fの背景と白■#FFFFFFの文字にすると約7.25：1の差が得られます。

例B：ミントの面に白い申込みフォームを置く場合。フォームの外側を淡いミント■#D5F2E7、入力欄を白■#FFFFFFにします。項目名はチャコール■#27372Fでミントの上に、入力する文字は同じチャコール■#27372Fで白の上に表示します。後者の比は約12.55：1です。入力欄の輪郭には緑灰色■#4E7164の線を使い、白い内側とミントの外側のどちらに対しても境界を確認します。送信ボタンは深緑■#17624Fに白■#FFFFFFの文字を使い、入力欄と主操作を区別します。

濃いミントだけに頼らず、必要な境界を残す

淡いミント■#D5F2E7を少し濃いミント■#AADFCBに変えても、2色同士の比は約1.25：1です。濃いミントを見出しの背景に使う場合、チャコール■#27372Fとの文字コントラスト比は約8.44：1ですが、白い入力欄の境界は色の濃さだけで判断しないようにします。緑灰色■#4E7164の枠線なら濃いミント■#AADFCBに対して約3.65：1です。

WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字は原則4.5：1以上、大きな文字は3：1以上のコントラストが求められます。操作部品の識別に必要な境界や状態の表示には、隣り合う色と原則3：1以上が必要です。ただし、装飾用のカードすべてに濃い枠が必要なわけではありません。スマートフォン表示やキーボード操作時にも、入力欄と選択状態が見分けられるか確認してください。

HueRollではHEXで色を調整し、選択色と白・黒のコントラストを確認できます。任意の2色の比較やWCAGの自動合否判定には対応していないため、ここに挙げた文字・枠線・背景の組み合わせは別途計算しています。