CSSのcurrentColorとは？文字色を他の要素にも使う方法

WEBサイトで見出しの色を変えたとき、横の丸印やカードの枠線も同じ色にしたいことがあります。各部分にカラーコードを繰り返し書く代わりに使えるのが、CSSのcurrentColorです。文字色を基準として装飾の色をそろえられます。ただし、どの要素の文字色を参照するかを理解しないと、意図しない色になる場合があります。基本の仕組みと案内カードの実例を紹介します。

currentColorはどの文字色を参照する？

currentColorは、CSS（WEBページの見た目を指定するルール）で、その要素のcolorプロパティが示す色を参照するキーワードです。colorは文字の基本色を決め、通常は子要素にも引き継がれます。例えば要素の文字色が青■#1D4ED8なら、同じ要素にborder-left: 5px solid currentColor;を指定すると左枠線も同じ青になります。

枠線の色だけでなく、background-colorやoutline-colorなど、色を受け付ける多くのCSSプロパティで使えます。::beforeのような疑似要素（HTMLを追加せずに装飾を表示できる仕組み）でも、その疑似要素自身の文字色を基準にできます。枠線の色を省略した場合も、通常はcurrentColorが既定値として使われますが、明示すると色の意図が伝わります。

一方、currentColorはサイト全体の色を記憶する変数ではありません。ある子要素が別のcolorを指定した場合、その子要素で使うcurrentColorは変更後の文字色を参照します。またcolor: currentColor;と文字色そのものに指定した場合は、親から継承した色を使う扱いになります。

お知らせと要確認のカードで枠線と丸印をそろえる例

イベント案内ページに「お知らせ」と「要確認」を並べる場面を考えます。ページの背景には白■#FFFFFF、カードにはごく淡い青灰色■#F8FAFCを使います。「お知らせ」の見出しは青■#1D4ED8、「要確認」は赤茶■#9A3412です。説明文は両カードとも濃い青灰色■#334155に統一し、長い文章まで強調色にしない構成です。

<div class="notice-list">
  <section class="notice notice--info">
    <h3 class="notice__title">お知らせ：資料を更新しました</h3>
    <p>イベント参加前に最新版をご確認ください。</p>
  </section>
  <section class="notice notice--check">
    <h3 class="notice__title">要確認：受付時間が変わりました</h3>
    <p>集合前に新しい受付時間をご確認ください。</p>
  </section>
</div>

.notice-list {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background-color: ■#FFFFFF;
}
.notice {
  padding: 1rem 1.25rem;
  border-left: 5px solid currentColor;
  border-radius: .5rem;
  background-color: ■#F8FAFC;
}
.notice--info { color: ■#1D4ED8; }
.notice--check { color: ■#9A3412; }
.notice__title {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0;
}
.notice__title::before {
  content: "";
  display: inline-block;
  flex: none;
  width: .7em;
  height: .7em;
  border-radius: 50%;
  background-color: currentColor;
}
.notice p {
  margin: .6rem 0 0;
  color: ■#334155;
}

CSSで色を直接指定するのは、各カードのcolorと、説明文・背景です。左枠線のborder-leftと見出し横の小さな丸印のbackground-colorにはcurrentColorを使います。見出しはカードの文字色を引き継ぐので、青いカードでは見出し・枠線・丸印が青、赤茶のカードでは同じ3か所が赤茶になります。別の色へ変更する場合も、カード側のcolorを直せば連動します。

ここで.notice pには別の文字色を指定しているため、説明文は青や赤茶になりません。もし段落内の装飾にcurrentColorを指定すれば、参照するのは段落自身の濃い青灰色です。「親の色を必ず参照する」という理解ではなく、「その場所で使われるcolorを参照する」と考えるのが正確です。

同じ色でそろえてもコントラストは別に確認する

今回のカード背景■#F8FAFCに対し、お知らせの青■#1D4ED8は約6.41:1、要確認の赤茶■#9A3412は約6.98:1です。説明文の濃い青灰色■#334155との比率は約9.90:1で、いずれもWCAG 2.2が通常サイズの文字に求める4.5:1を上回ります。枠線と丸印にも同じ強調色を使うため、それぞれ背景との差は3:1を超えます。これらが重要な情報を示す図形なら、非テキストのコントラストも確認します。

ただし、文字色と装飾色が一致すること自体は、読みやすさを保証しません。暗い背景へ変えた場合や強調色を淡くした場合は、文字・枠線・丸印と新しい背景の組み合わせを再計算する必要があります。さらに、白■#FFFFFFとカードの淡い青灰色■#F8FAFCの差は約1.05:1と小さいため、背景色だけでカードを区別しようとせず、余白と左枠線も使っています。

色だけで「お知らせ」「要確認」の意味を伝えるのではなく、今回のように見出しの言葉を必ず残しましょう。また、background-color: currentColor;を文字と同じ場所の背景全体へ使うと、文字と背景が同色になって読めなくなる場合があります。今回の丸印のように、塗る面積と役割を絞ると扱いやすくなります。HueRollでは候補色や選択色と白・黒とのコントラストを確認できますが、任意の2色同士の比較やWCAG適合の自動判定には対応していません。完成した配色は実際の隣接色で検証してください。