← 部落格
4 分鐘閱讀

色覺辨識障礙者怎麼選背景色

去背很簡單,難的是背後那個顏色——用 hex 碼取代肉眼判斷,讓明度拉開差距,固定五個色值。

  • colour blindness
  • accessibility
  • product photography
  • background colour
  • hex codes
  • contrast
  • ecommerce
色覺辨識障礙者怎麼選背景色

去背是簡單的那一步。你上傳照片,商品被乾淨地取出來,接著你得回答那個唯一無法用肉眼確認的問題:後面要放什麼顏色?選錯了,一只鏽橘色馬克杯會沉進橄欖綠背景裡;一只淺褐色手提包在米色上,看起來只是一團模糊的色塊。

這件事常見到值得直接為它設計流程。美國國家眼科研究所(National Eye Institute, NEI)指出,色覺辨識障礙在男性中約為每 12 位就有 1 位,紅綠型最常見。NEI 描述最常見的綠色弱(deuteranomaly)會讓某些綠色的色調看起來偏紅,紅色弱(protanomaly)則讓某些紅色的色調看起來偏綠而且比較暗。較罕見的藍色弱(tritanomaly)則會讓藍色和綠色糊在一起。

解法不是更用力去分辨。而是不再拿眼睛當量測工具,改成倚靠兩樣不會騙人的東西:你讀得到的數字,還有明度。

從 hex 碼下手,永遠不要從色票格挑

用肉眼挑顏色,等於要求你在自己最不可靠的那個區段做精細的色相判斷,事後又完全沒有回饋。寫出來的 hex 碼則是六個字元,你可以用算的去核對。

色票卡近拍,一排排的綠色、鼠尾草綠與淺灰綠,每張卡上的行銷色名旁都印著參考色號

hex 碼就是三個通道值接在一起寫——先紅、再綠、然後藍——每一個都是從 00(沒有)到 FF(滿)的兩字元組合。#8A8A8A 三個值完全相同,所以它是真正的中性灰。而 #F5F0E8 的藍通道低於紅和綠——這就是「暖」的意思。於是有了那個經典陷阱:標示為「淺灰」的色票,其實是偏暖的灰米色,而灰米色會悄悄吃掉米色、奶油色或駝色的商品。

remover.bg 的編輯器可以自訂背景色,不是只有幾組預設,所以請把核可過的色值存成一份純文字檔,照著那份清單走,而不是用眼睛判斷色票。去背和換背景在網頁版和行動版 App 都能做,你不會被綁在單一裝置上。

最容易出事的幾組搭配

與其每次個案判斷,不如直接把這些組合從你的色盤裡刪掉:

  • 紅色、鏽色或赤陶色商品,配橄欖綠、鼠尾草綠或卡其色背景
  • 棕色、淺褐、駝色或干邑色皮件,配米色、牛皮紙色或燕麥色
  • 粉紅與鮭魚粉商品配淺暖灰,紅色弱還會讓它看起來更暗
  • 任何綠色商品,而替換用的背景照裡還留著綠葉或植物擺飾
  • 若你的色覺辨識障礙偏藍黃方向:藍綠色配灰色、藍色配綠色;若偏紅綠方向:紫色配藍色,因為紫色裡的紅色成分正是會消失的那一部分

這些組合的失敗在於色相接近而且明度也相近,這才是危險的地方。紅色商品放在明顯更深的綠色上,一樣分得清清楚楚。

明度是你仍然信得過的那個通道

W3C 為 WCAG 2.2 成功準則 1.4.3 撰寫的說明文件講得很直白:對比度是由相對亮度算出來的,而不是由色相,而且「無法分辨某些顏色的深淺,並不會對明暗對比的感知造成負面影響」。那份指引是為文字寫的,但底下的生理機制,和決定你的商品邊緣能不能在背景上被看出來的,是同一套。

一只淺色冰裂釉陶瓶在近黑背景前打光,幾乎沒有顏色,輪廓純粹靠亮度與背景分開

所以就讓明度來決定:淺色商品配深背景,深色商品配淺背景,中間調商品放在任一個極端,但絕不要放在另一個中間調上。你自己就能檢查——用手機的照片編輯功能打開成品,把飽和度一路拉到最低,然後看。如果顏色拿掉之後邊緣依然清楚,買家看起來也會很清楚。

投影也有幫助:它在商品下方鋪出一條與背景色相無關的深色帶——關於怎麼讓整個系列的陰影方向保持一致,可以看用 remover.bg 為照片加上逼真陰影。

色盤建一次,之後不再判斷

把這五個固定下來,以後就不用再做這個判斷:

  1. #FFFFFF 純白,給要求白底的電商平台
  2. #F2F2F2 近白灰,給在純白上會消失的白色和奶油色商品
  3. #8A8A8A 中灰,只用在非常淺或非常深的商品
  4. #1C1C1C 近黑,給淺色陶瓷、玻璃器皿和淺色包裝
  5. 一個品牌色,決定的那天就把 hex 白紙黑字記下來

要放到彩色頁面或印刷品上的,一律輸出透明背景;這樣就完全繞開了這個問題——幾秒做出透明 PNG(2026 指南)談的就是什麼時候該這麼做。

找一個人問一次,然後寫下來

約一位你信得過其色覺的人,花十五分鐘,在你的桌前,商品就擺在眼前。每件問兩個問題:邊緣分得開嗎?那個「中性色」真的中性嗎?把答案記成對應各品類的 hex 碼——「皮件:#1C1C1C」——絕對不要記成「比較柔和的那個」這種形容詞。形容詞會逼你每次重新判斷;hex 碼不會。

兩個人俯身在鋪滿印刷色卡與色票本的桌前,一人指著色表,另一人正在翻頁

這份清單要放在你會複製貼上的地方,不是放在你會去查閱的地方。如果之後你想圍繞一個自訂色打造專屬視覺,為什麼自訂背景是商品攝影的未來依然適用——只是你這次是靠紀錄,而不是靠眼睛,找到那個顏色。

一次決定,寫成文字

色覺辨識障礙不會妨礙你做出一致的商品目錄,臨場發揮才會。五個寫下來的 hex 值、一條可以用灰階驗證的明度規則,再加上一次記錄下來的對談,勝過每個星期二憑感覺挑背景。

繼續閱讀