ボタンや見出しの背景色を決めたあと、その上に載せる文字を黒にするか白にするかで迷った経験は、制作に関わる人なら一度はあるはずです。背景が濃ければ白、淡ければ黒と感覚で選んでいくものの、配色のパターンが増えるほど組み合わせの管理は地味に重くなります。この「背景に対して読みやすい文字色を選ぶ」という判断を、CSSだけで自動化するcontrast-color()という関数が、主要ブラウザにようやく出そろいました。
背景色から文字色を自動で決める関数
contrast-color()は、引数に渡した色に対して黒と白のどちらがより高いコントラストになるかを判定し、読みやすいほうを返す関数です。色を指定できる場所であればどこでも使えるので、文字色の指定に組み込めば背景色に応じて自動的に切り替わります。
書き方はとてもシンプルで、背景にブランド色を変数で渡しているなら、文字色は次のように一行で済みます。
background-color: var(–brand); color: contrast-color(var(–brand));
判定にはWCAGのコントラスト比の考え方が使われており、読みやすさの最低限を機械的に満たしやすくなります。Chrome 147、Firefox 146、Safari 26と三つのブラウザエンジンが2026年に対応し、安全に使える機能をまとめたBaselineでも新たに利用可能の段階に入りました。ブラウザ間の挙動をそろえるInterop 2026の対象にも含まれており、どの環境でも同じ結果になることが期待できます。
これまでの配色対応との違い
ブラウザが標準で対応する前から、読みやすい文字色を得る方法はいくつかありました。JavaScriptのライブラリで表示時にコントラスト比を計算して色を当てる、Sassの関数であらかじめ対になる色を生成しておく、あるいは単純に人の目で一つずつ黒と白を決めておく、といった具合です。
どれも動きはしますが、手間と保守の負担は残ります。表示時に計算する方法は画面が出るまでにわずかな処理を挟みますし、ビルド時に色を固定する方法は背景色を変えるたびに対の色も作り直すことになります。手作業の指定は、ライトモードとダークモードで色の組を二重に持つことになりがちです。contrast-color()はこの判断をブラウザ側に任せるため、背景色を一か所変えれば文字色もそのまま追従します。
制作現場で効く場面
恩恵が分かりやすいのは、背景色が一定しない場面です。ブランド色をボタンに使うコンポーネントなら、色だけ差し替えれば文字の見やすさは自動で保たれます。ホバーで背景を明るくする演出を入れた場合も、必要に応じて文字色が白から黒へ切り替わります。
ライトとダークの切り替えとも相性がよく、prefers-color-schemeで背景の変数だけを入れ替えれば、文字色の組を別々に書く必要がなくなります。color-mix()などで動的に作り出した色にも追従するため、配色をプログラム的に生成する設計とも噛み合います。デザインシステムのように色をトークンとして一元管理する作り方とも相性がよく、土台の色を一つ変えるだけで関連する文字色がまとめて整うため、配色の調整にかかる手数を減らせます。
地方の中小企業サイトやCMSでは、色の設定を制作者以外が触る場面も少なくありません。管理画面でテーマ色を選ぶと文字色まで適切に決まる、という作りにしておけば、運用する人がコントラスト比を意識しなくても読みにくい配色になりにくくなります。納品後の更新で配色が崩れるリスクを下げられる点は、長く運用するサイトほど効いてきます。
使う前に知っておきたい制約
便利な一方で、現時点の仕様には割り切りもあります。返すのは黒か白のどちらかだけで、中間調の背景に対しては必ずしも最適な結果にならないことがあります。判定の方式を選べる拡張的な書き方も一部ブラウザで試験的に使えるものの、Baselineの範囲ではまだ標準化されていません。
そのため、重要なボタンや本文など可読性が要になる箇所は、自動任せにせず実際の表示で確かめる姿勢は残しておきたいところです。とはいえ、配色の土台を機械的に整える層として置いておく価値は十分にあります。これまで手で管理してきたコントラストの一部を、ようやくCSSそのものに預けられるようになったという意味で、地味ながら実務に効く一歩だと言えます。
