ソフト・ゴールドに合う色は？やさしい黄みを軽やかに見せる組み合わせ【#E5EDAB】

ソフト・ゴールド（■#E5EDAB）は、明るい黄色を少し落ち着かせた、やさしい黄みの色です。オンラインイベントの参加プラン比較画面では、選択中のプランや主要な「このプランで申し込む」ボタンなどに範囲を絞って使うと、黄色の明るさを残しながら軽やかにまとめやすくなります。ここでは、ダークオリーブブラウン、ウォームホワイト、ミューテッドティールを組み合わせます。

濃いオリーブブラウンで黄みを締め、白に近い背景で軽さを残す

■#E5EDABには、見出しや本文用のダークオリーブブラウン■#403F2A、参加プランカードの背景用のウォームホワイト■#FAFAF5、補助操作用のミューテッドティール■#536A6Bを合わせる例が考えられます。

■#403F2Aは黄色みを含む暗い色で、ソフト・ゴールドと色相（赤・青・緑など色みの違い）を近づけながら明るさを大きく下げられます。■#FAFAF5はわずかに黄みを含む白に近い色なので、料金、開催日時、含まれる内容など情報量の多いカードを軽く見せやすくなります。■#536A6Bは落ち着いた青緑系で、黄みから色相を離し、「詳細を見る」「日程を確認する」などの補助操作を主要な申込み操作と分ける候補になります。

参加プラン比較では、ソフト・ゴールドを選択中のプランと主要ボタンに使う

ページと未選択のプランカードを■#FAFAF5にし、プラン名、料金、日時、説明文を■#403F2Aで表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約10.22:1です。

選択中のプランや主要な「このプランで申し込む」ボタンの背景に■#E5EDABを使い、その上の文字とアイコンを■#403F2Aにすると、コントラスト比は約8.68:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

一方、■#E5EDABと■#FAFAF5の差は約1.18:1です。淡い色面だけでは選択中のカードを見分けにくいため、■#403F2Aの枠線、チェックアイコン、「選択中」の文字を併用します。「詳細を見る」などの補助ボタンは■#536A6Bを背景にし、その上を■#FFFFFFの文字にすると約5.77:1です。ミューテッドティールとウォームホワイトの差も約5.51:1あります。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字には4.5:1以上のコントラスト比が必要です。また、UI（ユーザーが操作するボタンや選択状態などの画面部品）を識別するために必要な境界や状態表示には、隣接色との3:1以上が基準になります。

軽やかに見せるなら、白文字と淡い黄みだけの状態表示を避ける

■#E5EDABと■#FFFFFFのコントラスト比は約1.23:1です。そのため、ソフト・ゴールド背景へ通常サイズの白文字を置く使い方では4.5:1へ届きません。この例では、主要ボタンの文字を■#403F2Aにします。

また、「選択中」「受付中」「満席」などの状態を色だけで伝えず、状態名の文字、チェックや人数を示す情報も併用します。ソフト・ゴールドをページ全体へ広げるより、選択中のプランや主要ボタンなど面積を絞った場所へ使い、■#FAFAF5の余白を広く取ると、やさしい黄みを主役にしながら軽やかに整理しやすくなります。HueRollでは■#E5EDABをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事の比率は別途計算した値です。