不求人！由背景色告訴你最適合文字色！

Carol Yan

Follow

Published in

新加坡商鈦坦科技

8 min readDec 12, 2023

--

目錄
1. 為什麼分享這個主題？
2. 方法 1｜CSS Variables+color-contrast()
3. 方法 2｜CSS Variables + calc() + rgb()
4. 結語
5. 參考來源

為什麼分享這個主題？

“ 聖誕節到了可以幫我做個聖誕節 Theme 的活動頁嗎？ “
“ Layout 都不用變，調個畫面的 UI 顏色就好，應該很快吧！？ “
“ ……..…..“

當 Layout 內容不變，只修改 UI 顏色時，或是主視覺圖片時，總要相對應調整文字顏色，以防止文字在新的 UI 上因為對比不夠高而不清楚，而這時就需要發揮敏捷精神，根據遇到的重複問題，適性調整，找出解決方案，以下提供 2 種方法根據 UI 背景色自動判斷適合的文字顏色！

方法 1｜CSS Variables + color-contrast()

CSS Variables支援度:Can I Use
color-contrast()支援度:Can I Use

我們可以利用CSS Variables + CSS 的新 functioncolor-contrast()

color-contrast() 是什麼？

color-contrast(color vs color-list)
color是要對比的 color，結果會回傳從color list中找出與 color 對比度最高的顏色。ex:color-contrast(#394BA0 vs white,black)，結果產出會是 white
2023/09/20 MDN 說明這還是個實驗性的屬性，實測 color-contrast() 支援度只有特別版本號以上的 Safari 能看到效果，並不普及，但相信這方便的功能，不久之後瀏覽器都會支援的

以防文字在新的 UI 上因為對比不夠高而不清楚，我們必須一一的設定文字顏色，按鈕顏色等等，如下：

.MoonFestival{
    section{
        background:black;
        color:white;
    }
    button{
        background:yellow;
        color:black;
    }
}

以上我們可以發現，我們需要根據每個區塊或按鈕的背景色，調整文字顏色，讓文字色彩明顯的呈現，非常費工。
這時我們可以利用CSS Variables + color-contrast()，如下：

:root{
    --primary-bg:black;
    --primary-btn:yellow;
}
.MoonFestival{
    section{
        background:var(--primary-bg);
        color:color-contrast(var(--primary-bg) vs white,black);
    }
    button{
        background:var(--primary-btn);
        color:color-contrast(var(--primary-btn) vs white,black);
    }
}

這樣只要設定 UI 背景顏色變數，就可以完成文字或按鈕文字的色彩調整，是不是很方便呢？

Codepen 範例

IT15-Day05-Create Variable UI with CSS Variables

color-contrast() example on codepen — color-contrast example: light color text on dark background

方法 2｜CSS Variables + calc() + rgb()

CSS Variables支援度:Can I Use
calc()支援度:Can I Use
rgb()支援度:Can I Use

上面了解到了color-contrast()如何使用，但因為瀏覽器支援度問題，目前只能在 safari 特定版本以上才有效，在我們殷殷期盼的color-contrast支援度提高以前，我們還可以怎麼根據背景顏色，自動判斷文字色彩呢？

>> 可以利用CSS Variables + calc() + rgb()搭配YIQ公式!

YIQ 是什麼？

YIQ是將RGB顏色模型轉換成Y(亮度)、I、Q(色度)的方法
YIQ的公式如下：
Y = 0.299R + 0.587G + 0.114B
I = 0.596R — 0.274G — 0.322B
Q = 0.211R — 0.523G + 0.312B
根據公式我們就可以算出目前的背景色彩亮度，進而判斷背景中的文字應該呈現黑色還是白色

Codepen 範例

IT15-Day06-Create Variable UI with CSS Variables and YIQ

YIQ example on codepen — YIQ example: light color text on dark background

因為沒有設計好的 UI，codepen 範例用 input 讓大家可以隨性調整想要的背景色，進而看看文字色彩是否有隨之調整。

codepen 範例作法如下:
監聽 input 並設定根元素--red、--green、--blue三個變數

const setRootProperties = ()=>{
      root.style.setProperty('--red',red.value);
      root.style.setProperty('--green',green.value);
      root.style.setProperty('--blue',blue.value); 
 }

CSS Variables 設定，根據三原色變數產出背景顏色，文字顏色再根據 YIQ 公式產出，這樣就完成啦！

:root{
  --background-primary:rgb(var(--red),var(--green),var(--blue));
  /* 算出Y */
  --accessible-color:calc(
      (((var(--red) * 299 + var(--green) * 587 + var(--blue) * 114) / 1000) - 128) * -1000
  );
  --text-primary:rgb(var(--accessible-color),var(--accessible-color),var(--accessible-color));
}

結語

這篇文章介紹了兩種根據背景色自動判斷文字顏色的方法。

CSS Variables + color-contrast()：這個方法的優點是簡單易用，但缺點是目前的瀏覽器支援度還不夠好。

CSS Variables + calc() + rgb() + YIQ公式：這個方法的優點是支援度高，但缺點是需要計算 YIQ 值，稍微複雜一些。

根據背景色自動判斷文字顏色是一種很有用的技巧，可以幫助我們提高 UI 的易讀性。

想要看更多 CSS 文章，歡迎來看我今年的鐵人賽文章-你應該要知道的 CSS 技巧：發掘被忽略但實用的屬性

不求人！由背景色告訴你最適合文字色！

為什麼分享這個主題？

方法 1｜CSS Variables + color-contrast()

方法 2｜CSS Variables + calc() + rgb()

結語

參考來源

Written by Carol Yan