ダーク・シアンに合う色は？暗い青緑をクールにまとめる色合わせ【#1F7A7A】

ダーク・シアン（■#1F7A7A）は、青と緑の中間にあるシアンを暗く落ち着かせた色です。Webサイトでは、SaaSのシステムステータスページや稼働状況パネルの見出し、主要な確認ボタンなどに使うと、鮮やかなシアンよりも落ち着いたクールさを出しやすくなります。ただし、青緑系だけで画面をまとめると、稼働中・メンテナンス中・障害発生などの状態差が色だけに頼った表示になりやすく、情報の優先順位も見えにくくなることがあります。ここでは、クールホワイト、チャコールティール、ミューテッドラベンダーを合わせ、暗い青緑をクールにまとめながら状態情報を整理しやすい配色を考えます。

クールホワイトを土台にし、ラベンダーで青緑だけの単調さを避ける

■#1F7A7Aには、背景用のクールホワイト■#F4F7F6、本文や補助文字用のチャコールティール■#344849、アクセント用のミューテッドラベンダー■#C9C4E3を合わせる例が考えられます。

■#F4F7F6はわずかに青緑を含む明色で、ダーク・シアンとのつながりを残しながら広い情報面を明るくできます。■#344849は青緑を少し含む低彩度の濃色なので、本文、更新日時、補足説明などを基準色より控えめに整理できます。■#C9C4E3は紫寄りの低彩度色で、寒色のまとまりを保ちながら青緑から色相をずらし、鮮やかな紫ほど強く見せずに画面へ変化を加えられます。

システムステータスページでは、シアンを見出しと主要操作に集める

実装では、稼働状況一覧やサービスカードの広い背景を■#F4F7F6にし、ページ見出し、重要なサービス名、主要な「詳細を確認」ボタン背景などへ■#1F7A7Aを使います。説明文や最終更新時刻は■#344849へ分けると、ダーク・シアンを重要な情報と操作へ限定できます。UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、濃い■#1F7A7Aの面に■#C9C4E3の小さなボタンやラベルを置き、その文字を■#344849にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#1F7A7Aと■#F4F7F6は約4.73:1、■#344849と■#F4F7F6は約8.98:1、■#344849と■#C9C4E3は約5.76:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#1F7A7Aと■#C9C4E3は約3.03:1なので、濃いシアンの面に置く意味のあるUI部品の境界として必要な3:1以上も確保できます。

クールさを保つなら、状態の意味を色だけに持たせない

■#C9C4E3と■#F4F7F6のコントラスト比は約1.56:1です。そのため、明るい背景上の通常文字には使わず、ボタンやカードの存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#1F7A7Aや■#344849の枠線・文字を組み合わせます。

また、「正常稼働」「メンテナンス中」「障害発生」などの状態は、青緑・紫などの色だけで区別せず、状態名の文字、アイコン、記号なども併用します。ミューテッドラベンダーを広い面へ増やすより、濃いシアンの中に置く補助ボタンや短いラベルへ絞ると、寒色中心のクールなまとまりを保ちやすくなります。HueRollでは■#1F7A7AをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。