網站配色怎麼選？4步驟讓網站看得清楚、提升成交率

好的網站配色能提升成交率，原因很簡單：訪客在讀任何一個字之前，已經先用顏色替您的公司打了分數。Singh 2006 年發表於《Management Decision》的研究彙整指出，人在接觸產品的最初 90 秒內就會形成判斷，而其中 62–90% 只憑顏色決定。網站配色要做對，靠的不是設計師的品味，而是 4 個可以檢驗的步驟：先定目標對象與品牌個性，再選主色、輔色與強調色，依 60／30／10 的比例分配，最後用對比度工具驗證字看不看得清楚。

多米諾資訊科技從業超過 20 年、網頁設計作品累積 465 件，每一個專案開始前都要先和客戶把配色方向談定，也常在健檢舊網站時看到「品牌色很漂亮，但字看不清楚、按鈕找不到」的狀況。本文把我們實際規劃與健檢時使用的判斷標準整理出來，您可以拿來檢查現有網站，也可以在與網頁設計公司討論新網站時作為共同語言。配色只是網頁設計原則的其中一環，整體原則另見〈網頁設計原則的 5 個關鍵〉。

一、網站配色為什麼會影響成交率？

網站配色影響成交率的方式有三層：第一眼的印象、對品牌個性的判斷，以及最實際的一層——字看不看得清楚、按鈕找不找得到。Singh 2006 年的研究彙整指出，人在最初 90 秒內就對產品形成評價，其中 62–90% 只憑顏色；Labrecque 與 Milne 2012 年發表於《Journal of the Academy of Marketing Science》的四項研究進一步證實，顏色會直接改變消費者對品牌個性的認知與購買意願。網站上，訪客停留的時間比實體店面短得多，顏色是他們最先接收、也最先用來下判斷的訊號。

很多企業主會把配色當成「好不好看」的問題，但在健檢時我們看到的損失，多半不是不好看，而是看不清楚。Nielsen Norman Group 2015 年的文章指出，對比太低的文字會讓使用者眼睛疲勞、降低對內容的信任，在戶外強光下用手機閱讀時更幾乎無法辨識——一個把內文設成淺灰色的網站，等於在每一頁都替訪客設了一道門檻。

二、網站配色怎麼選？先決定目標對象與品牌個性

網站配色的第一步不是打開色票，而是先回答兩個問題：這個網站要給誰看、希望他們覺得這家公司是什麼樣的公司。兩個問題有了答案，主色的範圍就會縮到兩三種，剩下的才是設計師的工作。跳過這一步直接挑「老闆喜歡的顏色」，是我們看過最常見、也最難事後修正的配色錯誤。

顏色與品牌個性的對應有實證基礎。Labrecque 與 Milne 2012 年的研究以四項實驗，把色相對應到品牌個性的五個面向：紅色對應「刺激、有活力」，藍色對應「有能力、可靠」，而彩度與明度的變化也會改變這些感受——同樣是藍色，飽和的深藍偏向專業穩重，淡藍偏向親切輕鬆。研究同時指出，有策略地調整顏色，能改變消費者對品牌個性的認知與購買意願。

定配色方向的 3 個做法

1. 先寫下一句話：「我們希望○○客群看到網站時覺得我們○○。」例如「希望工廠採購看到我們時覺得穩定可靠」，這句話就已經把主色鎖在藍、深灰一帶；「希望年輕媽媽覺得我們親切好接近」，主色就會往暖色與淡色移動。
2. 已有商標與品牌色的公司，網站主色一律沿用，不另創。網站配色與名片、型錄、社群不一致，訪客感受到的不是新鮮而是不安；品牌一致性的重要性，我們在〈網頁設計原則〉的第二個原則另有說明。商標色若不適合當大面積主色（例如很亮的黃色），就把它降為強調色，主色改用中性色。
3. 看三家同業的網站，決定要「跟」還是要「跳」。同業都用藍色，跟著用藍色能讓訪客一眼認出您在這一行，但難以區隔；改用同業少用的顏色，辨識度高，但要靠文案與版面補足「這是什麼行業」的訊號。兩種都可以，重點是有意識地選。

三、不同年齡、文化與產業的顏色偏好

