WEBデザインのベースカラーとは？背景色の選び方と配色のコツ
WEBデザインのベースカラーとは、本文の後ろや余白など、ページの広い面を支える基本の色です。最初にこの色を決めておくと、見出し・写真・カードの周囲が整えやすくなります。ただし、淡い背景を選ぶだけでは文字や操作部分の見やすさは決まりません。電子工作ワークショップの申込みページを例に、ベースカラーの選び方から各部分への展開まで紹介します。
ベースカラーは広い面の土台として、内容から選ぶ
ベースカラーは、見出しなどに繰り返し使うメインカラーや、申込みボタンを強調するアクセントカラーとは役割が違います。背景、セクションの余白、記事本文の後ろなどを受け持ち、ほかの情報を読むための土台になります。ベースカラーが必ず白である必要はありませんし、色数や面積比率を厳密に決める必要もありません。
選ぶ順序は、まず写真と文章の量を確認し、次に実際の文字を置いて背景との明るさの差を比べ、最後にカードやボタンの境界を見直す方法が実用的です。薄い背景だから読みやすいと決めつけず、文字色を含む組み合わせで判断しましょう。
電子工作ワークショップでベースカラーを決める手順
電子部品の写真、参加手順、持ち物、開催日を選ぶカードを備えたページを想定します。以下のHEXは、WEBの色を16進数で指定するカラーコードです。コントラスト比は2色の相対的な明るさの差を示す数値です。
1．写真と説明に合わせて2つの候補を比較する
木製の作業机や紙の工作図を大きく見せる場合には、少し温かみのあるオフホワイト ■#F7F5EFが候補になります。一方、回路図や電子部品の写真が中心なら、淡い青灰 ■#DDE8EBも候補です。これは用途に応じた提案であり、色だけで印象が一律に決まるわけではありません。
両方に同じ濃いブルーグレーの本文色 ■#293A40を置いて比べると、オフホワイト ■#F7F5EFでは約10.86:1、淡い青灰 ■#DDE8EBでは約9.48:1です。補足文のグレー ■#536269も、前者 ■#F7F5EFで約5.80:1、後者 ■#DDE8EBで約5.07:1です。どちらも文字が読める組み合わせですが、写真と全体の見え方を比較して、ここでは後者を採用します。
2．ベースを決めたら、カードとの境目を確かめる
ページを淡い青灰 ■#DDE8EBにして開催日を白いカード ■#FFFFFFに並べると、カードと背景のコントラスト比は約1.25:1にとどまります。カード全体を押して日程を選ぶ設計なら、グレー青 ■#71818Aの枠線を付ける方法があります。枠線は白いカード ■#FFFFFFと約4.03:1、外側の青灰 ■#DDE8EBと約3.23:1です。選択後は「選択中」という文字も表示し、線の色だけに頼らないようにします。
なお、最初のオフホワイト ■#F7F5EFを採用した場合も、白いカード ■#FFFFFFとの差は約1.09:1です。ベースが淡いときは、別の淡色を追加するだけで境界が明確になるとは限りません。
3．ベースの上にメインとアクセントを置く
見出しと補助リンクには深い青 ■#24566Dを使います。採用した淡い青灰の背景 ■#DDE8EBに対する文字の比率は約6.40:1で、リンクは下線でも区別します。「参加を申し込む」ボタンには赤茶色 ■#9B4930と白文字 ■#FFFFFFを組み合わせ、文字とボタンは約6.20:1、ボタンとベース背景 ■#DDE8EBは約4.96:1です。
ただし、この赤茶色 ■#9B4930を濃い青の案内帯 ■#24566Dに直接置くと、面同士は約1.29:1しかありません。メインとアクセントの両方が濃い場合は、申込みボタンを淡いベースの面へ配置し直す方が境界を明確にできます。
文字を薄くしすぎず、スマホと操作状態で再確認する
淡いグレー青 ■#8EA0A5を補足文字に使うと、採用した背景 ■#DDE8EBに対して約2.18:1で、通常サイズの文字には不足します。また、白いカード ■#FFFFFFに薄い線 ■#D5DDDFを付けても約1.38:1しかありません。カードの境界が操作に必要なら、先ほどの濃い枠線に変更します。
ホバー（マウスを重ねた状態）ではボタンを暗い赤茶 ■#803A27に変えると、白文字 ■#FFFFFFと約8.23:1です。フォーカス（キーボードなどで現在操作している状態）では、少し離した濃い青 ■#1B4C69の輪郭を付ける方法があります。輪郭は青灰背景 ■#DDE8EBと約7.36:1、最初のオフホワイト候補 ■#F7F5EFとも約8.43:1です。
WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツのアクセシビリティ指針）のAA水準では、通常サイズの文字と背景に原則4.5:1以上、大きな文字には3:1以上が必要です。操作部品を識別するのに必要な非テキストの表示には、隣接色との3:1以上が求められます。ベースカラーを決めただけで適合は保証されません。スマートフォンでも、改行した本文・写真・日程カードの境界・申込みボタンを確認してください。