明るい青と暗い青はどう使い分ける？WEBサイトでの役割を比較

WEBサイトを青でまとめるとき、明るい青と暗い青を同じように使うと、ボタンが埋もれたり、画面全体が重く見えたりします。違いを考える鍵は「どちらの青が好まれるか」ではなく、ページのどこで何を伝えるかです。ここではイベント予約サイトを例に、背景・見出し・申込ボタンへの使い分けと、文字の読みやすさを確認します。

明るい青は操作を示し、暗い青は情報を支える

明るい青の■#3B82F6は、白に近い背景の中で色の存在を示しやすく、主要な操作や短い強調に使う候補です。暗い青の■#1E3A8Aは、白い背景の見出しや、白文字を置くヘッダーなど、情報をまとめる場所に向きます。どちらも青系ですが、明度（色の明るさ）と彩度（色の鮮やかさ）が異なるため、同じ面積で使っても見え方は変わります。

ただし「明るい青なら必ず目立つ」「暗い青なら必ず信頼される」という決まりはありません。写真、余白、周囲の色、ボタンの大きさによって印象は変わります。色を選ぶ前に、読者に最初に読んでほしい情報と、最後に押してほしい操作を決めることが大切です。

イベント予約サイトの配色を具体的に組み立てる

例えば、地域イベントの日時を調べてチケットを予約するページなら、次のように色の仕事を分けられます。HEX（先頭の#に続けて数字0〜9と英字A〜Fを6桁並べる色コード）を添えて例を示します。コントラスト比は、文字や図形と背景の明るさの差を数値で表す指標です。

• ページ背景は白の■#FFFFFF、本文は濃いグレーの■#1F2937。文字と背景のコントラスト比は約14.68:1で、開催概要や注意事項を読み進める土台にします。
• 見出しとヘッダーは暗い青の■#1E3A8A。白背景の見出しとして使う場合、白の■#FFFFFFとのコントラスト比は約10.36:1です。濃いヘッダーの上にも白文字の■#FFFFFFを合わせられます。
• 日時や会場をまとめるカードは淡い青の■#EFF6FF。その上の見出しには暗い青の■#1E3A8Aを使い、コントラスト比は約9.52:1になります。淡いカードの色だけで境界を伝えず、余白や見出しでも区切ります。
• 「チケットを予約する」ボタンは明るい青の■#3B82F6、文字は黒に近い■#0F172A。この組み合わせは約4.85:1です。ボタン色と白い背景の■#FFFFFFの差は約3.68:1で、主要な操作の位置を示す助けにもなります。

この例では、暗い青に見出しや構造を担わせ、明るい青は予約ボタンに集中させています。もし申込ボタンも暗い青にすると、ヘッダーとの役割が近くなります。逆にすべてのカードを明るい青にすると、予約ボタンだけを優先して見せにくくなります。

文字のコントラストと、色以外の手掛かりを確認する

明るい青の■#3B82F6に白文字の■#FFFFFFを載せると、コントラスト比は約3.68:1です。WCAG（WEBコンテンツのアクセシビリティに関する指針）2.2のレベルAAが通常サイズの文字に求める4.5:1には届きません。一方、大きな文字には3:1の基準があります。ボタンの文字が通常サイズなら、先ほどの暗い文字の■#0F172Aを使うなど、文字色と背景色をセットで選びます。

また、色だけで重要度や操作状態を伝えないことも大切です。「予約する」「詳細を見る」といった具体的なラベルを付け、選択状態には枠線や印も加えます。スマートフォンでは画面の狭さで青の面積比が変わるため、実際の幅でも確認してください。

HueRollではHEXコードから青の濃淡候補を探し、選択色と白・黒のコントラスト比を確認できます。ただし任意の2色の比較やWCAGの自動合否判定はできません。この記事の白・黒以外の組み合わせは別途計算した値です。配色を決めたら、実際に隣り合う色と文字サイズを基準に最終確認しましょう。