不同的人會被不同的顏色吸引，但研究顯示差異比多數人想的小：藍色在跨文化研究中都是最受偏好的顏色，而顏色的情緒聯想在各年齡層之間大致一致。Singh 2006 年的研究彙整引用了幾項早期研究：Wiegersma 與 Van der Elst 1988 年的跨文化研究發現藍色是各文化普遍最偏好的顏色；Cimbalo 等人 1978 年的研究則發現，黃、橙、藍被視為「快樂的顏色」的情緒聯想，在不同年齡層之間保持一致。所以「年輕人喜歡鮮豔、年長者喜歡柔和」這類說法，更適合當作出發點，而不是定論。

真正需要留意的差異在文化意義與產業慣例。同一份彙整指出，橙色在印度教傳統、綠色在伊斯蘭文化各有特定意涵；在台灣，紅色與金色帶有喜慶與招財的聯想，白色與黑色在部分場合帶有喪事意涵——做外銷網站或跨國品牌時，這些差異就必須查證，不能用台灣的直覺去套。產業慣例也是一種「訪客的預期」：餐飲網站用暖色系呈現食物，是因為訪客已經習慣在暖色裡看到食慾，逆著慣例走，得有明確的理由。

我們替客戶定配色時會問的 3 個問題

• 主要客群的年齡層與使用情境？年長客群多的網站，我們會把字體放大、對比拉高，配色偏向低飽和；訪客多在工廠或戶外用手機瀏覽的網站，對比要求更嚴。
• 網站是否面向海外市場？有的話，主色與強調色在目標市場的文化意涵要先查證，尤其是紅、白、綠、紫這幾種意涵差異大的顏色。
• 訪客在這個產業習慣看到什麼顏色？先列出三家同業的主色，再決定要跟隨慣例或刻意區隔——這一題的答案，會直接決定第二節的主色範圍。

四、網站配色的比例：主色、輔色、強調色與留白

網站配色最常被忽略的不是選了什麼顏色，而是每種顏色用了多少：主色約 60%、輔色約 30%、強調色約 10%，而留白算在主色裡。60／30／10 是室內設計與平面設計沿用多年的比例慣例，不是實證研究的結論，但在我們 465 件作品的經驗裡，配色「看起來不專業」的網站，九成不是顏色選錯，而是比例失衡——每種顏色都想當主角，結果沒有一個是主角。

主色是網站的底：多數企業網站的主色其實是白色或極淺的灰，品牌色反而是輔色，出現在標題、導覽列、區塊分隔；強調色只用在按鈕、重要連結與少數需要被看到的數字。這樣的分配讓訪客的眼睛有地方休息，也讓真正要他們採取行動的地方自然浮出來。專業的網頁設計公司習慣把版面適當留白，並不是為了偷懶，而是留白本身就是配色的一部分——白色讓眼睛休息，也把視線導向更明顯的按鈕。

分配比例的 4 個做法

1. 全站顏色扣掉黑白灰之後，控制在 4 種以內。1 個主色、1–2 個輔色、1 個強調色。超過 4 種，訪客就分不出哪個顏色代表「重要」。
2. 強調色一頁最多出現 3 處。主要按鈕、一個關鍵數字、一個提示，就是上限。強調色用得愈少，它出現時的效果愈強。
3. 深色區塊當節奏，不當底色。整頁深色背景適合形象頁與作品集，不適合服務說明與文章頁；長文放在深底上，閱讀負擔明顯增加。用一兩個深色橫幅區塊切換節奏即可。
4. 把色碼寫進文件，交給所有廠商。主色、輔色、強調色、字色、連結色各一個十六進位色碼（例如 #1a3c6e），連同商標檔一起交給網站、印刷與社群的廠商，才做得到跨媒體一致。

五、網站配色的對比度標準：字色至少 4.5:1

網站上的文字與背景，對比度至少要達到 4.5:1，大字（約 24px 以上，或 18.5px 以上的粗體）至少 3:1——這是 W3C《網頁內容無障礙指南》（Web Content Accessibility Guidelines，WCAG）2.2 的 AA 級最低標準，也是我們判斷「字看不看得清楚」唯一使用的客觀依據。對比度是一個 1:1 到 21:1 之間的數值，純黑字配純白底是 21:1，數字愈低愈難讀。這個標準原本為視力不佳的使用者制定，但 Nielsen Norman Group 2015 年的文章提醒，視力隨年齡自然退化，加上手機在戶外強光下的反光，低對比文字對一般人也是負擔。

