ディープ・シアンに合う色は？落ち着いた青緑をクールに見せる色合わせ【#1B9898】

ディープ・シアン（■#1B9898）は、青緑の涼しさを残しながら深さを持たせた色です。Webサイトでは、クラウドストレージやファイル共有ページで、共有操作、選択中のファイル、フォルダの見出しなどに使うと、鮮やかなシアンよりも落ち着いたクールさを出しやすくなります。ただし、■#1B9898は明るい背景上の通常文字としてはコントラストが十分ではないため、文字色として広く使うより、ボタンや選択面の背景として役割を決める方が扱いやすい色です。ここでは、クールミスト、インクブラック、ディープバイオレットを合わせ、落ち着いた青緑をクールに見せながらファイル操作を整理しやすい配色を考えます。

クールミストを土台にし、濃い文字色と紫で青緑の役割を分ける

■#1B9898には、背景用のクールミスト■#F2F8F7、本文やボタン文字用のインクブラック■#202124、補助操作用のディープバイオレット■#453951を合わせる例が考えられます。

■#F2F8F7は青緑をわずかに含む明色で、ファイル一覧や共有設定カードの広い面を軽くできます。■#202124はほぼ無彩色の濃色なので、ファイル名、更新日時、容量、注意事項などを青緑一色にせず整理できます。■#453951は紫寄りの濃色で、シアンから色相をずらしながら彩度を抑えているため、補助操作を別の役割として見せやすくなります。

ファイル共有ページでは、ディープ・シアンを主要操作と選択面に集める

実装では、ファイル一覧や共有設定カードの広い背景を■#F2F8F7にし、主要な「共有リンクを作成」ボタンや選択中のファイル行の背景へ■#1B9898を使います。その上の文字は■#202124にすると、青緑の面でも通常文字に必要なコントラストを確保できます。本文、ファイル名、更新日時は■#202124で統一し、色だけで情報階層を作らないようにします。

UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作として、濃い■#1B9898の面に■#453951の小さな「権限を変更」ボタンを置き、その文字を■#F2F8F7にする方法があります。

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

クールに見せるなら、共有状態や選択状態を色だけで伝えない

■#1B9898と■#F2F8F7のコントラスト比は約3.26:1です。そのため、明るい背景上の通常サイズの本文文字として■#1B9898を使うのは避け、文字は■#202124へ切り替えます。シアンは主要ボタン、選択行、枠線などへ役割を絞ると、クールさを保ちながら情報を読み分けやすくなります。

また、「共有済み」「リンク未作成」「選択中」などの状態は、シアンや紫だけで区別せず、状態名の文字、チェックマーク、アイコン、太めの枠線なども併用します。HueRollでは■#1B9898をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。