砂色の配色がぼやけるときは？アクセントカラーの選び方

砂色を背景に使うと落ち着いた配色になりますが、オフホワイトや淡いベージュだけを重ねると、見出しや申込みボタンまで目立ちにくくなることがあります。そんなときは、背景全体を濃くするより、読者に見てほしい場所を決めて差し色を置く方法があります。深い青緑と赤茶を比較しながら、色の面積・文字色・ボタンのコントラストを具体的に考えます。

砂色は広い面に使い、差し色は目的に合わせて1色選ぶ

砂色（すないろ）は、砂を思わせる明るい灰みの黄色です。I-IROの色見本では■#DCD3B2、RGB（赤・緑・青の光の成分）は220・211・178と示されています。HEX（ヘックス）は「#」と6桁の英数字でWebの色を指定する表記です。色名ごとに唯一の値が決まるわけではないため、今回はこの見本を基準にします。

砂色■#DCD3B2とオフホワイト■#FBF9F4のコントラスト比は約1.43：1です。コントラスト比とは2色の相対的な明るさの差を表す数値です。淡い面同士を組み合わせてもよい一方、重要な操作までこの2色だけで区別するのは避けます。

深い青緑■#1D5956は、黄みのある砂色と色相（色みの方向）が離れているため、落ち着いたまま変化を付ける候補です。一方、深い赤茶■#85432Fは砂色の温かさになじませつつ、明るさの差で目を引く候補です。砂色に対するコントラスト比は、青緑が約5.35：1、赤茶が約4.93：1です。両方を同時に主役にせず、ページの目的に合う片方を選びます。

植物観察会の予約ページと焼き菓子バナーで使い分ける

例A：植物観察会の予約ページ。開催内容を紹介する上部の広い背景を砂色■#DCD3B2、持ち物や集合場所の情報欄をオフホワイト■#FBF9F4にします。本文・見出しには濃いチャコール■#2C322Eを使用し、砂色の上で約8.74：1、オフホワイトの上で約12.45：1の文字コントラストを確保します。開催日の小さな案内は深い青緑■#1D5956の文字で砂色に載せます。「観察会に申し込む」ボタンは青緑■#1D5956の背景に白■#FFFFFFの文字を置き、ボタン文字は約8.03：1、ボタン面と周囲の砂色は約5.35：1です。差し色を日時と申込み操作に絞ると、写真や説明との優先順位を作れます。

例B：焼き菓子の新商品告知バナー。背景には砂色■#DCD3B2を使い、「新作クッキー」の見出しと価格はチャコール■#2C322Eで載せます。「週末限定」の小さな文字ラベルには深い赤茶■#85432Fを選び、砂色上で約4.93：1の文字コントラストを取ります。「商品を見る」ボタンを赤茶■#85432Fの面と白■#FFFFFFの文字にすると約7.39：1です。詳細説明を別のオフホワイト■#FBF9F4の帯にまとめる場合でも、赤茶ボタンとその面には約7.02：1の差があります。温かみのある色を操作部分だけ濃くすると、砂色の穏やかさを残せます。

アクセントはまず主ボタンと短いラベルなど小さな範囲に使い、見出しまで同じ濃色で埋めないことがポイントです。写真の色や文字量が多ければ、差し色の面積をさらに絞ります。青緑と赤茶の両方を使って項目を区別するより、用途に応じて一つを選び、重要度を文章と配置でも示します。

白文字の可否と、淡い背景の境界を確認する

砂色■#DCD3B2に白■#FFFFFFを直接重ねるとコントラスト比は約1.50：1です。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは通常サイズの文字は原則4.5：1以上、大きな文字は3：1以上が求められるため、砂色の上の白文字は避け、チャコール■#2C322Eなど濃い文字を使います。

砂色■#DCD3B2とオフホワイト■#FBF9F4の境界は約1.43：1です。装飾的な区切りなら余白や見出しで整理できますが、入力欄などの存在や選択状態を識別するために境界が必要なら、隣接色に対して原則3：1以上の視覚的な差を確保します。ボタンも配色だけで意味を伝えず、具体的な操作名を付けてください。細い線は数値上十分でも表示環境によって見えにくくなる場合があるため、スマートフォンでも確認します。

HueRollではHEX入力で色を調整し、選択した色と白・黒のコントラストを確認できます。ただし任意の2色を直接比較したり、WCAGの合否を自動判定したりする機能ではありません。この記事の文字・ボタン・背景の数値は別途計算しています。