ココアブラウンとミントグリーンは合う？背景と差し色の組み立て方

ココアブラウンとミントグリーンは、どちらかを広い背景、もう一方を少量の差し色にすると組み立てやすい組み合わせです。茶色を大きく使えば明るいミントが目を引き、ミントを大きく使えば濃い茶色が見出しや操作の目印になります。同じ2色で背景と差し色を入れ替えた、食品の定期便とワークショップの配色例を紹介します。

ココアブラウンとミントは、明るさと使う面積で役割を決める

ココアブラウンはココアを思わせる茶色、ミントグリーンはミントの葉を連想させる明るい緑の呼び名です。どちらの名前にも決まった一つのデジタル色があるわけではありません。この記事では深いココアブラウン■#573E36と、淡いミントグリーン■#B9E4D2を提案します。HEX（ヘックス）はWebで色を16進数のコードで指定する形式で、配色を再現するために使います。

この2色のコントラスト比（隣り合う色の相対的な明るさの差）は約7.03:1です。濃い茶色の上にミントのボタンを置く場合も、明るいミントに茶色の見出しを置く場合も明暗差があります。一方、ミントと白■#FFFFFFの比は約1.39:1なので、ミントのボタン内に白文字を置くのは避け、ココアブラウンの文字を使いましょう。

背景と差し色を入れ替えた2つの配色例

食品の定期便：ココアブラウン背景にミントの申込みボタン

食品の定期便を紹介するページでは、冒頭の背景をココアブラウン■#573E36にし、見出しと説明を白■#FFFFFFで表示します。背景と文字の比は約9.78:1です。「お試しセットを申し込む」ボタンだけをミントグリーン■#B9E4D2にし、ボタンの文字をココアブラウン■#573E36にすると、文字とボタン、ボタンと周囲の背景はいずれも約7.03:1の差になります。

定期料金や配送回数の説明はオフホワイト■#FBF8F2の案内面にまとめ、文字を濃い青灰■#27343Bにすると約12.08:1です。案内面と茶色い背景は約9.22:1離れているため、情報を別の面として分けられます。ミントはボタンに集中させ、料金の見出しや飾り線まで同じ色で増やしすぎないようにします。

植物のワークショップ：ミント背景にココア色の見出しとボタン

植物のワークショップ予約ページでは、広い背景をミントグリーン■#B9E4D2にし、見出しをココアブラウン■#573E36、本文を濃い青灰■#27343Bにします。背景との比は見出しが約7.03:1、本文が約9.20:1です。「席を予約する」ボタンにはココアブラウンを使い、白■#FFFFFFの文字を載せると約9.78:1。ボタンとミントの背景にも約7.03:1の差があります。

日時や持ち物をオフホワイト■#FBF8F2のカードに置く場合、カードとミントの背景の比は約1.31:1と小さいため、カードの境界が必要なら濃い灰緑■#577067の枠を加えます。この線とミントの比は約3.85:1、オフホワイトの内側とは約5.06:1です。色の違いだけに頼らず、見出し・余白・枠を組み合わせると情報を整理できます。

差し色の量と、文字・境界の見やすさを調整する

2色がちぐはぐに感じられたら、まず背景の広さと差し色の数を確認します。両方を大面積で競わせるより、背景は一色、操作する場所はもう一色に絞るほうが役割を説明しやすくなります。ただし色を使う面積に唯一の正解はありません。重要なボタンには「申し込む」「予約する」などの文言を添え、カードの枠が必要な部分は周囲の色との明暗差を確かめます。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字に3:1以上のコントラスト比が必要です。操作部品を見分けるために必要な視覚情報も、隣接色との3:1以上が求められる場合があります。HueRollではHEX入力から関連色や配色候補を探し、選択色と白・黒の比を確認できます。ただし任意の2色同士の比較やAA・AAAの自動判定はできないため、完成した配色は別途検証してください。