ストロング・シアンに合う色は？力強いシアンをクリアに見せる色合わせ【#0BDADA】

ストロング・シアン（■#0BDADA）は、青と緑の中間にあるシアンを明るく鮮やかにした色です。Webサイトでは、イベントやセミナーの申込みフォームで、現在のステップ、選択中の日程、主要な「次へ進む」ボタンなどに使うと、入力項目が多い画面でも力強いシアンをクリアなアクセントとして見せやすくなります。ただし、明るい背景との色面だけの差は小さいため、ボタンや進行状況をシアンの塗りだけで識別させるのは避け、濃い文字色や枠線を組み合わせる方が扱いやすくなります。ここでは、ミストホワイト、ディープスレート、ココアブラウンを合わせます。

ミストホワイトを土台にし、ディープスレートでシアンの輪郭を明確にする

■#0BDADAには、背景用のミストホワイト■#F4FCFC、本文・入力ラベル・枠線用のディープスレート■#102A30、補助操作用のココアブラウン■#5B3A2Eを合わせる例が考えられます。

■#F4FCFCはごく淡い青緑を含む明色で、シアンとの色相のつながりを残しながらフォーム全体を軽くできます。■#102A30は青緑を少し含む低彩度の濃色なので、入力ラベル、説明文、エラーメッセージの補足などを主役色より落ち着いて整理できます。■#5B3A2Eは暖色寄りの濃色で、シアンから色相（赤・青・緑など色みの違い）を離しつつ彩度を抑えているため、「戻る」などの補助操作を主要操作と分けやすくなります。

申込みフォームでは、ストロング・シアンを現在位置と主要CTAに集める

実装では、フォーム全体の背景を■#F4FCFCにし、現在のステップ、選択中の日程、主要なCTA（Call to Action、次の入力や申込み完了へ進む操作）の背景へ■#0BDADAを使います。その上の文字と2px程度の枠線を■#102A30にすると、文字とシアンのコントラスト比は約8.64:1です。通常サイズの文字に必要な4.5:1以上を満たします。また、枠線の■#102A30と背景の■#F4FCFCは約14.45:1なので、シアンの面そのものが背景から目立ちにくい場合でも、操作部品の境界を明確にできます。

一方、■#0BDADAと■#F4FCFCは約1.67:1、■#0BDADAと■#FFFFFFは約1.74:1です。そのため、淡い背景上でシアンの塗りだけをボタン境界にしたり、シアン背景へ白の通常文字を置いたりする使い方は避けます。補助の「戻る」ボタンは■#5B3A2Eを背景にし、その上の文字を■#FFFFFFにすると約10.05:1です。ココアブラウンとミストホワイトも約9.66:1あり、主要操作と補助操作を色面でも分けられます。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上、意味のあるUI（ユーザーが操作するボタンや入力欄などの画面部品）を色の境界で識別させる場合は隣接色との3:1以上が基準になります。ここでは、シアンの塗りだけでは背景との3:1に届かないため、濃い枠線と文字を併用する設計にしています。

クリアに見せるなら、現在・完了・未完了を色だけで区別しない

フォームの進行状況では、「現在」「完了」「未完了」をシアン、ブラウン、白の色分けだけで伝えず、ステップ番号、項目名、チェックマーク、太い枠線なども併用します。特に■#0BDADAと■#F4FCFCの差は約1.67:1なので、シアンの背景色だけで現在位置を示すと境界が分かりにくくなる場合があります。

主要CTAと「戻る」を横並びにする場合、■#0BDADAと■#5B3A2Eのコントラスト比は約5.77:1です。ただし、色の違いだけに操作の意味を持たせず、ボタン文言で役割を明確にします。HueRollでは■#0BDADAをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。