按鈕換底色，文字也能自動選黑白：CSS contrast-color()

做標籤或按鈕時，我常遇到一個小問題：背景換成深藍色，白字很清楚；換成淺黃色，同樣的白字卻幾乎看不到。如果讓使用者自訂底色，文字顏色也要跟著調整。

2026 年 4 月 7 日發布的 Chrome 147 加入了 contrast-color()。把背景色傳給它，瀏覽器就會在黑色和白色之間，選出與這個顏色對比較高的一個，省去自己用 JavaScript 判斷的步驟。

最簡單的例子#

假設一個按鈕的背景是黃色：

button {
  background: yellow;
  color: contrast-color(yellow);
}

這裡的意思是：「背景用黃色，文字請瀏覽器從黑白之間挑一個比較清楚的顏色。」結果就是黃底黑字。

把兩個 yellow 都改成 darkblue，就會變成深藍底白字。注意要把底色傳給 contrast-color()，它不會自己讀取 background。這個例子需在支援此功能的瀏覽器中使用。

它幫忙選文字色，不會設計整套配色#

contrast-color() 目前只會選黑或白，不會替你挑品牌色，也不會分析背景照片。它比較的是你傳入的顏色；如果實際背景是漸層、圖片或半透明疊色，仍要確認文字顯示出來是否清楚。

我覺得它最適合分類標籤、狀態徽章這種小元件。以前換一個底色，還要順手配一次文字色；現在可以把這個判斷交給 CSS，程式更短，用途也很明確。