ストロング・ゴールドに合う色は？力強い黄みを存在感のある印象にする組み合わせ【#C0DA0B】

ストロング・ゴールド（■#C0DA0B）は、黄に少し緑みを含んだ明るく鮮やかな色です。ここでいう「ゴールド」は金属の光沢を再現する表現ではなく、HueRoll上の色名として扱います。社内ワークフローの申請・承認一覧では、選択中の申請、承認待ちのカード見出し、主要な「内容を確認」ボタンなどに使うと、力強い黄みへ存在感を持たせながら情報の優先順位を作りやすくなります。ただし、明るい背景との色面だけの差は小さく、白文字とのコントラストも低いため、濃い文字色と枠線を組み合わせるのが扱いやすい方法です。ここでは、ウォームアイボリー、インクスレート、ミューテッドティールを合わせます。

ウォームアイボリーを土台にし、インクスレートで明るい黄を締める

■#C0DA0Bには、背景用のウォームアイボリー■#FDFCF3、本文・申請情報・枠線用のインクスレート■#242B36、補助操作用のミューテッドティール■#536B6Aを合わせる例が考えられます。

■#FDFCF3は黄みをわずかに含む明色で、申請一覧や詳細カードの広い背景を軽く見せられます。■#242B36は青みを少し含む低彩度の濃色なので、申請名、申請者、期限、金額、補足説明などを主役色より落ち着いて整理できます。■#536B6Aは青緑寄りの低彩度色で、黄から色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「履歴を見る」などの補助操作を主要操作と分けやすくなります。

申請・承認一覧では、ストロング・ゴールドを選択中の申請と主要CTAに集める

実装では、一覧全体と未選択カードの背景を■#FDFCF3にし、選択中の申請、承認待ちの見出し、主要なCTA（Call to Action、内容確認など次の行動を促す操作）の背景へ■#C0DA0Bを使います。その上の文字と枠線を■#242B36にすると、文字とゴールドのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約9.01:1です。通常サイズの文字に必要な4.5:1以上を満たします。本文、申請者名、期限、金額は■#242B36にし、背景の■#FDFCF3との比率は約13.84:1です。

一方、■#C0DA0Bと■#FDFCF3は約1.54:1、■#C0DA0Bと■#FFFFFFは約1.58:1です。そのため、明るい背景上でゴールドの塗りだけをボタンや選択カードの境界にしたり、ゴールド背景へ白の通常文字を置いたりするのは避けます。補助の「履歴を見る」ボタンは■#536B6Aを背景にし、その上の文字を■#FFFFFFにすると約5.71:1です。ミューテッドティールとページ背景も約5.54:1あり、補助操作の面を背景から区別できます。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上、意味のあるUI（ユーザーが操作するボタンや選択欄などの画面部品）を色の境界で識別させる場合は隣接色との3:1以上が基準になります。ここでは、ストロング・ゴールドの塗りだけでは明るい背景との3:1に届かないため、濃い枠線と文字を併用しています。

存在感を活かすなら、承認状態をゴールドとティールだけで伝えない

「承認待ち」「差し戻し」「承認済み」といった状態は、ゴールドとティールなどの色分けだけで伝えず、状態名の文字、アイコン、日時、担当者名、太めの枠線なども併用します。特に■#C0DA0Bと■#FDFCF3の差は約1.54:1なので、ゴールドの背景色だけで選択中や承認待ちを示すと境界が分かりにくくなる場合があります。

主要CTAの■#C0DA0Bと補助操作の■#536B6Aのコントラスト比は約3.61:1です。ただし、色の違いだけに操作の意味を持たせず、ボタン文言で「内容を確認」「履歴を見る」のように役割を明確にします。HueRollでは■#C0DA0BをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。