オールドローズとグレージュに合う差し色は？落ち着いた配色に変化をつける

オールドローズとグレージュの組み合わせには、深い青緑やオリーブを差し色として加える方法があります。赤みを含む落ち着いたピンクと、灰色がかったベージュだけでまとめると、穏やかな一方でボタンや見出しまで目立ちにくくなることがあります。差し色を足す場所と面積を決め、色数を増やしすぎずに変化をつける方法を、2つのWebデザイン例で紹介します。

差し色は深い青緑かオリーブを、小さな面積から試す

今回はオールドローズ■#B6818Bとグレージュ■#E7DFD6を基準にします。これらはデザイン用に選んだ色見本で、色名ごとに唯一の数値があるわけではありません。HEX（ヘックス）は、Webで色を指定する「#」と6桁の英数字からなるカラーコードです。

2色のコントラスト比は約2.45：1です。コントラスト比は隣り合う色の相対的な明るさの差を表します。配色としては近い明るさなので、操作ボタンまで同じ濃さにすると情報の強弱が弱くなります。差し色には深い青緑■#22575B、または深いオリーブ■#4E5940を1種類選び、ボタンや短い案内に限定すると整理しやすくなります。

商品カードと体験会バナーで差し色を使い分ける

例A：ハンドメイドアクセサリーの商品紹介ページ。ページ背景をグレージュ■#E7DFD6にし、商品写真の下に置く小さな見出し帯をオールドローズ■#B6818Bにします。商品名・価格・説明文は濃いチャコール■#241F25を使います。「商品を見る」ボタンはグレージュの面に深い青緑■#22575Bを置き、文字を白■#FFFFFFにします。青緑はピンクと色みが離れているため、落ち着いた背景の中で操作場所に変化をつけられます。チャコールとグレージュの文字コントラスト比は約12.27：1、チャコールとオールドローズは約5.01：1、白と青緑のボタンは約8.13：1です。

例B：クラフト体験会の告知バナー。見出し「秋の手仕事体験」をオールドローズ■#B6818Bの面にチャコール■#241F25で配置し、日時と参加方法はグレージュ■#E7DFD6の面にチャコール■#241F25でまとめます。「申し込む」ボタンをグレージュ上の深いオリーブ■#4E5940にし、白■#FFFFFFの文字を合わせます。オリーブとグレージュの面同士は約5.63：1、白とオリーブのボタン文字は約7.43：1です。自然色に近い差し色に替えることで、青緑の例とは異なる落ち着いた雰囲気にできます。

どちらも差し色をボタンなどの狭い場所に使う提案です。5〜10％程度の色面から試してもよいですが、割合は決まりではなく、写真・余白・文字量に合わせて調整します。

淡い色同士の境界と、白文字のコントラストを確認する

オールドローズ■#B6818Bに白■#FFFFFFの通常サイズの文字を載せると約3.23：1となり、WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAで通常文字に求められる4.5：1以上には届きません。一方、チャコール■#241F25との比は約5.01：1なので、今回の見出し帯では濃い文字を使います。大きな文字の基準は3：1ですが、実際の大きさや太さにも注意が必要です。

オールドローズ■#B6818Bとグレージュ■#E7DFD6の境界は約2.45：1です。単なる装飾の区切りなら余白で整理できますが、操作や状態の識別に必要な境界であれば、濃い枠線や形の違いも加えましょう。操作部品を識別する重要な視覚情報には、隣接色と原則3：1以上の差が必要です。スマートフォン表示ではボタンと日付が離れすぎないかも確認します。

HueRollではHEXで色を調整し、選択色と白・黒のコントラストを確認できます。ただし、任意の2色の比較やWCAGの自動合否判定には対応していません。本文で示した組み合わせの比率は別途計算しています。