アイボリーに合う色は？やさしい印象の配色例

アイボリーは、白にわずかな黄みを含むような明るい色として使われる呼び方です。WebではCSSの色名 ivory が ■#FFFFF0 と定義されていますが、日常的な「アイボリー」はそれより幅広い色を指すことがあります。この記事では ■#FFFFF0 を基準に、やさしい印象を保ちながら文字やボタンの役割が埋もれない配色を考えます。

アイボリーには深いニュートラルと低彩度の色を合わせる

■#FFFFF0 のようなアイボリーは明度（色の明るさ）が高く、背景として広く使いやすい色です。ただし、周囲まで白や淡色だけでそろえると、カードや文字の強弱が分かりにくくなることがあります。本文にはウォームチャコール ■#36322E のような十分に濃い色を使い、補助面には淡いセージグレー ■#E6E8DB を置くと、明るさを保ちながら階層を作れます。

差し色には、彩度（色の鮮やかさ）を抑えたディープセージ ■#435A49 や、くすみプラム ■#66506B が候補です。どちらもアイボリーとは明るさに十分な差があり、鮮やかな色を増やさなくてもボタンやリンクに役割を持たせやすい組み合わせです。

やさしい印象を作る3つの配色例

1. ウォームチャコールと淡いセージで静かな明暗差を作る

ページ背景をアイボリー ■#FFFFF0、カードや補助セクションを淡いセージグレー ■#E6E8DB、本文をウォームチャコール ■#36322E にします。コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は、本文とアイボリーで約12.60:1、本文と淡いセージで約10.24:1です。明るい面を2段階に分けながら、文字は1つの濃色にそろえられます。

2. ディープセージを主要ボタンやリンクに使う

主要ボタンをディープセージ ■#435A49、ボタン文字を白 ■#FFFFFF にすると、コントラスト比は約7.51:1です。アイボリー ■#FFFFF0 上でディープセージをリンク文字として使う場合も約7.44:1あります。黄みを含む明るい背景に落ち着いた緑を合わせることで、自然な変化を付けながら操作部分を明確にできます。

3. くすみプラムを小さなアクセントにする

短いラベルやキャンペーン名、補助ボタンにくすみプラム ■#66506B を使うと、やさしい背景に少し異なる色みを加えられます。アイボリー ■#FFFFF0 上のプラムは約7.12:1、プラム背景に白 ■#FFFFFF を置く場合は約7.18:1です。ディープセージとプラムを同じ強さで併用せず、どちらか一方を主な差し色にすると、やわらかな印象を保ちやすくなります。

白との差だけに頼らず、必要な場所には明暗差を付ける

アイボリー ■#FFFFF0 と白 ■#FFFFFF のコントラスト比は約1.01:1です。色みにはわずかな違いがありますが、明るさはほぼ同じなので、重要な文字やカードの区別をこの差だけに頼るのは避けます。また、ディープセージ ■#435A49 とくすみプラム ■#66506B の比率も約1.05:1と低いため、この2色を通常サイズの文字と背景として直接重ねる用途には向きません。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上のコントラスト比が求められます。HueRollではアイボリー ■#FFFFF0 を6桁のHEX（Webで色を表す16進数コード）で入力し、ティント、シェード、補色、類似色、各種配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、この記事で示した2色間の比率は別途計算した値です。