コバルトブルーと白の配色例｜鮮やかな青の面積を調整する

コバルトブルーと白の配色では、青をどのくらい広く使うかで、情報の見え方が変わります。白を中心にして青をボタンや小さな見出しだけに使えば、文章や比較表を追いやすい構成にできます。一方、青を大きな見出し背景に使うと、最初に見せたいイベント名などに視線を集めやすくなります。今回は配色面積を15％と45％で比較し、文字色や必要な境界の扱いまで考えます。

白い情報面を確保し、青を強調したい場所へ配分する

コバルトブルーは鮮やかで深みのある青の呼び名です。この記事ではFigmaの色ガイドに掲載された■#0047AB（RGBは赤0・緑71・青171）を基準色にします。RGBは画面の色を赤・緑・青の光の成分で示す方法で、HEX（ヘックス）は「#」と6桁の英数字でWebの色を指定する形式です。コバルトブルーという色名に唯一の数値が決まっているわけではありません。

基本の組み合わせは白■#FFFFFF、補助的な情報面には淡いブルーグレー■#EEF3F8、本文には濃いチャコール■#26313Bを使います。後者の2色はこの記事用に選んだ提案値です。

コバルトブルー■#0047ABと白■#FFFFFFのコントラスト比は約8.44：1です。コントラスト比は2色の相対的な明るさの差を表します。白の上のコバルトブルーの見出しや、青いボタンの白文字には十分な明暗差があります。ただし、同じ濃いチャコール■#26313Bを青い面に置くと約1.57：1しかありません。背景が青に切り替わる部分では、文字を白へ切り替えることが重要です。

青15％の料金比較ページと、青45％の映画会告知を比べる

例A：オンライン学習サービスの料金比較ページ。画面の背景などの色面を仮に「白70％・コバルトブルー15％・淡いブルーグレー15％」とします。白■#FFFFFFの面に料金・契約期間・プランごとの違いを並べ、本文をチャコール■#26313Bにします。白と文字の比は約13.25：1です。利用条件などの補足欄をブルーグレー■#EEF3F8にすると、同じ文字との比は約11.87：1になります。「無料体験を申し込む」ボタンとおすすめプランの短い見出しにだけコバルトブルー■#0047ABを使い、青いボタンの文字は白■#FFFFFFにします。青を狭い範囲に絞り、料金を比べる部分の情報量を優先する案です。

例B：夏の屋外映画会の告知ページ。今度は「白45％・コバルトブルー45％・淡いブルーグレー10％」を仮の目安にします。最初に見える大きな青い面に映画会の名前と日程を白■#FFFFFFで載せ、詳しい会場案内や注意事項は白■#FFFFFFの面にチャコール■#26313Bで置きます。青い見出し面に「参加方法を見る」ボタンを置くなら、白■#FFFFFFのボタン背景にコバルトブルー■#0047ABの文字を合わせます。ボタン文字と背景も約8.44：1、白いボタン面と周囲の青も約8.44：1です。補足の交通情報には淡いブルーグレー■#EEF3F8の面を使います。

2つの割合は色面の配分を比べるための設計例で、写真・文字・余白を含めた普遍的な正解ではありません。例Aは比較しやすさ、例Bは第一印象を優先しています。スマートフォンで例Bの青い見出しが画面を占めすぎる場合は、青い領域の高さを縮め、日程や申込み情報が続けて見えるよう調整しましょう。

青い面の文字と、白に近いカードの境界を確認する

WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字に原則4.5：1以上、大きな文字に3：1以上のコントラストが必要です。白■#FFFFFFとコバルトブルー■#0047ABの組み合わせは約8.44：1ですが、チャコール■#26313Bとコバルトブルー■#0047ABは約1.57：1なので、濃い文字なら何でもよいわけではありません。白い背景のコバルトブルーのリンクは色だけに頼らず、下線などでリンクと分かる形も付けます。

白■#FFFFFFと淡いブルーグレー■#EEF3F8の境界は約1.12：1です。単なる補助カードなら余白で整理できますが、入力欄や選択状態を識別するために輪郭が必要なら、青灰色■#637386の線を足す方法があります。この線は白と約4.85：1、淡いブルーグレーと約4.35：1です。操作部品の識別に必要な視覚情報には、隣接色と原則3：1以上の差が求められます。実際の線の太さやフォーカス表示も確認してください。

HueRollではHEX入力で色を調整し、選択色と白・黒のコントラストを確認できます。ただし任意の2色を直接比較したり、WCAGのAA・AAA合否を自動判定したりはできません。本文で挙げた文字・背景・ボタン・枠線の比率は別途計算しています。