リッチ・シアンに合う色は？深いシアンを洗練された印象に見せる色合わせ【#14B8B8】

リッチ・シアン（■#14B8B8）は、青と緑の中間にあるシアンを深く鮮やかにした色です。Webサイトでは、チーム向けSaaSの分析ダッシュボードで、選択中のフィルター、重要指標の強調、主要な「レポートを作成」ボタンなどに使うと、情報量の多い画面でも深いシアンを洗練されたアクセントとして見せやすくなります。ただし、明るい背景にシアンの塗りだけを置くと、ボタンやグラフの境界としてはコントラストが不足する場合があります。ここでは、ペールアクアグレー、インクティール、クレイベージュを合わせ、文字とUIの見分けやすさも確認しながら配色を組み立てます。

ペールアクアグレーを土台にし、低彩度の濃色で情報を締める

■#14B8B8には、背景用のペールアクアグレー■#F4FAFA、本文や枠線用のインクティール■#173337、補助操作用のクレイベージュ■#D9B59Eを合わせる例が考えられます。

■#F4FAFAはごく淡い青緑を含む明色で、シアンとの色相のつながりを残しながら画面全体を軽くできます。■#173337は青緑をわずかに含む低彩度の濃色なので、指標名、期間、注記、表の文字などを落ち着いて整理できます。■#D9B59Eは暖色寄りの低彩度色で、シアンから色相を離しつつ鮮やかさを抑えているため、補助フィルターやサブ操作に変化を加えられます。

分析ダッシュボードでは、リッチ・シアンを選択状態と主要操作に絞る

実装では、指標カードや表の広い背景を■#F4FAFAにし、選択中の期間フィルター、重要指標のラベル、主要な「レポートを作成」ボタン背景へ■#14B8B8を使います。その上の文字は白ではなく■#173337にすると、コントラスト比は約5.48:1となり、通常サイズの文字に必要な基準を満たします。指標名、数値の補足、表の本文は■#173337へ統一すると、シアンを主要な強調箇所へ限定できます。

UI（ユーザーが操作するボタンやフィルターなどの画面部品）の補助操作には、■#D9B59Eを「比較条件を追加」などのボタン背景に使い、文字と枠線を■#173337にします。リッチ・シアンのボタンにも■#173337の枠線を付けると、淡い背景との境界を色面だけに頼らず示せます。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#173337と■#F4FAFAは約12.72:1、■#173337と■#14B8B8は約5.48:1、■#173337と■#D9B59Eは約7.06:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。

洗練して見せるなら、シアンの塗りだけでボタンやグラフを識別させない

■#14B8B8と■#F4FAFAのコントラスト比は約2.32:1です。意味のあるUI部品やグラフの線を識別するための視覚情報には、隣接色との3:1以上が求められるため、淡い背景上でシアンの塗りや細い線だけに境界を任せるのは避けます。ボタンには■#173337の枠線を付け、グラフでは濃い輪郭、データラベル、点の形などを併用すると、色だけに依存しにくくなります。

また、「選択中」「異常あり」「目標達成」などの状態は、シアンとベージュの色分けだけで伝えず、状態名の文字、アイコン、数値、線種なども組み合わせます。HueRollでは■#14B8B8をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。