エクリュと黒を合わせるコツ｜文字の太さと色の面積を整える

エクリュと黒を合わせるときは、明るいエクリュを広い背景にし、黒を文字や短い帯、ボタンに限定すると、やわらかさと明確な情報の区切りを両立しやすくなります。ただし、文字をすべて太くしたり黒い面を増やしすぎたりすると、商品写真より文字の印象が強くなることもあります。リネン小物の新作紹介バナーを例に、文字の太さと色の面積を調整する方法を紹介します。

エクリュを広く残し、黒の文字に強弱を付ける

エクリュはフランス語の「漂白していない」という言葉に由来し、未漂白の麻や糸を思わせる黄みがかった淡色を指します。色名に唯一のHEXコードが決まっているわけではありません。今回はWeb配色用の一例としてエクリュ■#F4EFE6を使い、黒■#000000と組み合わせます。HEX（ヘックス）は、色を「#」と6桁の英数字で指定する形式です。

エクリュ■#F4EFE6に黒■#000000の文字を置くコントラスト比は約18.34:1です。コントラスト比は、文字と背景の相対的な明るさの差を表す数値です。真っ黒の印象を少し抑えるなら、ほぼ黒の■#1C1C1Cに変えても約14.88:1あります。説明文をダークグレー■#4C4742にした場合も、エクリュとの比は約8.02:1です。

文字の太さは、CSS（Webページの見た目を指定する仕組み）のfont-weightで表せます。例えば400は標準的な太さ、600はやや太め、700は太字の指定例です。新作の見出しには36px・600、説明文には16px・400、日付や価格の補足には14〜16px・500を試すと、全部を太字にせず情報の段階を作れます。px（ピクセル）は画面上の寸法を表す単位です。表示される太さは使用するフォントによっても違うため、実画面で比較しましょう。

リネン小物のバナーで黒い面積を20％と30％に変える

横1,200×縦480pxの新作リネンポーチの告知バナーを想定します。写真を見せるエクリュの領域と、短い文字情報を置く黒い領域を分けます。次の色を役割ごとに使えば、色数を増やさずに見出しの強さを調整できます。

• エクリュ80％・黒20％の案：幅960pxをエクリュ■#F4EFE6の領域にし、商品写真と「新作リネンポーチ」の見出しを配置します。見出しは黒■#000000で36px・600、短い説明はダークグレー■#4C4742で16px・400とします。右の幅240pxだけを黒■#000000の縦帯にして、販売開始日をエクリュ■#F4EFE6の文字で表示します。帯の文字と背景の比は約18.34:1です。購入ボタンも黒の面にエクリュ文字を使い、文字色と面は同じ比率です。
• エクリュ70％・黒30％の案：高さ144pxの上部だけを黒■#000000の見出し帯にし、見出しをエクリュ■#F4EFE6の36px・600で表示します。残りの高さ336pxはエクリュの領域にして、写真と短い説明を並べます。本文にはダークグレー■#4C4742、金額には少し柔らかい黒■#1C1C1Cを使い、見出し以外は400〜500の太さに抑えます。黒を画面の約30％にしても、エクリュと黒の役割を分ければ、両方を使いながら商品情報を整理できます。

80％・20％や70％・30％という数値は、写真や文字を除いた背景ブロックの面積を比べるための作例です。色の面積に普遍的な正解があるという意味ではありません。黒い面を広くするほど必ず目立つわけでもないため、見出しを読んだ後に商品写真へ視線を移せるかを確認します。

細い文字と淡いカードの境界を最後に調整する

エクリュ■#F4EFE6の上で薄いグレー■#99928Aを文字に使うと、比率は約2.68:1で、通常文字にも大きな文字にも不足します。色だけでなく、太さ300などの極端に細い文字は画面の表示処理で線が薄く見えることがあります。W3Cも、非常に細い書体では計算上のコントラストに達していても読み取りにくい場合があると説明しています。

また、淡いベージュ■#E8DFD2の仕様カードとエクリュ■#F4EFE6は約1.15:1、白■#FFFFFFとエクリュも約1.15:1と近い色です。カードの位置が重要ならグレーブラウン■#73675Bの輪郭線を使いましょう。この線はエクリュと約4.80:1、淡いベージュと約4.17:1、白と約5.50:1の差があります。装飾だけのカードであれば余白による区切りも選択肢です。

WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常の文字に原則4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。太字にしただけで基準を満たすわけではありません。また、操作部品を識別するために必要な視覚的手がかりには、隣り合う色と原則3:1以上が必要です。スマートフォンでは写真と文字を縦に並べ、黒い帯を短くしても見出しと購入ボタンの位置が分かるか確認します。

HueRollではHEXコードを入力して色を調整し、配色候補や選択した色と白・黒のコントラストを確認できます。ただし、任意の2色同士の直接比較やWCAGの自動判定には対応していません。今回のエクリュ・黒・グレー・輪郭線の組み合わせは、別途2色ずつ計算しています。