ライト・シアンに合う色は？澄んだ水色を爽快に見せる色合わせ【#88F2F2】

ライト・シアン（■#88F2F2）は、青と緑の中間にある、明るく澄んだ水色です。CSV（表形式のデータをカンマ区切りで保存するファイル形式）のインポート画面では、現在の手順、主要な「インポートを開始」ボタン、読み込み件数の短いアクセントなどに絞って使うと、水色を爽快に見せながら、ファイル名や項目対応、エラー内容を整理しやすくなります。ここでは、ディープペトロール、ウォームクラウド、ミューテッドベリーを組み合わせます。

ディープペトロールで水色を引き締め、明るい背景とベリーで役割を分ける

■#88F2F2には、現在の手順と主要操作をまとめるパネル用のディープペトロール■#17343D、ファイル情報や項目対応の背景用のウォームクラウド■#F8FAF4、履歴確認や設定変更などの補助操作用のミューテッドベリー■#6B4A5Aを合わせる例が考えられます。

■#17343Dは青緑寄りの暗い低彩度色で、ライト・シアンの明るさを残しながら文字や輪郭を引き締められます。■#F8FAF4はわずかに黄みを含む明色なので、列名、登録先項目、プレビュー行など情報量の多い面を軽く保てます。■#6B4A5Aは赤紫寄りの落ち着いた濃色で、シアンから色相（赤・青・緑など色みの違い）を離しながら、「インポート履歴を見る」「設定を変更」などの補助操作を主要な開始操作と分けやすくします。

データ取り込みでは、ライト・シアンを現在手順と主要操作に集める

実装では、ファイル情報、項目対応、データプレビューの背景を■#F8FAF4にし、ファイル名、列名、登録先項目、エラー説明を■#17343Dにします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約12.52:1です。

現在の手順をまとめるパネルを■#17343Dにし、主要な「インポートを開始」ボタン背景、現在のステップ番号、読み込み予定件数の短いアクセントへ■#88F2F2を使います。ボタン上の文字とアイコンを■#17343Dにすると約10.05:1で、通常サイズの文字に必要な4.5:1以上を確保できます。シアンのボタン面とディープペトロールのパネルも約10.05:1あるため、主要操作を暗い面から区別できます。

明るい■#F8FAF4の項目対応表で、選択中の行や現在ステップへ■#88F2F2を使う場合、2色の差は約1.25:1しかありません。そのため色面だけで選択状態を示さず、■#17343Dの枠線、「選択中」の文字、チェックアイコンを併用します。「インポート履歴を見る」「設定を変更」などの補助ボタンは■#6B4A5Aを背景にし、その上の文字を■#FFFFFFにすると約7.63:1です。ミューテッドベリーとウォームクラウドの差も約7.26:1あります。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上が必要です。また、意味のあるUI（ユーザーが操作するボタンや選択欄などの画面部品）を識別するために必要な視覚情報には、隣接色との3:1以上が基準になります。

爽快に見せるなら、白文字や取り込み状態の色分けだけに頼らない

■#88F2F2と■#FFFFFFのコントラスト比は約1.31:1なので、シアン背景へ通常サイズの白文字を置く用途では4.5:1へ届きません。この例では主要ボタンの文字を■#17343Dにします。

また、「未確認」「準備完了」「取り込み中」「完了」「エラー」などを色だけで区別せず、状態名の文字、件数表示、チェックや警告アイコンを併用します。HueRollでは■#88F2F2をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。