ビビッド・ミントに合う色は？強いミントを爽快に見せる配色【#1FFFAB】

ビビッド・ミント（■#1FFFAB）は、緑とシアンの間にある、彩度（色の鮮やかさ）が高い明るいミントです。クラウドバックアップ（データをオンライン上に複製して保存する仕組み）の管理画面では、選択中のバックアップ、主要な「今すぐバックアップ」ボタン、完了した処理のアクセントなどに絞って使うと、強いミントを爽快に見せながらファイル名や保存状況を整理しやすくなります。ここでは、ミントホワイト、ディープフォレスト、ミューテッドプラムを組み合わせます。

ミントホワイトを土台にし、濃いフォレストとプラムで役割を分ける

■#1FFFABには、ページ背景用のミントホワイト■#F5FCF9、ファイル名・保存先・時刻・枠線用のディープフォレスト■#12352D、履歴表示などの補助操作用のミューテッドプラム■#5B3F73を合わせる例が考えられます。

■#F5FCF9はごく淡い緑みを含む明色で、バックアップ一覧や説明カードの広い面を軽く保てます。■#12352Dは緑みを含む低彩度の濃色なので、ファイル名、保存先、最終実行時刻、容量などをミントより落ち着いて整理できます。■#5B3F73は紫寄りの低彩度色で、ミントから色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「バックアップ履歴を見る」などの補助操作を主要操作と分けやすくなります。

バックアップ画面では、ビビッド・ミントを選択状態と主要操作に使う

実装では、ページ全体と未選択のバックアップカードを■#F5FCF9にし、ファイル名、保存先、容量、最終実行時刻を■#12352Dにします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約12.83:1です。

選択中のバックアップや主要な「今すぐバックアップ」ボタン背景へ■#1FFFABを使い、その上の文字と枠線を■#12352Dにすると約10.14:1です。通常サイズの文字に必要な4.5:1以上を十分に確保できます。一方、■#1FFFABと■#F5FCF9の差は約1.26:1しかないため、明るい背景上ではミントの塗りだけでカードやボタンの境界を示さず、■#12352Dの枠線やアイコンを併用します。この枠線と■#F5FCF9の背景は約12.83:1です。

「バックアップ履歴を見る」などの補助ボタンは■#5B3F73を背景にし、その上の文字を■#FFFFFFにすると約8.74:1です。ミューテッドプラムとページ背景の差も約8.39:1あり、■#1FFFABとの比率は約6.64:1です。

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

爽快に見せるなら、完了・実行中・失敗をミントだけで伝えない

■#1FFFABと■#FFFFFFのコントラスト比は約1.32:1なので、ミント背景へ通常サイズの白文字を置く使い方は避けます。主要ボタンには■#12352Dの文字を使い、明るいページ背景上では同じ濃色の枠線も残します。

また、「完了」「実行中」「失敗」「一時停止」などの状態を色だけで表さず、状態名の文字、チェックマーク、進捗率、警告アイコンなども併用します。HueRollでは■#1FFFABをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。