CSS変数でカラーを管理するメリット｜配色変更を楽にする方法

イベントの申込みボタンを青から緑に変えるとき、カード内のボタン、一覧のリンク、画面下に固定したボタンをそれぞれ修正していませんか。CSS変数を使うと、同じ役割の色を共有でき、変更漏れや修正箇所を減らせます。CSSはWEBページの見た目を指定する仕組みで、CSS変数は正式には「カスタムプロパティ」といいます。ここでは「色をどう定義するか」よりも、配色を変更する実務でどんなメリットがあるかを比べます。

複数箇所に書いた色を、1か所の変更で済ませられる

地域イベントの申込みページで、カード内の「申し込む」ボタン、一覧の「詳細を見る」リンク、スマートフォンにも表示する固定申込みボタンを同じ青にしている例を考えます。各要素に色の値を直接指定していると、青を変えるために3か所を修正しなければなりません。どれかを見落とすと、同じ目的の操作なのに色が揃わなくなります。

CSS変数では、--color-applyのように先頭が--の名前を付け、各要素でvar(--color-apply)を参照します。:rootに共通値を定義すると、この3か所は変数の値を1回変更するだけで揃えられます。変更対象が明確になり、色を元に戻すときも同じ定義を戻せます。ただし、その変数を使っていない要素は変わりません。

申込みボタン・リンク・固定ボタンをまとめて変更する例

使用する色を先に整理します。HEXは16進数で色を指定する形式です。以下の色は、この申込みページの提案例であり、どのサイトでも固定の値というわけではありません。

まず、同じ青 ■#1E5A86 を3か所へ直接指定しているCSSです。rgb()はRGB（赤・緑・青の成分で色を表す形式）で、表にあるHEXコードと同じ色を指定しています。

.event-card .apply-button {
  background: rgb(30 90 134);
  color: rgb(255 255 255);
}
.event-link { color: rgb(30 90 134); }
.fixed-apply {
  background: rgb(30 90 134);
  color: rgb(255 255 255);
}

次は同じ表示をCSS変数にまとめた例です。申込みボタンと固定ボタンは白文字 ■#FFFFFF、一覧のリンクは白いカード ■#FFFFFF 上の下線付き文字として使います。

:root { --color-apply: rgb(30 90 134); }
.event-card .apply-button {
  background: var(--color-apply);
  color: rgb(255 255 255);
}
.event-link {
  color: var(--color-apply);
  text-decoration: underline;
}
.fixed-apply {
  background: var(--color-apply);
  color: rgb(255 255 255);
}

後者なら、:rootにある--color-applyの値をrgb(31 110 88)へ変更するだけで、3か所の青 ■#1E5A86 が深緑 ■#1F6E58 に変わります。ここでは「3つの色指定を毎回探す」作業を「1つの定義を編集する」作業にまとめています。ボタンとリンクを別の色にしたい場合は、無理に同じ変数を使わず、目的別に分けます。

元の青 ■#1E5A86 と白 ■#FFFFFF のコントラスト比は約7.34:1、変更後の深緑 ■#1F6E58 と白は約6.12:1です。白文字のボタンと、白背景上のリンクのどちらにも同じ値を使っていますが、変更後も実際の文字と背景を確認する必要があります。

変更が広がる範囲を把握し、見落としを防ぐ

色の変更を1か所で済ませられる一方、その変数を参照する場所にはまとめて反映されます。変更前に、ボタン・テキストリンク・固定ボタンなど使用箇所を検索して確認しましょう。意図しないページまで同じ変数を使っていたら、変数名や適用範囲を分ける方が安全です。背景色と文字色は別の役割として管理し、変更後にペアで確かめます。

今回の本文色 ■#233446 は白いカード ■#FFFFFF と約12.72:1の比があります。一方、白いカード ■#FFFFFF と外側の淡い背景 ■#F7F9FC は約1.05:1と差が小さいため、識別が必要な境界には線 ■#73879C を使います。この線は白に対して約3.70:1、淡い背景に対して約3.51:1です。

WCAG（WEBコンテンツのアクセシビリティに関する指針）2.2のレベルAAでは、通常文字と背景の比は4.5:1以上、規定の大きな文字は3:1以上が基準です。識別に必要な操作部品の輪郭などの非テキスト情報には隣接色と3:1以上が求められる場合があります。数値は不透明な単色の計算結果で、ページ全体の基準適合を保証するものではありません。

公開前にはパソコンとスマートフォンの両方で、変更したボタンやリンクの見え方を確認します。HueRollではHEXコードや濃淡候補、選択色と白・黒のコントラストを確認できますが、任意の2色比較やAA・AAAの自動判定には対応していません。配色変更の便利さと、安全に使える組み合わせかどうかは分けて確認してください。