ミューテッドダーク・シャルトリューズに合う色は？渋い黄緑を自然に馴染ませる配色例【#334A1C】

ミューテッドダーク・シャルトリューズ（■#334A1C）は、黄緑を暗くくすませた自然色です。Webサイトでは、環境配慮の商品紹介や素材説明、カテゴリ見出しなどに使うと落ち着いた存在感を出しやすい一方、オリーブや黄緑の濃淡だけでまとめると全体がくすんで見えることがあります。ここでは、パーチメント、バークグレー、ダスティクレイを合わせ、渋い黄緑を自然に馴染ませながら情報の役割を分ける配色を考えます。

紙色と土色を合わせ、黄緑の渋さを自然な方向へつなげる

■#334A1Cには、背景用のパーチメント■#F1EEE4、補助文字用のバークグレー■#635B4F、アクセント用のダスティクレイ■#D3AC94を合わせる例が考えられます。

■#F1EEE4はわずかに黄みを含む明色なので、黄緑とのつながりを残しながら本文や商品カードの面を明るくできます。■#635B4Fは彩度を抑えた茶みのグレーで、素材説明や補足文、価格条件などを主要情報より一段弱く見せる用途に向きます。■#D3AC94は赤みを含む低彩度の土色で、黄緑から色相を離しながらも自然素材のようなまとまりを作りやすい色です。

商品カードは明るく保ち、シャルトリューズを見出しと主要操作へ絞る

実装では、商品カードや比較表の背景を■#F1EEE4にし、見出しや主要文字、主要ボタン背景へ■#334A1Cを使うと、渋い黄緑を主役にしながら情報面を明るく保てます。補助情報は■#635B4Fへ分けます。UI（ユーザーが操作する画面部品）のアクセントとしては、濃い■#334A1Cの面に■#D3AC94の小さなボタンや選択ラベルを置き、文字を■#334A1Cにすると、黄緑を増やさず役割を分けられます。

コントラスト比は、文字やUIと背景の相対的な明るさの差です。■#334A1Cと■#F1EEE4は約8.47:1、■#635B4Fと■#F1EEE4は約5.76:1、■#334A1Cと■#D3AC94は約4.73:1です。WCAG 2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、濃い■#334A1Cの面に■#D3AC94のUIを置く場合は、周囲との差も約4.73:1となり、意味のあるUI部品に必要な3:1以上も確保できます。

自然に馴染ませるなら、クレイを明るい背景上の文字や境界にしない

■#D3AC94は、渋い黄緑に暖かさを足すアクセントです。広い背景へ増やすより、濃い■#334A1Cの中に置く操作要素、短いラベル、細いラインなどへ絞ると、自然なまとまりを保ちやすくなります。

一方、■#D3AC94と■#F1EEE4のコントラスト比は約1.79:1です。そのため、明るい背景上の通常文字には使わず、意味のあるUI部品の境界をこの2色だけで識別させる使い方も避けます。WCAG 2.2では、操作部品や意味のある図形を識別するために必要な視覚情報は隣接色と3:1以上が基準です。明るい面の操作要素には■#334A1Cの背景や枠線など、十分な明度差を持つ色を使います。