ブルーグレーと白で作るWeb配色｜背景とカードに変化をつける
ブルーグレーと白は、色数を抑えてWebサイトを整えたいときに使いやすい組み合わせです。ただし、白い背景に白いカードを置くだけでは区切りが弱くなり、濃いブルーグレーを広く使いすぎると画面が重く感じられることもあります。背景とカードの色を入れ替えながら、情報のまとまりを見せる方法を考えましょう。
淡いブルーグレーの背景には白いカードを重ねる
ブルーグレーは青みを含んだグレーの総称で、色名に決まったコードはありません。ここでは淡いブルーグレーの#E7EEF2と、濃いブルーグレーの#435E70を使います。HEX（ヘックス）は、Webの色を「#」と6桁の英数字で指定する表記です。
ページ全体を白#FFFFFFにし、カードを淡い青灰#DCE5ECにすると、両色のコントラスト比は約1.28:1です。逆に、セクションの背景を淡いブルーグレー#E7EEF2、カードを白#FFFFFFにしても、差は約1.17:1にとどまります。コントラスト比は、隣り合う色の明るさの差を表す数値です。色みの違いだけで境界を示すのではなく、余白や枠線も組み合わせます。
見せ場だけを深いブルーグレー#435E70に切り替える方法もあります。そこに白#FFFFFFの文字を置くと約6.83:1の差があり、短い案内をまとめる場所と、白いカードを並べて読む場所の役割を変えられます。
コワーキングスペースの設備案内で色を使い分ける
例えば、仕事席・会議室・ロッカーをカードで紹介し、最後に見学予約を案内するWebサイトを想定します。次のように、色を置く面と情報の役割を決めます。
- 冒頭と基本説明：ページ背景を白#FFFFFFにし、見出しを濃いブルーグレー#435E70、本文をチャコール#283844で表示します。白とのコントラスト比は見出しが約6.83:1、本文が約12.07:1です。
- 設備一覧：セクション背景を淡いブルーグレー#E7EEF2、3つの設備カードを白#FFFFFFにします。カードの輪郭を明確にしたい場合は、青灰の枠線#60768Bを使います。枠線はカードの白と約4.71:1、周囲の淡い背景と約4.01:1です。カード見出しは濃いブルーグレー#435E70、説明文はチャコール#283844にそろえます。
- 利用条件の補足カード：白#FFFFFFの説明エリアには、ひとつだけ少し濃い淡色#DCE5ECのカードを置きます。この面と白の差は約1.28:1なので、境界が必要なら同じ枠線#60768Bを付けます。線とカード面は約3.69:1、チャコール#283844の文字とカード面は約9.46:1です。
- 見学予約の案内：短い帯を濃いブルーグレー#435E70にし、案内の文字を白#FFFFFFにします。帯の中には白#FFFFFFの予約カードを置き、申込みボタンを再び濃いブルーグレー#435E70、ボタン文字を白#FFFFFFにします。ボタンの文字と背景は約6.83:1です。
この配置なら、白いカードの見た目を共通にしながら、一覧・補足・予約で背景だけを変えられます。カードごとに新しいアクセント色を増やさず、背景の広さと余白で情報の優先順位を作るのがポイントです。
カードが埋もれるときは境界と文字を別々に確認する
白と淡いブルーグレーだけでカードの区切りが分かりにくい場合、まずカード間の余白や見出しの位置を整えます。枠線を使うなら、飾りの線なのか、操作や情報の理解に必要な境界なのかを区別しましょう。WCAG（Webコンテンツを多くの人が利用しやすくするための指針）2.2のレベルAAでは、通常の文字には原則4.5:1以上、大きな文字には3:1以上、操作部品の識別に必要な視覚的手がかりには隣接色と3:1以上が求められます。すべての飾り線がこの基準の対象になるわけではありません。
スマートフォンでは設備カードを縦に並べ、カード名と説明文の間隔を保ちます。設備の種類や予約状態は色だけで示さず、文字でも明記します。また、影や枠線の細さだけに頼らず、明るい画面でもカードのまとまりが分かるかを確認してください。
HueRollではHEXコードや配色候補を確認し、選択した色と白・黒とのコントラストを比較できます。ただし任意の2色同士の比較やWCAGへの適合の自動判定はできません。ここで紹介した背景・文字・枠線の比率は別途計算した値です。