CSS 全新函數 contrast-color() 上線，讓配色設計前所未有的簡單！
你有沒有經歷過這樣一幕：費盡心思選出的文字顏色，放到背景上一看，竟然慘不忍睹？
然后你無奈地打開搜索引擎，開始查找“對比度計算方法”或“XX顏色的搭配方案”，結果卻意外跌進 WCAG 的文檔深坑，最后順便拿了個色彩學學位。
但坦率地講，我們是開發者，而不是設計師。
我們真正需要的是，快速且無腦地搭配出易讀、舒適、好看的UI，而非絞盡腦汁研究 #1a73e8 和 whitesmoke 是否搭配。
幸運的是，CSS 終于給出了終極解決方案：全新函數 contrast-color()。
它的使命只有一個：以最簡單的方式，保證文本與背景的高對比度，再也不用靠猜。
我們趕緊來看一下它究竟怎么用！
什么是 contrast-color()？
一句話概括：它是 CSS 新增的一個函數，接收一個顏色作為參數，然后返回黑色或白色中與背景色對比度更高的一個。
對，就是這么簡單。
基本語法：
contrast-color(<color>);其中，<color> 可以是：
- 顏色名稱，如
red、blue - 十六進制值，如
#333、#ffcc00 - CSS變量，如
var(--someColor)
看幾個簡單例子：
color: contrast-color(#0055cc); /* 返回白色 */
color: contrast-color(#f5f5f5); /* 返回黑色 */結合 CSS 變量使用：
:root {
--bg: #fafafa;
--text: contrast-color(var(--bg));
}
body {
background-color: var(--bg);
color: var(--text);
}終于告別了人工配色的煩惱，再也不用擔心文本難以閱讀。
它如何決定黑色還是白色？
它的判斷依據非常簡單：contrast-color() 內置了 WCAG 對比度算法，分別計算輸入的顏色與白色、黑色之間的對比度，自動選擇對比度較高的顏色。
如果兩者對比度恰好相等（僅在純灰色背景這種極端情況出現），它默認返回白色。
現實一點：它不是萬能藥水
- 它只返回黑色或白色，不會自動選擇其他色彩；
- 它不是色彩搭配生成器，無法提供更多樣的顏色組合；
- 它不會幫你自動生成漂亮的色彩主題；
但它的確適合許多場景，比如：
- 動態主題：允許用戶自由選擇背景顏色，而文本顏色自動保持清晰可讀；
- 組件庫：開發適應更多情景變化的組件，靈活應對背景色變化；
- 設計 Token：與CSS變量結合，實現智能化設計模式。
現在可以直接使用嗎？
直接答案是：還不能，至少在生產環境還不行。
截至2025年7月，各大瀏覽器支持情況如下：
- Chrome ? 未支持
- Firefox ? 不支持
- Safari ? 尚未支持
- Edge ? 也沒有支持
contrast-color() 已被列入 CSS Color Module Level 5 標準規范，但目前尚未被主流瀏覽器原生支持。Safari 實驗性開啟 flags 后可進行嘗試，但正式項目暫不推薦直接使用。
當前如何實現類似效果？
在等待原生支持期間，你可以這樣實現：
方案1：使用 JavaScript
雖然并非理想，但下面這個快速函數可以暫時幫你解決：
function getContrastColor(hex) {
const r = parseInt(hex.substr(1, 2), 16);
const g = parseInt(hex.substr(3, 2), 16);
const b = parseInt(hex.substr(5, 2), 16);
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
return luminance > 0.5 ? '#000000' : '#ffffff';
}方案2：使用 Sass
如果你習慣用 Sass，可以用這個方法：
@function contrast-color($color) {
@if (lightness($color) > 50%) {
@return black;
} @else {
@return white;
}
}雖然這個方案并不完美（色相的亮度 ≠ 實際感知的對比度），但在原生 CSS 正式提供前，這樣用暫時夠了。
總結
contrast-color()函數接收顏色，自動返回黑色或白色以確保最佳對比度；- 非常適合實現動態主題，輕松保持界面可讀性；
- 目前尚無主流瀏覽器原生支持，但該功能已在路上；
- 在此之前，可用 JavaScript 或 Sass 臨時代替；
希望這個函數能盡快進入正式支持，讓前端設計更簡單、更友好。
