指南 · 閱讀約 8 分鐘

封面色彩與對比度:在深色和淺色資訊流中脫穎而出

決定封面是跳出來還是融進資訊流的數值和測試,涵蓋深色模式、淺色模式以及色覺障礙觀眾。

快速答案

對比度比顏色更重要。平均亮度保持在約 22% 到 80% 之間,避免圖片與深色或淺色資訊流融為一體;RMS 亮度對比度目標為 0.20 或更高;文字與其背後內容的對比度至少 4.5:1。然後用灰度和色覺模擬檢查封面:如果主體仍能與背景分開,這個設計對所有人都有效。

2需適配的深淺主題
0.20高 RMS 對比度
22–80%安全亮度範圍

為什麼在資訊流尺寸下對比度勝過顏色

當圖片縮小到 168×94 畫素時,細微的顏色差異會被平均掉。亮度相同的兩種飽和色——比如紅和綠——在眼睛的亮度通道里幾乎是同一種灰,而我們主要靠亮度通道識別邊緣和形狀。相反,明與暗的差別能經受住縮放、螢幕反光和廉價顯示器。

這也是無障礙規範用亮度比值而不是允許顏色列表來規定對比度的原因。普通網頁文字至少 4.5:1,大號文字至少 3:1。封面文字通常大而粗,但它壓在照片上而不是純色背景上,所以以 4.5:1 為目標更保險。

“文字及文字影象的視覺呈現,其對比度至少為 4.5:1”

Understanding SC 1.4.3 Contrast (Minimum) — W3C WCAG 2.2 · 引文譯自英文原文

亮度與對比度的目標數值

ThumbProof 的視覺評分報告三個與對比度相關的數值。平均亮度是圖片的平均明度,從 0%(黑)到 100%(白)。RMS 對比度是亮度的標準差,可穩健地衡量明暗變化的多少。清晰度衡量縮放到 168×94 後的細節邊緣。

指標弱中等強 / 目標
平均亮度< 22% 或 > 80%22–30% 或 70–80%30–70%
RMS 對比度< 0.120.12–0.20≥ 0.20
文字對比度< 3:13:1–4.5:1≥ 4.5:1
168×94 下清晰度< 0.050.05–0.09≥ 0.09

這些閾值是工具使用的實用目標,不是平臺規則。整體偏暗的戲劇化封面,只要有明亮主體帶來強對比,仍然有效;亮度檢查只是提醒你它可能會融進深色資訊流。

深色模式與淺色模式

深色模式下資訊流背景接近黑色,淺色模式下是白色或淺灰。帶黑邊或深色暗角的封面在深色模式下會失去邊緣,而淺淡、粉彩風格的封面在淺色模式下會失去邊緣。許多觀眾晚上在手機上用深色模式,白天在電腦上用淺色模式,所以兩種都要過關。

最快的檢查方法是在預覽中切換資訊流主題。看封面的輪廓而不是主體:兩種主題下,圖片和頁面之間都要有清楚的邊界。如果邊界消失,就略微提亮暗部,加一個更亮的背景元素或一道細邊框。

色覺障礙

色盲很常見。根據美國國家眼科研究所(NEI)的資料,紅綠色盲是最常見的型別,男性遠多於女性。在大量觀眾中,會有相當比例的人分辨不出紅色箭頭和綠色背景。

ThumbProof 可模擬紅色盲(protanopia)、綠色盲(deuteranopia)、藍色盲(tritanopia)和全色盲(achromatopsia)。你不需要為每種情況單獨設計。只要封面透過灰度檢查——主體僅憑亮度就能與背景分開——它幾乎適用於所有色覺型別。

模擬變化典型失敗
紅色盲紅色顯得暗、偏棕深色背景上的紅字消失
綠色盲紅綠混在一起用紅綠表示“好/壞”的對比
藍色盲藍和黃髮生偏移淺藍底上的黃字
全色盲只剩亮度任何亮度相同的顏色組合

五步檢查色彩與對比度

  1. 01

    載入封面

    把圖片拖進安全區檢查工具或資訊流預覽。

  2. 02

    做眯眼測試

    模糊圖片,主體應保持為清晰的形狀。

  3. 03

    切換灰度

    去掉顏色後,文字和主體仍須靠亮度與背景分開。

  4. 04

    切換深色和淺色資訊流

    確保封面邊緣在兩種背景下都清晰可見。

  5. 05

    試試色覺模式

    依次切換四種模擬,再檢視評分拆解中的亮度和對比度兩行。

選一套能突出的配色

先看你所在領域已有的風格。如果每個遊戲封面都用高飽和的紫和藍,暖黃或橙色強調色會比又一個霓虹藍更顯眼。配色要少:一個主背景色調、一個主體、一個用於文字或關鍵細節的強調色。

飽和度用於強調,而不是處處都用。所有東西都飽和時,就沒有東西突出。柔和背景加一個飽和主體,在小尺寸下通常比全飽和圖片更好讀,因為視線會直接落在唯一不同的區域。

  • 一個背景色調、一個主體、一個強調色
  • 選一個在你領域裡少見的強調色
  • 背景柔和,主體飽和

