網頁配色要先把品牌色拆成用途明確的幾組顏色：主色負責品牌辨識與主要行動，輔色撐起區塊層次，強調色只留給需要被注意的地方，再搭配一組處理文字、背景與分隔線的中性色，以及成功、警告、錯誤等狀態色。顏色定案前要做對比檢查：依 WCAG（網頁內容無障礙指引），一般文字與背景的對比至少四點五比一，大字至少三比一，而且資訊不能只靠顏色傳達。檢查通過後，把色值、用途與搭配規則寫成色票規範，設計與工程才會用同一套顏色。
先把品牌色拆成網頁用的色彩角色
品牌手冊通常只有一兩個識別色，網頁需要的則是「每個顏色負責什麼」。先列出下面五種角色，再替每個角色決定色值：
| 角色 | 負責的地方 | 常見錯誤 |
|---|---|---|
| 主色 | 標誌、導覽重點、主要按鈕 | 大面積鋪滿背景，按鈕反而不突出 |
| 輔色 | 區塊底色、插圖、次要元件 | 和主色太接近，層次分不出來 |
| 強調色 | 促銷標籤、提醒、需要被注意的數據 | 到處使用，失去提醒作用 |
| 中性色 | 內文、背景、框線、分隔線 | 只有黑白兩階，灰色深淺不夠用 |
| 狀態色 | 成功、警告、錯誤、資訊提示 | 錯誤色和品牌主色撞色，訪客誤以為出錯 |
每個角色再準備幾個深淺不同的色階，例如主色的深色版給文字、淺色版給區塊底色。識別色本身該怎麼選、如何兼顧印刷與招牌，請參考企業識別色的選擇考量，網頁配色是在既有識別色上延伸，不必重選品牌色。
網站配色的分配原則：面積、層級與意義
網站配色好不好看，常取決於顏色放在哪裡、放多少，而不是選了哪幾個色。幾個實用的分配原則：
- 大面積交給中性色：背景與內文區以白、淺灰或深灰為主，品牌色才有空間被看見。
- 主色集中在少數關鍵位置：導覽列重點、標題裝飾與主要按鈕，讓視線自然停在那裡。
- 強調色要稀有：一個畫面裡反覆出現，就和一般元素沒有差別。
- 一個顏色只代表一種意義：連結用的顏色不要同時拿來做裝飾文字，紅色若代表錯誤，就不要用在一般標題。
- 同類元件用色一致：各頁的次要按鈕、標籤與提示框套同一組顏色。
可以把設計稿轉成灰階檢視：去掉色相後重要元素仍然比較深或比較亮，代表層級靠明暗建立起來了；整頁變成一片相同的灰，就要調整色階深淺。
文字配色與對比：WCAG 的門檻怎麼用
文字配色要先過可讀性，再談風格。WCAG 的 AA 等級要求一般文字與背景對比至少四點五比一；大字至少三比一，大字指至少十八點，或粗體十四點；這裡的點是 pt 單位而不是像素，說明文件換算十八點約為 CSS 的二十四像素，中日韓字型則以等效大小判斷。更嚴格的 AAA 等級，一般文字要七比一、大字四點五比一。說明文件也指出門檻不能四捨五入，算出來略低就是不符合。
實務上容易出問題的地方：
- 淺灰色內文與說明文字：在白底上看起來很雅緻，對比卻常不夠。
- 照片或色塊上的白字：WCAG 把背景圖造成的對比不足列為不符合的案例，可加半透明底色或改放在純色區塊。
- 表單輸入框：如果靠邊框讓人看出這裡可以輸入，邊框和背景的對比至少三比一；圖示與圖表中理解內容必需的部分也適用同樣門檻。
標誌或品牌名稱裡的文字、純裝飾文字與停用中的元件沒有對比要求，但不要拿來放重要資訊。
色覺友善：資訊不能只靠顏色傳達
不是每個人看到的顏色都一樣，WCAG 因此要求不能只靠顏色傳達資訊、提示動作或區分元素。常見的修正做法：
- 內文連結：只靠顏色和一般文字區分時，連結色和周圍文字的對比至少三比一；更穩妥的做法是加上底線。
- 表單錯誤：欄位變紅之外，再加上錯誤圖示與文字說明，例如「請填寫電話」。
- 圖表：線條或長條直接標上名稱，或用不同形狀、紋路區分，不要只靠圖例的色塊對照。
- 必填與狀態標示：用文字或符號搭配顏色，例如「必填」字樣、勾選圖示。
檢查時可以用 Chrome 開發人員工具的 Rendering 面板，在模擬視覺缺陷的選單切換紅色盲、綠色盲、藍色盲與全色盲，確認畫面上的狀態與分類仍然看得出來。
連結、按鈕與焦點狀態的用色
可以點的東西要長得像可以點，而且每種狀態都要有明確的顏色。建議為互動元件列出一張狀態表：一般、滑鼠移上、鍵盤聚焦、按下、停用，各自的底色、文字色與框線色都寫清楚。
- 連結色：全站固定一個顏色，不和強調色、錯誤色混用。
- 主要按鈕：用主色或和背景對比明顯的顏色，同一畫面只讓一個按鈕特別醒目。文案、位置與測試方法可參考CTA 按鈕的設計方法。
- 焦點框：WCAG 要求鍵盤操作時焦點指示看得見，焦點框和相鄰背景也要有足夠對比；不要為了好看把瀏覽器預設的焦點框移除後卻沒有補上替代樣式。
- 停用狀態：停用元件雖然沒有對比要求，仍要讓人看得出它存在、只是暫時不能用。
深色模式要另外調一套，不是直接反轉
網站可以透過 CSS 的 prefers-color-scheme 媒體查詢，偵測使用者在作業系統或瀏覽器設定的淺色或深色偏好，再套用對應的配色；color-scheme 屬性則能讓表單控制項、捲軸等預設元件跟著換色。web.dev 建議先依循瀏覽器送出的偏好，再視需要提供讓使用者自行切換的按鈕。
調深色版時要注意：
- 文字不一定要用純白，略帶灰的白色比較不刺眼。
- 品牌主色在深色背景上可能太暗或太亮，通常要另外準備一個調整過的色階。
- 照片與插圖可以稍微降低鮮豔度，避免整頁只剩圖片在發光。
- 所有文字與背景組合要重新檢查對比，淺色版通過不代表深色版也通過。
建立色票與配色規範，讓設計和工程同一套
配色討論定案後，要整理成一份可以直接拿來用的規範，否則每做一個新頁面就會多出幾個相近卻不同的顏色。規範至少包含：
- 以用途命名：叫「主要按鈕底色」「內文文字」「錯誤提示」，不要只叫「藍色一號」，日後換色才不必逐頁找。
- 記錄色值：網頁用的十六進位色碼與 RGB 值；若同一顏色也要印刷，另外標註印刷用的色值。
- 列出允許的前景與背景組合：每一組附上對比檢查結果，不合格的組合直接標示禁止使用。
- 寫進程式：用 CSS 自訂屬性把顏色定義在一處、多處引用，深色模式只要替換變數值。
- 附正反範例：放幾張實際頁面截圖，說明哪些用法正確、哪些要避免。
上線前用開發人員工具的顏色挑選器檢查對比值，或用 Lighthouse 無障礙報告與 CSS 總覽列出對比不足的元素，修正後再發布。
常見問題
網站配色要用幾種顏色才適合？
沒有固定數量，重點是每個顏色都有明確用途。可以先從主色、輔色、強調色各一組開始，搭配幾階中性色與狀態色，不夠用時依角色擴充，不要每做一頁就新增顏色。
品牌色對比不夠，可以拿來當文字顏色嗎？
不建議直接用在內文。可以把品牌色調深或調淺成另一個色階給文字使用，原色保留給大面積色塊、圖形或標誌。標誌裡的文字沒有對比要求，但一般文字仍要符合門檻。
漸層或照片背景上的文字怎麼檢查對比？
以文字下方對比較差的那一區為準檢查，而不是取平均。若照片明暗變化大，可在文字後方加半透明色塊或遮罩，或把文字移到純色區域，比反覆挑照片穩定。
網站一定要做深色模式嗎？
不一定。深色模式需要另外調整色階並重新檢查對比，等於多維護一套配色。若資源有限，先把淺色版的可讀性與狀態設計做好，再評估是否值得投入。
配色定案後怎麼避免越改越亂？
把顏色集中在色票規範與程式變數中管理，新頁面只能從既有色票挑選。若真的需要新顏色，先說明用途與對應角色，確認對比合格後再加入規範，而不是直接寫在單一頁面。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
如果網站正準備改版，建議先盤點現有頁面用了哪些顏色，挑出對比不足與用途混亂的地方，再依色彩角色重新整理。京采的網頁設計服務會從品牌識別色延伸出網頁色票，完成對比與色覺檢查，並把配色規範交給工程端套用。想討論你的網站，歡迎與我們聯繫。
