你有沒有經(jīng)歷過這樣一幕：費盡心思選出的文字顏色，放到背景上一看，竟然慘不忍睹？

然后你無奈地打開搜索引擎，開始查找“對比度計算方法”或“XX顏色的搭配方案”，結(jié)果卻意外跌進 WCAG 的文檔深坑，最后順便拿了個色彩學學位。

但坦率地講，我們是開發(fā)者，而不是設(shè)計師。

我們真正需要的是，快速且無腦地搭配出易讀、舒適、好看的UI，而非絞盡腦汁研究 #1a73e8 和 whitesmoke 是否搭配。

幸運的是，CSS 終于給出了終極解決方案：全新函數(shù) contrast-color()。

它的使命只有一個：以最簡單的方式，保證文本與背景的高對比度，再也不用靠猜。

我們趕緊來看一下它究竟怎么用！

什么是 contrast-color()？

一句話概括：它是 CSS 新增的一個函數(shù)，接收一個顏色作為參數(shù)，然后返回黑色或白色中與背景色對比度更高的一個。

對，就是這么簡單。

基本語法：

contrast-color(<color>);

其中，<color> 可以是：

• 顏色名稱，如 red、blue
• 十六進制值，如 #333、#ffcc00
• CSS變量，如 var(--someColor)

看幾個簡單例子：

color: contrast-color(#0055cc);   /* 返回白色 */
color: contrast-color(#f5f5f5);   /* 返回黑色 */

結(jié)合 CSS 變量使用：

:root {
  --bg: #fafafa;
  --text: contrast-color(var(--bg));
}

body {
  background-color: var(--bg);
  color: var(--text);
}

終于告別了人工配色的煩惱，再也不用擔心文本難以閱讀。

它如何決定黑色還是白色？

它的判斷依據(jù)非常簡單：contrast-color() 內(nèi)置了 WCAG 對比度算法，分別計算輸入的顏色與白色、黑色之間的對比度，自動選擇對比度較高的顏色。

如果兩者對比度恰好相等（僅在純灰色背景這種極端情況出現(xiàn)），它默認返回白色。

現(xiàn)實一點：它不是萬能藥水

• 它只返回黑色或白色，不會自動選擇其他色彩；
• 它不是色彩搭配生成器，無法提供更多樣的顏色組合；
• 它不會幫你自動生成漂亮的色彩主題；

但它的確適合許多場景，比如：

• 動態(tài)主題：允許用戶自由選擇背景顏色，而文本顏色自動保持清晰可讀；
• 組件庫：開發(fā)適應(yīng)更多情景變化的組件，靈活應(yīng)對背景色變化；
• 設(shè)計 Token：與CSS變量結(jié)合，實現(xiàn)智能化設(shè)計模式。

現(xiàn)在可以直接使用嗎？

直接答案是：還不能，至少在生產(chǎn)環(huán)境還不行。

截至2025年7月，各大瀏覽器支持情況如下：

• Chrome ? 未支持
• Firefox ? 不支持
• Safari ? 尚未支持
• Edge ? 也沒有支持

contrast-color() 已被列入 CSS Color Module Level 5 標準規(guī)范，但目前尚未被主流瀏覽器原生支持。Safari 實驗性開啟 flags 后可進行嘗試，但正式項目暫不推薦直接使用。

當前如何實現(xiàn)類似效果？

在等待原生支持期間，你可以這樣實現(xiàn)：

方案1：使用 JavaScript

雖然并非理想，但下面這個快速函數(shù)可以暫時幫你解決：

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 正式提供前，這樣用暫時夠了。

總結(jié)

• contrast-color() 函數(shù)接收顏色，自動返回黑色或白色以確保最佳對比度；
• 非常適合實現(xiàn)動態(tài)主題，輕松保持界面可讀性；
• 目前尚無主流瀏覽器原生支持，但該功能已在路上；
• 在此之前，可用 JavaScript 或 Sass 臨時代替；

希望這個函數(shù)能盡快進入正式支持，讓前端設(shè)計更簡單、更友好。