雜亂照片上的文字

直接放在細節豐富的照片上的文字,幾乎總會在某些筆畫處對比不足。有四種可靠的修復方法:粗描邊(約為字高的 6–10%)、柔和投影、文字後加實色或半透明底框,或把文字移到畫面中平靜的區域,例如天空或素牆。

用灰度檢查結果。字母沿整個輪廓都應明顯比周圍更亮或更暗,而不只是平均而言。

看整個頻道的對比,而不只是一張圖

觀眾常在頻道頁或播放列表中同時看到你的多個影片。如果每張封面都用同樣的深色配色,頁面看起來就是一整塊,單個影片很難區分。保持一致的風格——字型、強調色、構圖——但相鄰影片的主背景色調要有變化。

實用的規則是每隔幾個影片在較深和較淺背景之間交替,並保持強調色不變。這樣頻道依然有辨識度,每張封面又有各自的邊界。用預覽中的頻道頁檢視,把新影片和之前的放在一起檢查。

頻道模式在頻道頁上的效果修復
全是深色背景影片融成一塊深色與中間調背景交替
每個影片隨機配色沒有辨識度固定一個強調色和字型
版式相同、色調不同有辨識度又能區分保持下去

螢幕、亮度與壓縮

觀眾會在各種裝置上看到你的封面,從明亮的 OLED 手機到昏暗的辦公顯示器,再到隔著房間看的電視。在廉價或昏暗螢幕上,暗部細節最先消失,手機夜間模式還會進一步降低對比度。重要形狀不要放在色調最暗的 10% 範圍內,否則會變成一片死黑。

壓縮也會吃掉對比度。JPEG 壓縮首先抹平細微的顏色變化,所以柔和漸變和低對比紋理會出現色塊。如果你的設計依賴淡淡的光暈或柔和漸變來區分層次,請加強它,否則平臺重新編碼後效果可能消失。一個快速測試是以 JPEG 質量 70 匯出,看設計是否依然成立;如果成立,它就能經受任何平臺處理。

  • 關鍵形狀避開最暗的色調
  • 加強細微的光暈和漸變
  • 測試質量 70 的匯出圖

例項:一張低對比的市集照片

一位旅行博主用了一張熱鬧市集的照片:數百個五顏六色的攤位,亮度都差不多,上面壓著黃色文字“HIDDEN GEM”。原尺寸看起來很有生氣,但在 168×94 下變成灰色噪點,RMS 對比度為 0.11,黃字與攤位的對比度約 1.8:1。

博主把背景壓暗 30%,提亮一個攤位作為焦點,並給文字加上深色底框。RMS 對比度升到 0.24,文字對比度升到 7:1,眯眼測試顯示出一個清晰的形狀。

指標修改前修改後
平均亮度48%36%
RMS 對比度0.110.24
文字對比度1.8:17:1
眯眼測試噪點焦點清晰

常見的色彩與對比度錯誤

亮度相同的顏色組合

綠底紅字或紫底藍字看起來鮮豔,在灰度下卻混在一起。

深色邊框和暗角

它們會在深色模式下抹掉封面的邊緣。

照片上的細彩字

沒有描邊或底框,總會在某些筆畫處對比不足。

什麼都過度飽和

所有東西都在喊,就沒有東西突出。只留一個強調色。

忽略淺色模式

在深色模式下閃亮的粉彩設計,放到白底上可能消失。

廣色域匯出

Display P3 或 CMYK 檔案可能偏色。請以 sRGB 匯出。

FAQ

相關問題解答

封面文字應達到多少對比度?

文字與背景至少 4.5:1,這是普通網頁文字的無障礙下限。大號粗體文字 3:1 也可以,但在照片上更高更保險。

鮮豔的顏色能提高點選嗎?

只有在與資訊流和畫面其他部分形成對比時才有幫助。在較平靜的背景上用一個飽和強調色通常效果最好。

如何讓封面在深色模式下有效?

避免黑邊和過暗的邊緣,平均亮度保持在約 22% 以上,並在近黑背景下檢查圖片邊緣。

什麼是 RMS 對比度?

圖片亮度的標準差。0.20 或以上表示明暗變化強,縮放後依然保留。

如何檢查封面對色盲觀眾是否友好?

使用色覺模擬,最重要的是灰度檢視。如果主體僅憑亮度就能分開,幾乎對所有人都有效。

應該用哪種色彩空間匯出?

sRGB。其他配置檔案可能被瀏覽器和應用不可預測地轉換。

參考來源

文中規格與資料已於 2026年10月27日 對照以下公開資料核對。平臺規則會變化,重要釋出前請到官方幫助頁確認限制。

  1. Understanding SC 1.4.3 Contrast (Minimum) — W3C WCAG 2.2
  2. Understanding SC 1.4.11 Non-text Contrast — W3C WCAG 2.2
  3. Color blindness — National Eye Institute (NIH)
繼續閱讀

相關指南與工具