アースカラーに合う色は？落ち着いた組み合わせの作り方

アースカラーは幅のある言葉ですが、この記事では土・木・葉を思わせるブラウン、オリーブ、テラコッタ、サンド系の落ち着いた配色として扱います。具体例には、クリーム■#F7F1E6、ダークブラウン■#2D2A25、オリーブ■#5A6A45、テラコッタ■#965039、サンド■#D8C6A3を使います。色相を増やしすぎず、明るさの差で役割を分けると落ち着いた組み合わせにしやすくなります。

アースカラーには、明るいクリームと濃いブラウンを土台にする

今回のように彩度を抑えたアースカラーを複数使う場合は、色同士の印象が近づきやすいため、まず背景と本文の明るさを大きく離します。本文の■#2D2A25と背景の■#F7F1E6は、コントラスト比（前景と背景の相対的な明るさの差を示す数値）が約12.71:1です。補助面の■#D8C6A3上でもダークブラウンは約8.52:1あります。

オリーブ■#5A6A45とテラコッタ■#965039は、見出しや短いラベルなどに使います。クリーム背景ではオリーブが約5.21:1、テラコッタが約5.33:1なので、通常サイズの文字にも使える組み合わせです。

自然公園のトレイルガイドでは、オリーブとテラコッタを役割で分ける

自然公園のトレイルガイドページを例にすると、ページ背景を■#F7F1E6、本文を■#2D2A25にします。ルートの概要や所要時間をまとめるカードには■#D8C6A3を使い、文字は■#2D2A25にします。

「Forest Route」「Viewpoint」などのカテゴリ見出しにはオリーブ■#5A6A45を使い、クリーム上で約5.21:1を確保します。「急坂あり」「日陰が少ない」など注意情報の短いラベルにはテラコッタ■#965039を使うと、クリーム上で約5.33:1です。ラベル背景として使う場合は、白文字■#FFFFFFとの比率が約5.99:1あります。

難易度を色だけで示すのは避けます。たとえばオリーブは「Easy」、テラコッタは「Moderate」と色分けする場合でも、必ず文字ラベルや記号を併記します。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）では、色だけを情報伝達の唯一の視覚的手段にしないことが求められています。

WCAG 2.2では、通常サイズの文字に4.5:1以上のコントラスト比が必要です。また、操作や情報理解に必要な非テキスト情報には、隣接色との3:1以上が基準になります。

落ち着かせるなら、近いアースカラー同士を文字と背景にしすぎない

オリーブ■#5A6A45とダークブラウン■#2D2A25のコントラスト比は約2.44:1、テラコッタ■#965039とダークブラウンは約2.38:1です。そのため、暗いブラウン面の通常文字にオリーブやテラコッタを使うのは避けます。暗い面では白■#FFFFFF、明るい面ではダークブラウンを基本にすると安全です。

サンド■#D8C6A3とクリーム■#F7F1E6の比率も約1.49:1なので、重要なカード境界をこの差だけに頼るのは避けます。HueRollでは■#5A6A45や■#965039を入力し、補色・類似色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。