網站配色怎麼建立：色相、明度與可讀性

把喜歡的配色套到網站後，常會出現另一種問題：首頁很好看，課程表的淡字卻不容易讀，報名按鈕和錯誤提示又用了同一種醒目色。色票本身沒有回答每個顏色應該出現在哪裡，因此還需要用途與驗收規則。

以下以原創生活修繕課程網站為例，依 2026 年 9 月 14 日查閱的 MDN、Adobe 與 W3C 文件整理。示範色碼和設計安排由本文自行選定，對比數值按公開公式計算，沒有宣稱特定顏色已經提升報名率或符合所有無障礙要求。

先看懂色相、彩度與明度在調整什麼

色相用來描述偏紅、偏綠或偏藍等色彩方向；彩度描述顏色由灰到鮮明的程度；明度則協助調整深淺。CSS 的 HSL 以色相、飽和度與亮度參數表示 sRGB 色彩，讓你不必只靠紅綠藍三個通道猜測結果。

HSL 色相可用色環角度表示，對向色相相差 180 度；調整飽和度或亮度，則可在相近色相下建立不同深淺與鮮明程度。這些參數適合探索色票，但 HSL 的亮度數值不是 WCAG 對比公式裡的相對亮度，不能直接拿兩個百分比相減來判定可讀性。

修繕課程網站可以先選一個深青綠方向，再做較淡的背景變體與較深的文字變體。先觀察同一內容放上去是否清楚，不要為了讓每個色票數字排列整齊，就接受看不清楚的組合。色碼規律有助管理，實際使用仍要另外驗證。

配色關係提供方向，不能保證適合閱讀

單色配色可圍繞同一色相調整深淺；相近色配色從色環鄰近位置尋找搭配；互補色則利用對向色相形成差異。這些關係有助提出候選組合，不表示其中任何一組天然適合當文字和背景，也沒有固定公式能保證所有人都覺得和諧。

Adobe 的色環工具可以依配色關係產生候選色票，也提供對比檢查入口。使用時先輸入自己的基礎色，再挑選需要的變體，保留色碼與用途。若從圖片取色，應使用自己可用的圖片；提取到的顏色仍需經過網站實際情境的檢查。

對課程頁來說，照片、圖示和提醒框都可能帶入額外色彩。可以先讓主要閱讀區保持穩定的中性色，再決定哪個位置需要主色或強調色。這是本例的設計選擇，不把某種面積比例當成所有網站必須遵守的規定。

依用途建立色彩規則，避免每頁重新挑色

先列出背景、主要文字、次要文字、連結、主要操作及狀態提示等用途，再為它們指定色碼。名稱可以寫成主要文字或錯誤訊息，而不只寫深灰一號。之後需要調整時，才知道這個顏色影響的是哪一種資訊。

原創範例可把深青綠 #0D6B68 用在主要操作，白色 #FFFFFF 用作其文字，並把一般內文另外配置成適合淺底的深色。主要操作與錯誤提示應有不同規則；即使品牌主色偏紅，也不代表所有紅色都能同時表示品牌、優惠和輸入錯誤。

再補上滑過、鍵盤聚焦、選取與停用等狀態。若有深色模式，每一種文字和背景搭配都要重新確認，不能只把原本的顏色反轉。保留色彩名稱、色碼、適用背景及禁用組合，讓新增頁面時能延續同樣規則。

用對比數值檢查文字，也看實際呈現

WCAG 2.2 的 AA 文字對比條件，一般文字至少為 4.5:1，符合大型文字定義者至少為 3:1。大型文字參考 18pt 一般字或 14pt 粗體及相當的中日韓字型尺寸，需看實際交付大小；不要只因文字放在標題欄位，就套用較低門檻。

本文以不透明 sRGB 色碼和純白背景計算：#777777 約為 4.478:1，未達一般文字的 4.5:1；#666666 約為 5.742:1，達到這項門檻。判定時要使用未四捨五入的數值，不能把前者顯示成 4.5 就視為通過。

深青綠 #0D6B68 與白色的對比約為 6.325:1，可作本例的候選組合。這只檢查指定色對；透明度、圖片背景、漸層和狀態變化都可能改變結果。字型筆畫、字級及閱讀環境仍會影響體驗，應在實際頁面檢查，而不只看色票工具上的通過標記。

1. 依網站內容選擇基礎色，再探索深淺與配色關係。
2. 列出文字、背景、操作與狀態用途，記錄各自色碼。
3. 逐組計算實際前景與背景的對比，修正不合適的搭配。
4. 檢查不同畫面及互動狀態，補上文字或形狀提示並保存規則。

圖示與狀態不能只靠顏色傳達

文字以外，用來辨識控制元件、狀態或理解內容的必要圖形，另有非文字對比要求，通常需與相鄰顏色達 3:1，並有適用範圍及例外。這不代表網站每條裝飾線或每兩個品牌色都要互相達到 3:1，應先確認它承載什麼資訊。

例如課程名額不能只用綠點表示可報名、紅點表示額滿，還應加上可報名或已額滿的文字。表單錯誤也應說明哪個欄位需要修改，不能只有外框變色。這些提示讓無法分辨特定色差的人仍能理解頁面。

鍵盤聚焦樣式需在實際背景上看得見；連結可配合底線或其他持續可辨識的方式，避免與一般內文混淆。做灰階預覽有助發現資訊是否過度依賴色相，但它不能模擬所有視覺狀況，也不是完整無障礙檢測的替代品。

把色彩心理寫成假設，交給內容與回饋驗證

設計提案可能希望以青綠傳達安定、以暖色增加活潑感。這類描述可以作為團隊討論的方向，但不能直接寫成所有台灣讀者看到某色就會信任或購買。色彩感受還涉及內容、文化、既有經驗及使用情境，應保留驗證空間。

修繕課程頁可以請讀者描述頁面給他的印象，再觀察是否容易找到時間、費用及報名方式。若要比較配色對行為的影響，需控制其他變動並安排適當評估；同時改標題、價格和按鈕後，即使報名增加，也無法只歸功於顏色。

最後整理一頁色彩規則，包含各用途、可搭配背景、檢查日期與版本。新活動或新頁面加入時，先確認能否沿用，再決定是否新增顏色。配色系統的實用價值，是讓畫面保持一致、資訊容易辨識，且之後的修改能夠追查。

搭配字級與間距建立閱讀層級

用原型任務檢查實際操作

整理品牌語氣與設計假設

• 教學
• 軟體與 App
• 架站與電商
• 網域、主機與前端