撫子色とはどんな色?読み方と由来を色見本で紹介
撫子色は何と読み、どのような色なのでしょうか。撫子色はナデシコの花にちなんだ、少し紫みのある柔らかなピンク系の和色です。名前の由来を確かめ、2つの色見本を比較しながら、Webページで使うときの文字色や背景の選び方も紹介します。
撫子色は「なでしこいろ」と読む、花に由来する和色
撫子色(なでしこいろ)は、ナデシコの花を思わせる淡い赤紫寄りのピンク色です。ナデシコはナデシコ科の植物で、カワラナデシコなどが知られています。色の名は花の色に由来し、鮮やかな赤ではなく、柔らかな赤みと紫みを含む色として紹介されます。
植物名の「撫子」には、かわいらしい花を愛児にたとえ、「撫でるように大切にしたい子」と結び付けた語源説があります。国立国会図書館のレファレンス協同データベースでは、植物名の由来について複数の説が紹介されています。ナデシコは古くから和歌にも詠まれ、「撫子」という名は平安時代の衣装の色合わせである「襲(かさね)の色目」にも使われました。ただし、現在のHEXコードが当時から定まっていたわけではありません。
撫子色の色見本を比べてカラーコードを選ぶ
和色大辞典は撫子色を#EEBBCB、I-IROは#CF8F97として掲載しています。HEX(ヘックス)はWebで使う色を16進数で表すコードです。和色大辞典の例はRGB(赤・緑・青の数値で表す色の形式)で238・187・203、I-IROの例は207・143・151です。後者は赤・緑・青の値がいずれも低く、和色大辞典の見本より落ち着いた、少し暗いピンクです。
2つの色見本のコントラスト比(2色の相対的な明るさの差)は約1.57:1で、I-IROの見本のほうが暗く見えます。色名が同じでも数値は資料によって異なるため、制作時は参照する色見本を決め、同じHEXコードを使い続けましょう。この2色の差だけで重要な情報を区切ることは避けます。
花の催しを紹介するWebページでの使い方
展示や体験会の案内では、和色大辞典の撫子色#EEBBCBを冒頭の背景に使い、タイトルを深い赤紫#4F3343にします。文字と背景の比は約6.68:1です。説明や日時の文字を濃い青灰#27343Cにすると、撫子色上で約7.67:1になります。花の色を大きく使いながら、文字は濃い色で支える構成です。
開催日や会場を白#FFFFFFのカードにまとめる場合、カードと撫子色の差は約1.67:1と小さめです。必要なら灰みのある紫#75606Aの枠を加え、外側の撫子色と約3.47:1、内側の白と約5.77:1の差を作ります。申込みボタンは深い青緑#205B56に白#FFFFFFの文字を合わせれば、文字との比は約7.80:1、ボタンと撫子色の周囲の比は約4.68:1です。
淡い撫子色を使うときの読みやすさと注意点
和色大辞典の撫子色#EEBBCBと白#FFFFFFの比は約1.67:1、I-IROの撫子色#CF8F97と白の比は約2.62:1です。どちらも通常の文章を白文字で載せるには明暗差が足りません。濃い文字色を選び、ピンクの色みの違いだけで選択状態を伝えないようにします。花の写真の上に文字を置く場合も、実際の写真の明暗を別に確認しましょう。
WCAG 2.2(Webコンテンツのアクセシビリティに関するガイドライン)のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上のコントラスト比が必要です。操作部品の識別に必要な視覚情報にも、隣接色との3:1以上が求められる場合があります。HueRollではHEX入力から関連色や配色候補を探し、選択色と白・黒のコントラストを確認できます。ただし任意の2色同士の比較やAA・AAAの自動判定はできないため、完成した組み合わせは別途検証してください。