網站配色的決定順序是：先定一個主色，再依需要補輔色，最後配一組中性色，並用 60-30-10 的比例分配版面。真正會出問題的不是「顏色好不好看」，而是文字與背景的對比度不足——這是有明確數字門檻的：一般內文至少 4.5:1，大字與按鈕邊框至少 3:1。本文拆解三種顏色角色、七個決定步驟、對比度檢查方式，並釐清三個在配色文章裡流傳十幾年、但其實查不到原始出處的數據。
一套網站配色由三種角色組成
網站配色方案由主色、輔色、中性色三種角色構成：主色負責吸引目光與行動點，輔色負責次要層級，中性色負責文字與背景。三者的版面比例建議為 60:30:10。
把配色想成「挑幾個好看的顏色」，是最常見的起手錯誤。配色是分工，每個顏色在版面上有固定的職責，決定的不是顏色本身，而是「這個顏色要負責什麼」。
主色：焦點與行動點
主色用在您最希望使用者看見並採取行動的地方：主要按鈕、標題、重要提示、下載或聯絡表單。如果品牌已經有 Logo 或既有識別色，主色通常直接沿用，不必另起爐灶。
輔色：次要層級
輔色處理「重要、但不是最重要」的元素：次要按鈕、副標題、標籤、區塊背景。它的作用是把版面切出層次，讓使用者一眼看出哪些是主線、哪些是支線。內容型或有多種功能頁面的網站（產品頁、資源下載頁、會員頁）通常需要輔色，單頁式或功能單純的網站可以不用。
中性色：文字與背景
中性色（黑、白、各級灰）承擔網站上絕大多數的面積：內文、背景、分隔線、表格框線。它的功能和留白很接近——讓眼睛有地方休息，也讓主色跳得出來。
實務上建議至少準備一深一淺兩個中性色。深色給文字，淺色給背景與區塊底色。若要用主色的不同明度來當中性色，難度較高，因為要同時兼顧對比度，通常不建議一開始就這樣做。
三者的比例：60-30-10
60-30-10 是從室內設計沿用到網頁設計的比例慣例：中性色（含背景）約佔 60%、輔色約 30%、主色約 10%。
60-30-10 法則的重點不是精確比例，而是「主色必須是少數」——主色用得越少，它出現時的指引效果越強。
常見的反例：整頁都是品牌主色的網站。當所有東西都在喊，使用者就不知道該看哪裡，行動呼籲按鈕反而失去作用。
決定配色方案的七個步驟
配色方案的決定順序是：定主色 → 決定顏色數量 → 補輔色 → 選中性色 → 分配版面位置 → 檢查對比度 → 實機驗收。對比度檢查不能放到最後補，它會回頭推翻前面的選色。
- 找到主色 如果已有 Logo 或品牌識別色，直接沿用；沒有的話，從產業慣例與客群偏好收斂。用瀏覽器的取色工具（例如 ColorZilla、Eye Dropper）把看到的參考色記下來，累積成候選清單再篩選。
- 決定要用幾種顏色 一般網站三色就夠：主色、輔色、中性色各一組。顏色數量與網站複雜度成正比，不是與品牌豐富度成正比。功能單純的網站用兩色（主色＋中性色）反而更俐落。
- 必要時再補輔色 先問「有哪個層級目前分不出來嗎」，有才補。沒有實際需求就多加一個顏色，只會讓後面的維護變複雜。也可以先試試用主色的不同明度來分層，不一定要換色相。
- 選定中性色 一深一淺。深色用於內文——注意純黑（#000000）配純白在大面積閱讀時對比過強，多數設計會選深灰（例如 #333333）而非純黑。
- 分配到版面位置
把「哪個顏色用在哪裡」寫成規則，而不是每頁臨時決定。至少要定義：主要按鈕、次要按鈕、內文、標題、連結、連結 hover、背景、區塊底色、警示訊息這九個位置。這份規則就是後續所有頁面的依據。
這一步是實務上最常被跳過、也最常出問題的一步。沒有明文規則，網站上線半年後就會出現三種不同的藍色按鈕。
- 檢查對比度 用對比度檢查工具逐組驗證文字與背景、按鈕文字與按鈕底色、表單邊框與背景。不通過的組合現在就改，不要等到上線後才發現內文讀不清楚。門檻見下一節。
- 實機驗收 在真實裝置上看，不要只看設計稿。手機在戶外強光下、筆電螢幕亮度調低、以及深色模式，都是設計稿看不出來的情境。同一組配色在不同螢幕上的落差，往往比想像中大。
對比度：配色的及格線
網頁內容無障礙指南（Web Content Accessibility Guidelines，WCAG）2.2 規定：一般內文與背景的對比度至少 4.5:1，大字（18pt 以上，或粗體 14pt 以上）至少 3:1，按鈕、表單邊框等介面元件至少 3:1。這是可以量測的硬門檻，不是主觀判斷。
前面六個步驟都關於「好不好看」，這一節關於「能不能用」。配色出的實際問題，九成不是難看，是淺灰字配白底看不清楚。
| 項目 | 最低對比度 | 等級 | 適用範圍 |
|---|---|---|---|
| 一般文字 | 4.5:1 | AA | 內文、說明文字、表格內容、頁尾 |
| 大型文字 | 3:1 | AA | 18pt 以上，或粗體 14pt 以上的標題 |
| 非文字元素 | 3:1 | AA | 按鈕邊框、表單框線、圖示、圖表中用來辨識的色塊 |
不能只用顏色傳達訊息
WCAG 2.2 另有一條 A 級標準（1.4.1 Use of Color）：顏色不能是傳達訊息、指示動作或區分元素的唯一方式。
具體來說，這些做法都不合格：
- 表單錯誤只把欄位框變紅。要同時附上文字說明，例如「請填寫電子信箱」。
- 必填欄位只用紅色標題表示。要加上星號或「必填」字樣。
- 圖表只靠顏色區分線條。要同時用線型、標記形狀或直接標註。
- 內文連結只靠顏色與內文區別。要保留底線，或用其他可辨識的視覺差異。
不只是為了法規。台灣的政府與公部門網站有無障礙規範要求，一般商業網站並非強制。但對比度不足影響的不只是視障使用者——年長客群、在戶外用手機的人、螢幕品質較差的裝置，都會直接讀不清楚。這是可讀性問題，不是合規問題。
實務上怎麼做
我們在為客戶做網站健檢時，配色這一段的流程是固定的：先把網站上實際用到的顏色抓出來列成清單（通常會發現比設計規範上多出好幾個），再逐組丟進對比度檢查工具，最後把不通過的組合按「出現位置的重要性」排序，優先修內文與按鈕。
會這樣排序，是因為對比度不足的地方通常不只一處，一次全改不切實際。內文與主要按鈕影響的人最多，先修這兩塊，改善幅度最大。
顏色心理學可以用到什麼程度
顏色確實影響觀感，但配色文章裡常見的幾個「量化數據」多半查不到可靠原始出處。顏色心理學適合當作收斂選項的參考，不適合當作決策依據。
不同顏色帶來的普遍聯想，是有共識的：
| 顏色 | 常見聯想 | 使用建議 |
|---|---|---|
| 紅 | 重要、急迫、熱情 | 提升注意力效果強，但大面積使用容易造成疲勞。適合當強調色，不適合當背景。 |
| 橘 | 活力、親和、年輕 | 比紅色柔和，常用於行動呼籲按鈕。 |
| 黃 | 明亮、愉快 | 在白底上對比度極難達標，幾乎不能直接當文字色。 |
| 綠 | 自然、健康、成長 | 有機、醫療保健、永續相關產業的常見選擇。 |
| 藍 | 信任、穩定、專業 | 網頁設計中最常見的主色。優點是安全，缺點也是——同業可能都在用。 |
| 紫 | 高級、神秘、創意 | 適合走精品或創意路線的品牌，一般商務網站較少使用。 |
三個被廣泛誤引的數據
以下三句話在中文與英文的配色文章裡都極常出現。我們在改寫本文時逐一回溯出處，結果如下：
- 「90% 的人單憑顏色就做出購買決定」 這句話的源頭是 Singh 於 2006 年發表在《Management Decision》的〈Impact of color on marketing〉。原文寫的是：人們在與人或產品初次接觸的 90 秒內就會做出判斷，而這個判斷有 62% 至 90% 是基於顏色。「90 秒」被誤傳成「90%」，「初步判斷」被誤傳成「購買決定」。原始說法本身也沒有公開的實驗數據支撐，引用時應標明它是一篇綜述性文章的陳述。
- 「使用者的平均注意力只有 8 秒」 這個數字通常被歸給某份 2015 年的報告，但該報告引用的來源並不支持這個結論，學界也未曾建立過「人類平均注意力長度」這種可比較的量測。本文不使用這個數字。
- 「正確配色能讓品牌知名度提高 80%」 這句話在行銷文章間互相轉引多年，但追不到可查證的原始研究。本文不使用這個數字。
為什麼要特地澄清這件事：用錯誤數據說服客戶，短期看起來有效，但只要對方查證一次，之後您講的每一句話都要打折。配色的價值不需要靠假數據撐——版面層次清楚、文字讀得清楚，本身就是看得見的差別。
性別與年齡的顏色偏好，參考價值有限
常見的「男性偏好藍色、女性偏好紫色」這類統計，多半來自樣本數不大、年代也久的問卷研究，且不同研究之間結論並不一致。與其用這種通則推測您的客群，不如直接看自己網站的實際資料——訪客的裝置分佈、年齡層、停留與轉換表現，才是能拿來做決定的依據。
產業慣例與品牌辨識度
產業慣例值得知道，但不必然要跟隨。在同業都用同一種顏色的市場裡，跟隨慣例是安全牌，刻意錯開則是辨識度的機會，取捨要看您的市場位置。
藍、紅、綠是各產業最常出現的三種品牌主色。醫療與金融偏藍（穩定、信任），餐飲偏紅橘（食慾、活力），環保與有機偏綠。
比較實用的一個觀察：藍色系在食品類幾乎不會用在食物本身的呈現上，因為藍色在天然食物中罕見，容易被聯想成不新鮮。這類「不要用」的慣例，往往比「要用什麼」更值得參考。
至於辨識度，決定它的通常不是顏色本身，而是一致性——同一組顏色在網站、名片、社群、廣告上長期反覆出現。頻繁更換配色的品牌，用再漂亮的顏色也累積不起辨識度。這一點和我們在SEO 初學者完整指南裡談的品牌實體一致性是同一件事：搜尋引擎與 AI 判斷品牌，靠的也是跨來源的一致訊號。
配色工具
配色工具分三類：生成配色方案、檢查對比度、擷取現有顏色。三類各準備一個就夠，工具越多不會讓決定更快。
| 用途 | 工具 | 說明 |
|---|---|---|
| 生成配色方案 | Adobe Color、Coolors、ColorSpace | 從一個主色延伸出整套方案。Adobe Color 可上傳圖片取色。 |
| 檢查對比度 | WebAIM Contrast Checker | 輸入前景與背景色碼，直接顯示是否通過 WCAG 的 AA 與 AAA 門檻。這一類是必備。 |
| 擷取現有顏色 | ColorZilla、Eye Dropper（Chrome 擴充） | 從任何網頁或圖片取出色碼，累積參考清單用。 |
三類之中，對比度檢查是唯一不能省的。生成與取色工具可以用感覺替代，對比度不行——4.5:1 這個數字用肉眼判斷不出來。
常見問題 FAQ
網站配色會影響 SEO 排名嗎？
配色不是 Google 的排名因子。但對比度不足造成的可讀性問題，會反映在使用者的實際行為上——讀不清楚就離開。影響是間接的，透過使用者體驗發生，而不是顏色本身被評分。
一個網站最多可以用幾種顏色？
建議主色、輔色、中性色三組。顏色數量應該由網站的功能複雜度決定，不是由品牌想表達多少個性決定。功能單純的網站用兩組（主色＋中性色）通常更俐落。
對比度不足一定要改嗎？
一般商業網站在台灣沒有強制規範，但內文與主要按鈕建議一定要達標。這兩處影響的使用者最多，也最容易在年長客群與戶外使用情境下出問題。次要文字可以排在後面處理。
用純黑色 #000000 當內文顏色可以嗎？
對比度絕對達標，但大面積閱讀時對比過強，長時間看容易疲勞。多數網站會選深灰（例如 #333333），在白底上對比度仍有 12:1 以上，遠高於 4.5:1 的門檻。
品牌色對比度不夠，但又不能改，怎麼辦？
品牌色不必當文字色。可以只把它用在大面積色塊、圖示、邊框等對比門檻較低（3:1）的位置，文字改用達標的深色。品牌識別靠的是色塊面積與一致性，不是靠文字本身的顏色。
深色模式需要另外設計一套配色嗎？
需要。淺色模式下達標的組合，反轉後不一定達標，飽和度高的顏色在深色背景上還容易產生視覺震動。若要支援深色模式，兩套配色都要各自通過對比度檢查。
60-30-10 一定要精確照比例分配嗎？
不用。它是幫助判斷的經驗法則，重點在於主色必須是版面上的少數。主色用得越節制，它出現時的指引效果越強。
更新紀錄
- 2020 年 1 月：初版發布，內容編譯自 websitesetup.org 的網站配色專文。
- 2026 年 8 月：全文重寫。新增 WCAG 2.2 對比度門檻與「不能只用顏色傳達訊息」一節；回溯並移除三個查不到可靠原始出處的數據（含「90% 憑顏色決定購買」的誤引來源說明）；補上實務健檢流程；配圖由 21 張精簡為 5 張說明圖。
- 下次檢視：本文預計每半年重新查證一次 WCAG 版本與門檻，並更新本欄。
結論
三件事收攏：配色是分工不是挑色——先決定主色、輔色、中性色各自負責什麼，再決定它們長什麼樣；對比度是唯一有硬門檻的部分，內文 4.5:1、大字與介面元件 3:1，這一項用肉眼判斷不出來，一定要用工具量；顏色心理學拿來收斂選項可以，拿來當決策依據不行，流傳最廣的那幾個數字經不起回溯。
不確定您的網站有沒有讀不清楚的地方？轉角網路SEO行銷在板橋與台中提供免費搜尋健檢。除了檢索與索引，我們也會把網站實際用到的顏色抓出來逐組檢查對比度，並依影響範圍排出處理順序，告訴您哪些該先改、哪些可以放著。立即透過線上表單與我們聯絡。
參考來源
- W3C，〈Understanding SC 1.4.3: Contrast (Minimum)（對比度最低要求）〉，Web Content Accessibility Guidelines 2.2，2026 年 8 月查證。
- W3C，〈Understanding SC 1.4.11: Non-text Contrast（非文字對比度）〉，Web Content Accessibility Guidelines 2.2，2026 年 8 月查證。
- W3C，〈Understanding SC 1.4.1: Use of Color（顏色的使用）〉，Web Content Accessibility Guidelines 2.2，2026 年 8 月查證。
- Singh, S.，〈Impact of color on marketing〉，《Management Decision》第 44 卷第 6 期，第 783–789 頁，2006 年。（本文「90 秒內形成判斷、其中 62–90% 基於顏色」一說的原始出處）
- WebAIM，〈Contrast Checker（對比度檢查工具）〉，WebAIM，2026 年 8 月查證。
- WebsiteSetup，〈Website Color Schemes〉，websitesetup.org（本文圖 4、圖 5 之圖表出處，亦為本文 2020 年初版的編譯來源）。
- 轉角網路SEO行銷，〈SEO 是什麼？2026 初學者完整指南〉，corners.com.tw，本站自有內容。