ブライト・シアンに合う色は？鮮烈なシアンをクリアに見せる色合わせ【#3DFFFF】

ブライト・シアン（■#3DFFFF）は、青と緑の中間にある、非常に明るく鮮やかなシアンです。EV充電サービスの充電開始画面では、選択中の充電コネクタ、主要な「充電を開始」ボタン、充電手順の現在位置などに絞って使うと、鮮烈なシアンをクリアに見せながら充電器名や料金、接続情報を整理しやすくなります。ここでは、フロストホワイト、ディープペトロール、ディープワインを組み合わせます。

フロストホワイトを土台にし、濃いペトロールとワインでシアンを引き締める

■#3DFFFFには、充電器一覧や料金カードの背景用のフロストホワイト■#F6FBFB、充電器名・料金・ボタン文字・枠線用のディープペトロール■#102A2E、利用履歴や料金詳細などの補助操作用のディープワイン■#633C46を合わせる例が考えられます。

■#F6FBFBはごく淡い青緑を含む明色で、充電器一覧や料金表示の広い面を軽く保てます。■#102A2Eは青緑を含む低彩度の濃色なので、充電器名、料金単価、接続口、注意事項などをシアンより落ち着いて整理できます。■#633C46は赤紫寄りの暗い低彩度色で、シアンから色相（赤・青・緑など色みの違い）を離しているため、「利用履歴を見る」「料金詳細を確認」などの補助操作を主要な充電開始操作と分けやすくなります。

EV充電画面では、ブライト・シアンを選択中コネクタと充電開始操作に使う

実装では、充電器一覧と未選択カードの背景を■#F6FBFBにし、充電器名、料金、接続口、利用条件を■#102A2Eにします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約14.44:1です。

選択中の充電コネクタ、主要な「充電を開始」ボタン背景、手順の現在位置へ■#3DFFFFを使い、その上の文字と枠線を■#102A2Eにすると約12.17:1です。通常サイズの文字に必要な4.5:1以上を十分に確保できます。一方、■#3DFFFFと■#F6FBFBの差は約1.19:1しかないため、明るい背景上ではシアンの塗りだけで選択カードやボタンの境界を示さず、■#102A2Eの枠線やアイコンを併用します。この枠線とページ背景の差は約14.44:1です。

「利用履歴を見る」「料金詳細を確認」などの補助ボタンは■#633C46を背景にし、その上の文字を■#FFFFFFにすると約9.27:1です。ディープワインとページ背景の差も約8.88:1あり、■#3DFFFFとの比率は約7.48:1です。

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

クリアに見せるなら、白文字や充電状態の色分けだけに頼らない

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

また、「空き」「接続中」「充電中」「充電完了」「エラー」などの状態を色だけで表さず、状態名の文字、プラグや稲妻のアイコン、進行表示、警告記号なども併用します。HueRollでは■#3DFFFFをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。