ペール・ゴールドに合う色は？淡い黄みを明るく見せる組み合わせ【#E9EDC9】

ペール・ゴールド（HEX（#から始まるWeb用カラーコード）で ■#E9EDC9）は、黄みを含む明るい淡色です。料金プランの比較ページでは、「おすすめ」として示すプランのカードや年額払いの選択状態、主要な申込みボタンなどに範囲を絞って使うと、淡い黄みを主役にしながら明るい画面へまとめやすくなります。ここでは、オリーブチャコール、ウォームホワイト、スレートブルーを組み合わせます。

オリーブチャコールで文字を締め、青系の補助色で役割を分ける

■#E9EDC9には、見出しや本文用として、ここではオリーブチャコールと呼ぶ■#4A4C2F、ページ背景用のウォームホワイト■#FCFBF4、詳細比較などの補助操作用として、ここではスレートブルーと呼ぶ■#4F5F7Dを合わせる例が考えられます。

■#4A4C2Fは黄緑寄りの暗い色で、ペール・ゴールドと色相（赤・黄・緑など色みの違い）を大きく離しすぎず、明るさの差を作れます。■#FCFBF4はわずかに黄みを含む白に近い色なので、複数の料金カードが並ぶ広い面を明るく保ちやすい背景候補です。■#4F5F7Dは落ち着いた青系で、「機能を比較する」「詳細を見る」などの補助操作を、淡い黄みを使った主要操作と色相で分けたいときに使えます。

料金プランでは、おすすめカードと主要ボタンにペール・ゴールドを使う

ページ背景と通常プランのカードを■#FCFBF4にし、プラン名、料金、機能説明を■#4A4C2Fで表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約8.56:1です。

運営側が「おすすめ」として示すプランの見出し帯、年額払いの選択状態、主要な「このプランで始める」ボタンの背景に■#E9EDC9を使い、その上の文字とアイコンを■#4A4C2Fにすると、コントラスト比は約7.36:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

一方、■#E9EDC9と■#FCFBF4の差は約1.16:1です。淡い色面だけではおすすめカードや選択中の支払い方法を見分けにくいため、■#4A4C2Fの枠線、「おすすめ」「選択中」という文字、チェックアイコンを併用します。この枠線とページ背景のコントラスト比は約8.56:1です。

「機能を比較する」などの補助ボタンは■#4F5F7Dを背景にし、その上を■#FFFFFFの文字にすると約6.43:1です。■#4F5F7Dと■#FCFBF4の差も約6.20:1あり、主要操作と補助操作を分けやすくなります。

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

明るく見せるなら、淡い黄みだけでおすすめや選択状態を伝えない

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

また、「おすすめ」「選択中」「申込み済み」などの状態を色だけで伝えず、文字、枠線、チェックアイコンなども併用します。ペール・ゴールドをページ全体へ広げるより、強調したいプランや主要操作に用途を絞り、■#FCFBF4の余白を広く取ると、淡い黄みを主役にしながら明るい画面に調整しやすくなります。HueRollでは■#E9EDC9を入力し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。