ピュア・ミントに合う色は？鮮やかなミントを涼やかに引き立てる配色【#00FF9F】

ピュア・ミント（■#00FF9F）は、緑とシアンの間にある非常に明るく鮮やかなミントです。APIドキュメントやコードを試せる開発者向けページでは、主要な「リクエストを実行」ボタン、選択中のエンドポイント、コード例の強調などへ使うと、鮮やかさを保ちながら涼やかなアクセントとして見せやすくなります。ただし、白に近い背景では明るさの差が小さいため、ミントの塗りだけでボタンや選択状態を示すと境界が分かりにくくなる場合があります。ここでは、グラファイトネイビー、フロストホワイト、ディーププラムを組み合わせます。

グラファイトネイビーで明度差を作り、白とプラムで役割を分ける

■#00FF9Fには、コードパネル背景用のグラファイトネイビー■#142329、ページや説明カード背景用のフロストホワイト■#F4FAF8、補助操作用のディーププラム■#6A405Fを合わせる例が考えられます。

■#142329は青緑をわずかに含む暗い色で、明るいミントをコード画面の中で鮮明に見せやすくなります。■#F4FAF8は白に近い寒色寄りの明色なので、説明文やパラメータ表など長く読む面を軽く保てます。■#6A405Fは赤紫寄りの低彩度の濃色で、ミントから色相（赤・青・緑など色みの違い）を離しつつ、補助ボタンや別系統の操作を落ち着いて分けるために使えます。

APIページでは、ピュア・ミントを実行操作と選択中の要素に集める

実装では、説明エリアやパラメータ表の背景を■#F4FAF8にし、コードパネルを■#142329にします。コードパネル内の選択中タブ、重要な行、主要な「リクエストを実行」ボタンへ■#00FF9Fを使い、その上の文字やアイコンを■#142329にすると、コントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約12.14:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

コード本文や補足情報を■#F4FAF8で表示すると、■#142329との比率は約15.26:1です。明るい説明エリアに置く「リセット」「別形式で表示」などの補助ボタンは、■#6A405Fを背景にし、その上の文字を■#FFFFFFにすると約8.36:1です。プラムとフロストホワイトの差も約7.91:1あります。

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

涼やかさを保つなら、明るい面では濃い枠線と文字を併用する

■#00FF9Fと■#F4FAF8のコントラスト比は約1.26:1、■#00FF9Fと■#FFFFFFも約1.33:1です。そのため、明るい説明エリアにミントのボタンを置く場合は、塗りだけで境界を示さず、■#142329の文字と枠線を併用します。シアン寄りの明るいミントに白の通常文字を重ねる使い方も避けます。

また、選択中のタブ、実行済みの結果、正常状態など複数の意味をすべてミントだけで表すと、色の役割が増えすぎます。現在位置には下線、実行結果には見出し、状態には文字ラベルやアイコンなどを加え、色以外でも違いが分かるようにします。HueRollでは■#00FF9FをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。