パステルカラーをアクセシブルに使うには？WEB配色で注意したいポイント
パステルカラーは淡くやわらかな画面を作れますが、文字だけでなく入力欄の輪郭や操作中の表示まで淡色にすると、何を読んでどこを押すのか分かりにくくなります。アクセシビリティ（さまざまな人が情報や操作を利用しやすいこと）を考えるなら、淡い色を禁止するのではなく、色の役割を分けることが大切です。ここでは地域の朗読会の申込フォームで確認します。
パステル背景と文字・入力欄の輪郭を分けて考える
WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツを利用しやすくするための国際的な指針）のレベルAAでは、通常の文字と背景のコントラスト比は原則4.5:1以上、条件を満たす大きな文字は3:1以上です。コントラスト比は、隣接する色の相対的な明るさの差を示す数値です。さらに、入力欄などの操作部品を識別するために必要な視覚情報には、隣接色との3:1以上が原則として求められます。文字と部品の輪郭は別々に確認します。
例えば淡いラベンダー#EEE5FFに白#FFFFFFの文字を重ねると約1.21:1で、十分な差がありません。濃いすみれ色寄りのチャコール#302B42なら約11.15:1です。一方、控えめに見せようと灰紫#7E7791にすると約3.50:1に下がり、通常文字の基準に届きません。「補足だから薄くてよい」とは考えず、本文や項目ラベルの読みやすさを優先します。
同じラベンダー#EEE5FFの上に白い入力欄#FFFFFFを置くと、面同士の比率は約1.21:1で、入力する場所の境界が見えにくくなります。入力欄の識別に輪郭を使うなら、濃い紫灰#695A8Eの線を加えます。線と入力欄の白#FFFFFFは約6.08:1、線と外側のラベンダー#EEE5FFは約5.01:1です。これなら必要な輪郭を見せながら、背景には淡い色を残せます。
朗読会の申込フォームに使う配色と伝え方
フォーム全体は淡いラベンダー#EEE5FFとし、「お名前」「メールアドレス」などのラベルを濃いチャコール#302B42にします。比率は約11.15:1です。入力欄は白#FFFFFF、入力文字もチャコール#302B42にすると約13.55:1になります。入力欄の外には先ほどの紫灰#695A8Eの枠線を付け、ラベルは入力中も表示します。薄いプレースホルダー（入力例を欄内に一時表示する文字）だけをラベル代わりにはしません。
「申し込む」ボタンには深い紫#503A83の背景と白文字#FFFFFFを使います。文字とボタンの比率は約9.23:1、ボタンと周囲のラベンダー#EEE5FFは約7.60:1です。説明中の「参加条件を確認」リンクは濃い青紫#33459Cにすると、ラベンダー#EEE5FFとの比率は約6.99:1です。色だけでリンクだと知らせず、通常時から下線を付けます。
未入力があったときは、薄いピンク#FFE5E9の案内に濃い赤紫#782438の文字で「要修正：メールアドレスを入力してください」と表示できます。比率は約8.37:1です。送信完了時は淡いミント#D7F1E4に深緑#245243の文字で「受付完了」と表示すれば約7.44:1です。二つの淡色背景自体のコントラスト比は約1.00:1なので、背景の色分けだけで成否を伝えず、状態名と内容を文字で残します。
フォーカス・画面幅・色変更後に確認する
キーボードのTabキーで入力欄へ移動したときには、フォーカス（現在操作している場所）をはっきり示しましょう。例えば濃い紫#4C318Fの枠なら、外側のラベンダー#EEE5FFと約8.07:1、入力欄の白#FFFFFFと約9.80:1です。操作位置が分かる枠を消さず、線の太さや周囲との間隔も確認してください。
ページ背景のほぼ白い色#F8F7FCとラベンダー#EEE5FFの差は約1.14:1しかありません。色の境界自体が必要な案内なら、見出し・余白・明確な区切りも使います。スマートフォンで入力欄が縦並びになった場合、エラーメッセージの位置やボタンの操作しやすさも確かめましょう。文字の4.5:1と、必要な操作表示の3:1を混同しないことがポイントです。
HueRollではHEX（色を16進数で指定するカラーコード）を入力して、選んだ色と白・黒とのコントラスト比を確認できます。ただし任意の2色同士の比較やAA・AAAの自動判定には対応していません。今回の淡色と濃色の各組み合わせは別途計算した値です。数値に加えて、色に頼らないラベルと実際のキーボード・スマートフォン操作まで確認しましょう。