「淺灰色字比較高級」是網站配色裡流傳最久的誤解。淺灰字在設計師的大螢幕上看起來優雅，在訪客的手機上、在工廠的日光燈下、在 50 歲採購經理的眼裡，就是看不清楚。以下是我們常量到的幾組字色與背景，數值以 WCAG 的對比度公式計算：

驗對比度的 3 個做法

1. 用工具量，不用眼睛猜。WebAIM 的 Contrast Checker、瀏覽器開發者工具的色彩檢查，或 Google 的 Lighthouse 無障礙檢測，輸入字色與背景色碼即可得到數值。內文、次要文字、連結、按鈕、表單提示各量一次。
2. 內文字色以 #333333 或更深為原則。次要說明文字最淺用到 #767676（剛好 4.5:1）；想要「柔和」的感覺，用字級與行距調整，不要用變淺的字色換。
3. 深底白字要檢查底色夠不夠深。白字放在飽和的亮色（亮紅、亮綠、橙、黃）上多半不及格；把底色加深一到兩階，或改用深色字，都能解決。

六、不要只用顏色傳達訊息：8% 的男性看不清紅綠

約 8% 的男性（每 12 人有 1 人）與 0.5% 的女性（每 200 人有 1 人）有色覺缺陷，其中最常見的是紅綠色覺缺陷——網站上只靠顏色區分的資訊，這群訪客會直接漏掉。依英國 Colour Blind Awareness 組織的統計，全球約有 3 億人有色覺缺陷。以 B2B 網站為例，訪客多為男性採購與工程人員，8% 不是可以忽略的比例。

WCAG 2.2 的 1.4.1「顏色的使用」是 A 級的基本要求：顏色不能是傳達資訊、指示動作或區分元素的唯一方式。常見的違規包括：連結只用顏色區分、沒有底線；表單錯誤只把欄位框線變紅、沒有文字說明；圖表只用紅綠兩色區分兩組數據；「必填」只用紅色星號、沒有「必填」兩個字。紅綠色覺缺陷者看到的不是「紅變綠」，而是任何含紅或綠成分的顏色都難以分辨，所以紅綠、橙綠、紫藍這些組合都要避免只靠顏色。

不只靠顏色的 4 個做法

• 連結加底線或粗體，不只改顏色；本文的連結就是顏色加底線。
• 表單錯誤同時給文字，例如「請輸入電子信箱」，紅框只是輔助。
• 狀態與分類加圖示或文字標籤，例如「已完成 ✓」「缺貨」，不只用綠點紅點。
• 用色覺模擬工具看一次，Chrome 開發者工具內建色覺缺陷模擬（Rendering → Emulate vision deficiencies），改版上線前用它把主要頁面看一遍。

七、按鈕要用什麼顏色？答案是「跳出來」的顏色

按鈕的顏色沒有標準答案，唯一的標準是它必須是頁面上最跳出來的那一個——與周圍對比最強、而且整頁只有主要行動用這個顏色。網路上流傳「紅色按鈕比綠色多 21% 點擊」的案例，出自 HubSpot 收購前的 Performable 在 2011 年的測試，樣本約 2,000 次造訪。轉換優化機構 CXL 檢視這個案例後指出，該網站原本就是綠色系，綠色按鈕融進背景、紅色按鈕才跳出來——結果反映的是對比，不是紅色本身；CXL 的結論是「重要的是高對比的顏色，不是任何特定的顏色」。

我們的做法一致：按鈕用強調色，而強調色是全站唯一只用在行動點的顏色。一個藍色系的網站，強調色可能是橙色；一個紅色系的網站，強調色反而可能是深藍或黑色。同時，一頁只能有一個「主要按鈕」用強調色，其餘次要按鈕用線框或灰階，訪客才知道該按哪裡。

按鈕配色的 4 個判斷標準

