モバイルヘッダーを濃色にする場合の配色｜文字とアイコンの選び方
スマホのヘッダーを濃い色にすると、サイト名を引き締めて見せながら本文と区切ることができます。ただし、文字が明るくても、検索やメニューの小さなアイコンが見つけにくければ操作に迷います。濃色ヘッダーでは、背景との明るさの差を確保し、通常の操作とメニューを開いた状態を区別するのが基本です。
濃色ヘッダーは文字と操作アイコンを別々に確認する
最初にヘッダーの背景色を決め、サイト名・補助文字・検索・メニューの順に色を合わせます。小さな文字まで同じ明るさにする必要はありませんが、薄くしすぎないことが大切です。コントラスト比とは、隣り合う2色の相対的な明るさの差を表す数値です。
WCAG 2.2（WEBコンテンツを利用しやすくするための指針）のレベルAAでは、通常サイズの文字は背景に対して原則4.5:1以上、大きな文字は3:1以上のコントラスト比が必要です。操作部品を識別するために必要なアイコンや境界にも、隣接色と原則3:1以上が求められます。サイトのロゴ文字には文字の基準の例外がありますが、トップへ戻る操作として認識できるかも確かめましょう。
明暗差が十分でも、線の細いアイコンは小画面で形が分かりにくいことがあります。色に加えて線の太さや周囲の余白も調整し、虫眼鏡とメニューなどの形を見分けられるようにします。
オンライン講座サイトのモバイルヘッダー配色例
「講座を探す」「検索」「メニュー」を上部に置くオンライン講座サイトを想定します。以下のHEX（16進数で色を表すWEBカラーコード）とコントラスト比は、指定した色同士を実際に計算した例です。
- ヘッダー背景とサイト名：濃いネイビー#183451を背景にし、サイト名には白#FFFFFFを使用します。比率は約12.74:1。背景を単色にすると、下に写真があっても文字の後ろの色が変わりません。
- 検索とメニューのアイコン：同じ濃いネイビー#183451の上で、淡いブルー#E7F1FCにそろえます。比率は約11.15:1。一般的な操作を同じ色にして、片方だけが不必要に強調されないようにします。
- 小さな補助文字：「講座を探す」などの短い説明は、濃いネイビー#183451の上に落ち着いたブルーグレー#BDD2E6を使うと約8.20:1です。サイト名と少し明るさを変えても、十分な差を保てます。
- 開いているメニューの表示：メニューボタンを開いた状態では、淡いミント#B9F3DCの面を濃いネイビー#183451のヘッダーに置きます。面とヘッダーは約10.26:1。面上のアイコンを濃い青#17314Bにすると約10.72:1です。「閉じる」の文字やアイコンの形の変化も組み合わせます。
この組み合わせは、暗い背景を共通の土台にして、通常操作は淡いブルー、開いている状態は明るい面と濃い図形で分ける設計です。単に色数を増やすより、色の役割をそろえることを優先します。
メニュー展開後とスクロール中の背景を見直す
メニューを展開した先が白#FFFFFFのパネルなら、濃色ヘッダーで使った淡いアイコン色をそのまま流用しません。項目名と必要な矢印を濃い青灰#223D58に切り替えると、白との比率は約11.19:1です。開いているページは色だけでなく、現在位置を示す文字や形でも伝えます。
スクロール中にヘッダーを半透明にすると、背後の写真や文字によって実際の背景色が変わります。確認できない組み合わせを避けるには、文字やアイコンの背面を単色の濃色で保つ方法が確実です。キーボード操作のフォーカス表示には、濃いネイビー#183451上で約8.77:1となる明るい黄#F8D273の枠を候補にできます。指で押す範囲は、見た目のアイコンより広く確保しましょう。
HueRollではHEXコードで色を調整し、選択色と白・黒のコントラストを確認できます。一方、任意の2色間の比較やWCAGのAA・AAA自動判定はできません。ヘッダーとアイコンなどの組み合わせは別に計算し、実際のスマホ表示でも確認してください。