ローディング画面の色はどう決める？待ち時間になじむUIカラー

ローディング画面は、データ取得や画面切り替えなどで待ち時間が発生するときに表示するUIです。待っていることを知らせる必要はありますが、強い色で画面全体を覆うと、処理中の表示そのものが主役になってしまいます。基本はサイトの背景色やブランドカラーを引き継ぎ、読み込み中の文字とインジケーターだけを明確に見せます。この記事では、明るいニュートラル背景に落ち着いたブルーを合わせる例で、待ち時間になじむ配色を考えます。

ローディング画面は背景を静かにし、状態表示を読めるようにする

画面全体の背景にはオフホワイト ■#F7F8FA、読み込み中の文字にはダークグレー ■#4B5563 を使うと、コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約7.11:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。

「読み込み中」「データを取得しています」のような文章は、淡い装飾色ではなく通常の文字として確認します。背景を普段のページに近い色にすると、別画面へ切り替わった印象を抑えつつ、状態表示だけを必要な強さで見せやすくなります。

インジケーターはアクセント色と薄いトラックを明度差で分ける

円形のインジケーターや短いバーには、進行を示す部分としてブルー ■#315D94、残りのトラックとしてライトグレー ■#E5E7EB を使う例があります。この2色の比率は約5.43:1です。ブルー ■#315D94 と背景のオフホワイト ■#F7F8FA も約6.33:1あります。

WCAG 2.2の非テキストコントラストでは、操作や内容の理解に必要なUIの状態・グラフィックには、隣接色との3:1以上が基準です。読み込み中であることを認識するためにインジケーター自体が必要なら、色相だけでなく明度にも差を付けます。ただし、青だけで「処理中」を意味させず、近くに「読み込み中」と文字でも示します。WCAGでは、色を情報伝達の唯一の手段にしないことも求められます。

ブランドカラーを使っても、待ち時間だけ別の配色にしない

ローディング画面専用の派手な色を追加する必要はありません。普段のサイトで使うPrimaryカラー（主要な操作や強調に使う基準色）が十分なコントラストを持つなら、インジケーターにも同じ色を使えます。画面全体は背景色と文字色を維持し、アクセントを1か所に絞ると、処理前後の画面とのつながりを保ちやすくなります。

更新中の領域を支援技術にも伝える場合は、対象の要素に aria-busy="true" を設定し、更新が終わったら false に戻す方法がWAI-ARIAで定義されています。進捗率が分からない処理では、見た目だけで「50%」などの数値を作らず、処理中であることをそのまま示します。

HueRollでは候補色を3桁または6桁のHEX（Webで色を表す16進数コード）やカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、インジケーターとトラック、文字と背景など、実際に隣接する組み合わせの比率は別途確認します。