1. 與周圍的對比是否最強？把頁面縮小到看不清字，按鈕仍應是第一眼看到的區塊。做不到，就換色或加深。
2. 按鈕上的文字是否通過 4.5:1？亮橙、亮綠、黃色底配白字幾乎都不及格（見表 3），改用深色字或加深底色。
3. 一頁是否只有一個主要按鈕用強調色？「線上詢價」「立即購買」這類主要行動用強調色；「了解更多」「查看案例」用線框或灰階。
4. 按鈕是否有非顏色的線索？形狀（圓角矩形）、陰影、滑鼠移入的變化、清楚的動詞文字，讓色覺缺陷者與掃讀者都能認出它是可以按的。

要驗證按鈕顏色的實際效果，A/B 測試是唯一可靠的方法；我們建議測試前先把對比與唯一性做到位，否則測出來的差異多半只是「本來就看不到」與「現在看得到」的差別。SEO 與轉換的其他上線前驗收項目，可參考〈SEO網頁設計上線前必驗 15 項〉。

八、我們健檢時最常見的 5 個配色問題

以下 5 種情形，來自多米諾接手網站健檢與改版案的實際觀察，出現頻率由高到低——每一項都對應前面的一個章節，改版前先對照一輪。

1. 內文與說明文字用淺灰色，對比不到 3:1。（對應第五節）最常見、也最容易修：把字色改深即可，不必動版面。改版時我們會直接把內文字色定在 #333333 以內。
2. 全站顏色超過 6 種，主要按鈕不突出。（對應第四、七節）每個區塊各有各的顏色，訪客找不到「該按哪裡」。改法是先砍到 4 種以內，再把強調色收回只給主要按鈕。
3. 網站主色與商標、名片、社群不一致。（對應第二節）不同時期由不同廠商製作，藍色各有各的色號。改法是定一份色碼文件，所有媒體依文件統一。
4. 亮色底配白字的按鈕與橫幅。（對應第五節）橙色、亮綠、亮紅底上的白字，在手機上幾乎看不清楚。改法是加深底色或改深色字。
5. 表單與狀態只靠顏色區分。（對應第六節）錯誤只變紅框、必填只有紅星號、連結沒底線。改法是補文字與圖示，成本極低。

這 5 點聚焦在配色；更基本的技術與結構問題（動態網址、缺少 HTTPS、沒有手機版），我們在〈網頁設計常見錯誤〉另有一份整理。

九、網站配色 10 題檢核清單

改版前或上線前，拿以下 10 題逐題檢查：每題 10 分，哪一題失分，就回頭補對應的章節。第 1–2 題對應第二、三節，第 3–4 題對應第四節，第 5–7 題對應第五節，第 8 題對應第六節，第 9–10 題對應第七節。

1. 能用一句話說出「網站要讓○○客群覺得我們○○」，而且主色符合這句話嗎？
2. 網站主色與商標、名片、社群頭像的色碼是否完全相同？
3. 全站顏色扣掉黑白灰後是否在 4 種以內？
4. 強調色是否只用在主要按鈕與少數重點，一頁不超過 3 處？
5. 內文字色與背景的對比度是否達 4.5:1（建議 #333333 以內）？
6. 次要說明文字、表單提示、頁尾文字是否也達 4.5:1？
7. 深色或彩色底上的白字，對比度是否通過？
8. 連結、表單錯誤、狀態標示是否都有顏色以外的線索（底線、文字、圖示）？
9. 把頁面縮小到看不清字，主要按鈕是否仍是第一眼看到的區塊？
10. 一頁是否只有一個主要按鈕使用強調色？

十、網站配色常見問題

十一、結論：好的網站配色，是讓訪客「看得清楚、認得出來、知道該按哪裡」

網站配色能不能增加成交率，最後取決於三件事：字看得清楚、品牌認得出來、按鈕知道在哪裡。先定目標對象與品牌個性，再選主色、輔色與強調色，依 60／30／10 分配，最後用 4.5:1 的對比度驗證——這 4 個步驟不需要設計天分，需要的是把訪客的眼睛放在自己的喜好前面。顏色對訪客的影響很主觀，網站配色沒有絕對的好壞，但「訪客看不清楚」是絕對的壞；把這一項守住，其餘的選擇才有機會發揮效果。