ペールブルーの背景に何色の文字を載せる？色の濃さを比べる

ペールブルーの背景には、濃いネイビーやチャコールなど、十分に暗い文字色が合わせやすいです。青灰色の文字も雰囲気は合いますが、濃さによっては通常の本文に必要なコントラストを満たしません。また、背景の青を少し薄くするだけで同じ文字色の判定が変わることもあります。実際の数値を比べ、読書会のお知らせと申込みフォームでの使い分けを紹介します。

ペールブルーと文字色を、明るさの差で比較する

ペールブルーは白みのある淡い青を表す幅の広い色名です。カラーサイト.comの色見本には■#AFEEEE（RGBは赤175・緑238・青238）が掲載されています。今回はこれを基準とし、もう少し白に近い■#E3F7F9をデザイン用の比較色として選びます。色名に唯一の数値があるわけではありません。RGBは赤・緑・青の光の成分、HEX（ヘックス）は「#」と6桁の英数字でWebの色を示す方式です。

コントラスト比は、文字と背景の相対的な明るさの差を表す数値です。次の表は、同じ文字色を2種類の背景に載せた場合の比率を示します。右側の「可」「不足」は、WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAが通常サイズの文字に求める4.5：1以上を基準としています。

同じ中間の青灰色■#517484でも、基準のペールブルー■#AFEEEEでは通常文字に不足し、淡い背景■#E3F7F9では4.53：1と基準をわずかに上回ります。画面上の背景を変える予定がある場合は、最初から十分な余裕のある濃いネイビー■#243D4Dを本文色にすると確認しやすくなります。文字の色名が「青」でも、実際に必要なのは背景との明暗差です。

読書会のお知らせと申込みフォームで文字の役割を分ける

例A：地域の読書会のお知らせカード。カードの背景をペールブルー■#AFEEEEにし、見出し「今月の読書会」、開催日、集合場所、説明文を濃いネイビー■#243D4Dで表示します。文字と背景は約8.81：1です。「参加案内を見る」ボタンは濃い青緑■#245769の面に白■#FFFFFFの文字を使い、ボタン文字と背景の比は約7.95：1、ボタン面と周囲のペールブルーは約6.16：1です。短い案内と操作を区別しつつ、淡い背景のまままとめられます。

例B：体験講座の申込みフォーム。フォームの外側をさらに淡いブルー■#E3F7F9にして、説明や項目名を濃いネイビー■#243D4Dにします。この組み合わせは約10.24：1です。日付の補足など短い文字を中間の青灰色■#517484にする案もありますが、比は約4.53：1と余裕が少ないため、重要な項目名や小さな注釈は濃い色を優先します。入力欄は白■#FFFFFFにし、文字は濃いネイビー■#243D4Dにします。白い入力欄と淡いブルーの差は約1.11：1なので、必要な境界には青灰色■#526C79の線を加えます。この線は淡いブルーと約5.01：1、白と約5.56：1です。

文字の基準と入力欄の境界を別々に確認する

WCAG 2.2のレベルAAでは、大きな文字の基準は3：1ですが、通常サイズの本文・日時・注釈には4.5：1以上が必要です。中間の青灰色■#517484を基準のペールブルー■#AFEEEEに載せる3.90：1の組み合わせは、大きな文字の数値基準を超えても、通常文字に使えるとは限りません。白■#FFFFFFはどちらの淡い背景でも通常文字に不足します。

また、白■#FFFFFFの入力欄とペールブルー■#AFEEEEの境界は約1.29：1で、色面だけでは分かりにくい場合があります。操作部品の識別に必要な視覚情報には、隣接色と原則3：1以上が求められます。境界を示す青灰色■#526C79は基準のペールブルーに対して約4.31：1です。ラベルやフォーカス位置も色だけに頼らず、スマートフォンでも確認しましょう。

HueRollはHEX入力による色の調整と、選択色と白・黒とのコントラスト確認に対応します。ただし、任意の2色同士の比較やWCAGの自動合否判定はできません。この記事の背景・文字・ボタン・枠線の比率は別途計算しています。