Surfaceカラーとは？カードやパネル背景に使う色の考え方

Surfaceカラーは、カードやパネル、メニュー、ダイアログなど「情報や操作を載せる面」の背景色として使う役割名です。CSS（Cascading Style Sheets、Webページの見た目を指定する仕組み）の予約語ではなく、デザインシステムの中で背景色の役割を整理するための考え方として使われます。強いブランドカラーをそのまま広い面に使うより、白や淡いニュートラルを基本にすると、文字やボタンを置きやすくなります。

Surfaceは「情報を載せる面」の背景色として考える

以下のHEX（Webで色を表す16進数コード）例では、ページ全体の背景をウォームグレー ■#F5F5F4、基本のSurfaceを白 ■#FFFFFF にします。この2色のコントラスト比（相対的な明るさの差を示す数値）は約1.09:1です。Surfaceを目立たせるための強い色差ではなく、余白やレイアウトと合わせて面を分けるための控えめな差として使います。

もう1段階のSurfaceが必要なら、サブパネルなどにオフホワイト ■#FAFAF9 を使う例があります。ページ背景の ■#F5F5F4 との比は約1.04:1です。すべてのカードに別の色を付けるのではなく、「基本Surface」「補助Surface」のように少数の役割へまとめると、画面が散らかりにくくなります。

Surfaceは特定の1色を指す共通規格ではありません。たとえばMaterial 3では、colorSurfaceContainerに加えてLow・High・Lowest・Highestなど複数のSurface系カラー役割を用意し、カードやダイアログ、メニューなどのコンテナ背景に使っています。実際の色数や役割名は、採用するデザインシステムに合わせて決めます。

Surface上の文字と操作色を先に確認する

白 ■#FFFFFF のSurfaceに、見出しをダークブラウン ■#292524 とすると約15.17:1、本文をブラウングレー ■#57534E とすると約7.63:1です。補助Surfaceの ■#FAFAF9 上でも、それぞれ約14.52:1、約7.30:1です。

リンクや主要な操作だけにバイオレット ■#7C3AED を使うと、白 ■#FFFFFF に対して約5.70:1、■#FAFAF9 に対して約5.46:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字は背景とのコントラスト比4.5:1以上が基準です。Surfaceを変えるたびに、その上に置く文字やリンクの組み合わせも確認します。

淡いSurface差を操作部品の唯一の境界にしない

Surface同士の差は、ページのまとまりや奥行きを補助するために小さくすることがあります。ただし、ボタンや入力欄、クリックできるカードなど、操作部品の存在や状態を識別する必要がある場合は別です。W3CのNon-text Contrastでは、操作部品を識別するために必要な視覚情報には隣接色との3:1以上が求められます。淡いSurface差だけに頼らず、文字・アイコン・必要な境界線やフォーカス表示も組み合わせます。

たとえばフォーカスリングにバイオレット ■#7C3AED を使うと、白 ■#FFFFFF に対して約5.70:1、補助Surfaceの ■#FAFAF9 に対して約5.46:1です。HueRollでは、候補色を3桁または6桁のHEXやカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、Surfaceと文字・操作色の実際の組み合わせは別途確認します。