薄紫とミントグリーンの配色｜淡い色で情報を整理するには？
薄紫とミントグリーンは、情報を種類別に分けたいWebページで使える淡い配色です。ただし、背景色を替えるだけでは、カードの境界や情報の優先順位がはっきりしないことがあります。大切なのは「何を知りたい人向けの情報か」を見出しで示し、淡い色をグループ分けの補助として使うことです。イベント案内とネットショップのサポートページを例に、文字色・枠線・ボタンまで考えます。
薄紫とミントグリーンは、見出し付きの情報グループに使う
今回は薄紫#E7DDF0とミントグリーン#D6EFE4を、少し色みの異なる淡い背景として組み合わせます。両方とも今回のデザイン用に選んだ色で、色名ごとに唯一のカラーコードがあるわけではありません。HEX（ヘックス）は「#」と6桁の英数字でWeb上の色を指定する表記です。基本のページ背景は白#FFFFFF、本文と見出しは濃いチャコール#27323Bとします。
薄紫#E7DDF0とミントグリーン#D6EFE4のコントラスト比は約1.08：1です。コントラスト比は2色の相対的な明るさの差を表す数値で、淡い2色の差は小さめです。白#FFFFFFとの比も薄紫#E7DDF0が約1.31：1、ミント#D6EFE4が約1.21：1。したがって、「紫だから案内、緑だから申込み」と色だけに意味を持たせず、カードの冒頭に内容を表す見出しを付けましょう。
イベント案内と購入後サポートで整理する内容を変える
例A：図書館の週末イベント案内。ページ全体を白#FFFFFFにし、薄紫#E7DDF0のカードには「開催概要」として日時・会場・対象年齢をまとめます。その下のミント#D6EFE4のカードには「参加前の準備」として持ち物・集合方法・申込期限を置きます。どちらも項目名を太字にして、本文はチャコール#27323Bにします。文字と薄紫の比は約9.96：1、文字とミントの比は約10.79：1です。「参加を申し込む」ボタンはカードの外側の白い面に濃い青緑#285363で置き、文字は白#FFFFFFにします。ボタン文字と背景は約8.37：1です。見出しで分かれた2つのカードの後に主操作を置くことで、読む順番も伝えられます。
例B：ネットショップの購入後サポート。こちらはミント#D6EFE4の広い領域に「配送について」の見出しと発送状況の確認手順を置きます。続く薄紫#E7DDF0の領域には「返品・交換について」と、受付条件・連絡前に確認する番号を整理します。「配送」「返品」という言葉と順序で違いを示し、色だけで区別しません。詳細を開く操作部品には濃い青灰色#536579の枠線を使う想定です。この枠線とミントの比は約4.94：1、薄紫との比は約4.56：1です。問い合わせボタンは濃い青緑#285363の背景と白#FFFFFFの文字で統一します。
例Aでは同じ大きさのカードを縦に並べ、例Bでは読む量の多い配送案内を広く取ります。色の面積は半分ずつにする必要はありません。情報の優先順位に合わせて余白や見出しの位置を変え、スマートフォンでは内容を上から順に読める並びにします。
淡いカードの境界と文字のコントラストを確認する
薄紫#E7DDF0とミント#D6EFE4に白#FFFFFFの文字を重ねると、それぞれ約1.31：1、約1.21：1しかありません。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字は原則4.5：1以上、大きな文字は3：1以上が必要です。今回の濃いチャコール#27323Bは白#FFFFFFに対して約13.08：1で、淡いカードと白い面の両方に使えます。
カード同士が接する場所では、まず余白や見出しで情報を整理しましょう。入力欄や開閉ボタンなど操作に必要な境界には、濃い青灰色#536579の線を付ける方法があります。白#FFFFFFに対する枠線の比も約5.99：1です。操作部品を識別するために必要な視覚情報には、隣り合う色と原則3：1以上の差が求められます。一方、装飾用のカードすべてに濃い枠を付ける必要はありません。
HueRollではHEX入力で色を調整し、選択色と白・黒のコントラストを確認できます。ただし任意の2色の比較やWCAGの自動合否判定はできません。今回の文字・枠線・ボタンと背景の組み合わせは別途計算しています。