ペリウィンクルと白の配色｜やわらかな背景に文字を合わせる

ペリウィンクルと白は、淡い青紫の印象を生かした配色にできます。ただし、どちらも明るい色なので、白い文字や薄い枠線を使うと、文字や入力欄が背景に埋もれることがあります。やわらかい雰囲気を残すには、広く使う色と文字色を分け、ボタンや必要な境界だけ濃い青紫を使うのが効果的です。オンライン講座の案内カードとイベント申込みフォームで比較します。

ペリウィンクルの背景には濃い文字を合わせる

ペリウィンクルは、青と紫の間にある淡い色の呼び名です。カラーサイト.comでは■#CCCCFF（RGBは赤204・緑204・青255）を見本として紹介しています。RGBは画面の色を赤・緑・青の光の成分で表す方式、HEX（ヘックス）は「#」と6桁の英数字によるWebの色指定です。このコードは参考例であり、色名だけで唯一の数値が決まるわけではありません。

ペリウィンクル■#CCCCFFと白■#FFFFFFのコントラスト比は約1.54：1です。コントラスト比は2色の相対的な明るさの差です。淡い2色を背景にする場合も、本文と見出しにはチャコール■#25293Bを使うと、ペリウィンクル上で約9.35：1、白の上で約14.39：1の差を確保できます。背景を無理に暗くするより、文字に明暗差を付ける方法です。

白い案内カードと淡い申込みフォームの配色例

例A：オンライン講座の案内カード。ページの広い背景を白■#FFFFFFにして、講座のタイトルを囲む短い帯だけペリウィンクル■#CCCCFFにします。帯の見出しと、白い面にある開催日・料金・説明文はチャコール■#25293Bで表示します。「講座に申し込む」ボタンは濃い青紫■#4C5382の背景に白■#FFFFFFの文字を載せます。ボタン文字と背景の比は約7.32：1で、白いページ上でもボタンの位置を区別しやすくなります。淡い青紫は見出しの目印にとどめ、長い説明は白い領域に置く構成です。

例B：イベントの申込みフォーム。こちらはフォーム全体の背景をペリウィンクル■#CCCCFFにし、入力欄を白■#FFFFFFにします。項目名は淡い背景の上にチャコール■#25293B、入力する文字も白い欄の中にチャコール■#25293Bを使います。白い入力欄の輪郭には濃い青紫■#4C5382の枠線を付けます。枠線は外側のペリウィンクルと約4.76：1、欄の内側の白と約7.32：1の差があります。送信ボタンも濃い青紫■#4C5382と白■#FFFFFFの文字で統一し、入力欄と主な操作を区別します。

例Aでは白を広く、例Bではペリウィンクルを広く使います。色を半分ずつに分ける必要はなく、入力項目の数や文章量に合わせて余白と面積を調整します。

白文字と入力欄の境界を最後に確認する

ペリウィンクル■#CCCCFFに白■#FFFFFFの通常サイズの文字を置くと約1.54：1で、読みやすさの基準には足りません。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字に原則4.5：1以上、大きな文字に3：1以上が求められます。淡い青紫の上ではチャコール■#25293Bを使い、白文字は濃い青紫のボタンに限定します。

白■#FFFFFFの入力欄とペリウィンクル■#CCCCFFの背景も約1.54：1と近いため、枠が操作に必要なら、今回の濃い青紫■#4C5382の線を残します。操作部品や状態を識別するために必要な視覚情報には、隣接色との原則3：1以上のコントラストが基準です。ただし装飾だけの面にすべて濃い枠を付ける必要はありません。スマートフォンで入力欄やフォーカス位置が分かるかも確認しましょう。

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