ダスキー・ゴールドに合う色は？渋みのある黄を自然に馴染ませる組み合わせ【#586020】

ダスキー・ゴールド（■#586020）は、黄の温かさを残しながら明るさと鮮やかさを抑えた、オリーブ寄りの落ち着いた色です。Webサイトでは、年次レポートの重要数値、沿革の節目、受賞歴や実績カードの見出しなどに使うと、明るい金色より控えめに要点を示しやすくなります。ただし、黄・ベージュ・茶系だけでまとめると、全体の明度差が小さくなり、重要情報が埋もれることがあります。ここでは、ライトサンド、アンバーグレー、ダスティラベンダーを合わせ、渋みのある黄を自然に馴染ませながら、実績や節目を見分けやすくする配色を考えます。

明るいサンドを土台にし、ラベンダーで穏やかな色相差を加える

■#586020には、背景用のライトサンド■#F5F0E4、本文や補助文字用のアンバーグレー■#403A32、アクセント用のダスティラベンダー■#B8AECFを合わせる例が考えられます。

■#F5F0E4は黄みを含む明るい色で、ダスキー・ゴールドとのつながりを残しながら大きな明度差を作れます。■#403A32は低彩度の濃い茶系グレーなので、本文や注記、数値の補足を基準色より控えめに整理できます。■#B8AECFは青紫寄りの低彩度色で、黄から色相を離しながら鮮やかさを上げすぎず、暖色に偏った画面へ静かな変化を加えられます。

年次レポートや沿革では、ゴールドを節目と主要操作に集める

実装では、レポートカードや沿革セクションの広い背景を■#F5F0E4にし、重要数値、年度見出し、受賞名、主要ボタン背景などへ■#586020を使います。本文や注記は■#403A32へ分けると、ダスキー・ゴールドの役割を節目の強調に限定できます。UI（ユーザーが操作するボタンや入力欄などの画面部品）の補助操作には、濃い■#586020の面に■#B8AECFの小さなラベルや副ボタンを置き、その上の文字を■#403A32にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差です。■#586020と■#F5F0E4は約5.94:1、■#403A32と■#F5F0E4は約9.88:1、■#403A32と■#B8AECFは約5.35:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#586020と■#B8AECFは約3.21:1なので、濃いゴールドの面に置く意味のあるUI部品の境界として必要な3:1以上を確保できます。

ダスティラベンダーは明るい背景上の文字や境界だけに頼らない

■#B8AECFは、黄系の画面へ静かな色相差を加えるアクセントです。広い面積に増やすより、濃い■#586020の中に置く短いラベルや副操作へ絞ると、ダスキー・ゴールドの落ち着いた主役感を保ちやすくなります。

一方、■#B8AECFと■#F5F0E4のコントラスト比は約1.85:1です。そのため、明るい背景上の通常文字には使わず、ボタンや入力欄の存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#586020や■#403A32の枠線・文字など、十分な明度差を持つ色を組み合わせます。