勿忘草色に合う色は？やわらかな配色の作り方

勿忘草色（わすれなぐさいろ）には、温かみのあるアイボリーや淡いピーチ、濃い青灰色を組み合わせる方法があります。明るい青を主役にしながら、背景に余白を残し、文字やボタンだけを濃くすると、やわらかさと情報の見分けやすさを両立しやすくなります。花の定期便の紹介ページと春の写真展の告知バナーを例に、色の役割を具体的に比べます。

勿忘草色にはアイボリー・淡いピーチ・濃い青灰色を合わせる

勿忘草色はワスレナグサの花に由来する明るい青です。和色大辞典では、色見本として■#89C3EB（RGBは画面の色を赤・緑・青の光の成分で示す方式で、この色は赤137・緑195・青235）を掲載しています。HEX（ヘックス）は、Webで色を指定する「#」と6桁の英数字からなるカラーコードです。ここではこの青を基準に、残りの3色を配色用の提案値として選びます。

広い背景にはアイボリー■#FFF9F1、短いラベルや装飾には淡いピーチ■#F7DFD8を使うと、青だけの単調な配色に変化を付けられます。文字と主な操作ボタンには濃い青灰色■#25475Cを使い、淡色だけに頼らない構成にします。4色すべてを同じ面積で並べず、主役と補助役を決めることがポイントです。

花の定期便ページと写真展バナーの配色例

例A：花の定期便の紹介ページ。ページの広い背景をアイボリー■#FFF9F1にし、花の写真を並べます。見出しの短い帯は勿忘草色■#89C3EB、その上の文字と本文は濃い青灰色■#25475Cにします。「初回お届け」などの小さな案内ラベルには淡いピーチ■#F7DFD8を使い、ラベル文字は同じ青灰色■#25475Cで表示します。「定期便を申し込む」ボタンは青灰色■#25475Cの背景に白■#FFFFFFの文字を載せます。文字と背景のコントラスト比は、見出し帯で約5.19：1、本文とアイボリーで約9.40：1、ピーチのラベルで約7.73：1、ボタン文字と背景で約9.84：1です。

例B：春の花の写真展を知らせるバナー。こちらは勿忘草色■#89C3EBを大きな背景に使い、「春の花の写真展」の短い見出しを青灰色■#25475Cで表示します。日時と会場は淡いピーチ■#F7DFD8の小さな案内面にまとめ、文字を青灰色■#25475Cにします。「展示案内を見る」ボタンは青灰色■#25475Cの背景に白■#FFFFFFの文字を使います。ボタンの濃い面と周囲の青は約5.19：1の差があり、淡い背景の中で操作場所を区別する助けになります。

例Aではアイボリーを広く、例Bでは勿忘草色を広く使います。どちらも具体的な制作例としての提案で、写真の色や文章量に合わせて面積を変えてください。

淡い色の境界と、白文字のコントラストを確認する

勿忘草色■#89C3EBと白■#FFFFFFのコントラスト比は約1.90：1です。明るい青の上に小さな白文字を載せるのは避けましょう。勿忘草色■#89C3EBとアイボリー■#FFF9F1の差も約1.81：1、ピーチ■#F7DFD8とアイボリー■#FFF9F1の差は約1.22：1しかありません。淡い色面の輪郭が操作や情報の理解に必要なら、濃い青灰色■#25475Cの枠や文字で補います。

WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字は原則4.5：1以上、大きな文字は3：1以上が基準です。操作部品の識別に必要な視覚情報は隣り合う色と原則3：1以上が求められますが、装飾的な色面すべてに同じ枠線が必要なわけではありません。スマートフォン幅でも、見出し・日時・ボタンが順に読めるか確認します。

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