LANZE GUIDES / 品牌設計
主色、輔色、背景與文字需要各自明確的用途。這篇用實際色碼比較文字對比，提供保留亮色的四種調整方法，並整理團隊可直接使用的配色表與操作檢查。
品牌色彩要先決定主色、輔色、背景與文字各自的用途，再把配色放進真實版面，檢查閱讀與操作是否清楚。主色太亮時，可以保留在色塊或裝飾上，另外指定適合文字和按鈕的深色；不必為了用同一個顏色，讓整個網站都難以閱讀。
挑選色票只是第一步。真正會反覆用到的，是「什麼字放在什麼底色上」「按鈕和一般內容如何區分」「遇到錯誤時，畫面要怎麼提醒」。把這些組合整理好，設計師、行銷與網站製作人員就能直接選用適合的配色。
如果品牌已經有固定色彩，可以從現有網站、簡報和社群圖片挑幾份常用素材開始檢查。先修正看不清楚或容易誤會的地方，再決定是否需要新增顏色，比一開始全面換色更容易掌握修改範圍。
主色負責讓人辨識品牌，輔色協助區分內容，中性色則承擔大部分背景與文字。狀態色另外表達成功、錯誤或提醒，應以使用者看得懂為優先，不必每一種都由主色延伸。
| 色彩用途 | 常見使用位置 | 需要先確認的事 |
|---|---|---|
| 主色 | 品牌重點、識別圖形、主要視覺 | 是否容易辨識；哪些位置不適合放小字 |
| 輔色 | 內容分類、圖表、活動版面 | 每個顏色是否有用途，會不會和狀態混淆 |
| 背景色 | 頁面、卡片、區塊底色 | 搭配文字後是否清楚，區塊是否仍能區分 |
| 文字色 | 標題、正文、補充說明、連結 | 每種底色上都有可用組合，補充資訊也看得清楚 |
| 狀態色 | 錯誤、成功、警告、選取狀態 | 同時有文字或形狀提示，不只靠顏色傳達意思 |
這些是用途分類，不表示一定要選五個不同色相。同一個深色可以兼任正文和標題；同一個主色也可能用於圖形與按鈕。要確認的是每一種實際組合能不能使用，而不是色票數量是否達到某個標準。
新增輔色前，先說出它要解決什麼問題。例如比較表需要區分三類服務，可以搭配文字標籤安排不同底色；如果只是覺得畫面有點空，先調整留白、照片與資訊層級，不一定需要再加入一個顏色。
也不必強迫每張版面都符合固定的主色、輔色比例。文章頁需要讓人長時間閱讀，可能以中性色為主；活動封面可以有較大的品牌色塊。應該固定的是顏色的用途與可用組合，面積則隨內容調整。
色彩只是品牌規範的一部分。若標誌、字體和圖片還沒有共同方向，可以搭配品牌識別與規範的整理方法，確認整套素材需要包含哪些項目。
比較配色時，固定文字、照片和版型，只改顏色，才容易看出差異來自哪裡。不要拿一張有完整攝影和排版的提案，與另一張只有色票的提案直接比較。
可以先準備三份常用內容：一頁服務介紹、一張社群圖片，以及一個包含標題、正文與按鈕的手機畫面。每個配色方案都放入相同內容，檢查品牌是否容易辨識、重點是否清楚，以及有沒有需要特別費力才能讀到的文字。
與其只說「想要穩重一點」，可以指出「服務介紹的背景太鮮豔，讀者先注意到色塊，卻不容易看到服務名稱」。這時要調整的可能是背景面積或明暗，不一定是整個主色方向。
也不要把顏色和品牌個性一一對應，認定某個色相一定代表專業、信任或高級。同一個顏色搭配不同照片、字體和用字，呈現的感受會不同。選擇理由應回到這個品牌實際要使用的內容，而不是一句通用的色彩印象。
評估時可以先各自記下觀察，再一起比較。如果多人意見不同，回到相同版面指出哪一處有問題。需要整理討論方式時，可參考品牌設計提案的評估與回饋方法，把偏好和會影響使用的問題分開處理。
文字是否清楚，取決於文字色和背景色的組合。同一個品牌色放在白底上可能太淡，改放深色底卻可能清楚；因此規範應列出「文字色＋背景色」，而不只是單獨的色碼。
依 WCAG 2.2 的文字對比要求，一般文字至少需達 4.5:1；符合大字定義的文字可用 3:1。設計網站正文、表單提示與一般按鈕文字時，可以先以 4.5:1 檢查，避免把「看起來很大」誤當成適用較低門檻。標誌的例外也不能延伸到整頁文字。
先取出文字與背景的實際色碼，再用對比檢查工具計算兩者的比例。若文字有透明度、背景有漸層或照片，不能只測原始色票；要檢查文字真正出現的位置，尤其是最容易看不清楚的區域。必要時加入單色、不透明的底板，或將文字移到圖片外。
數值達標後，仍要看實際畫面。很細的字、過小字級、密集行距，都可能讓閱讀吃力。把正文縮成小字來騰出空間，再用對比數字證明「可以讀」，並沒有解決版面的問題。
對比要求是判斷的一部分。配色表通過檢查，不代表整個網站已完成無障礙驗收；選單、表單與鍵盤操作仍有各自需要確認的內容。
亮色不適合當白底小字時，可以改變文字色、調整使用位置、增加同色系深色，或替圖片上的文字加上單色底板。先選擇最少改動、又能解決閱讀問題的方法。
例如品牌以明亮的金黃色為主，不必在金黃底上繼續放白字。先試深灰或深棕文字，再檢查對比。如果這個組合清楚，就能保留原本的大面積主色，同時讓標題和按鈕文字容易閱讀。
主色可以出現在邊角圖形、分隔裝飾或照片外框，正文則使用固定深色。需要傳達意思的圖示與控制項另行檢查，不能把所有圖形都當作裝飾，略過辨識問題。
為連結、標題或按鈕指定一個較深的同色系版本，並寫明用途。不要讓每位設計人員臨時把主色「調暗一點」；不同人各自挑色，久了仍會出現多種不一致的版本。
照片上若沒有足夠清楚的文字區，可以把標題移到照片旁，或加上不透明的底板。先用手機尺寸看一次，再決定文字位置；桌面上寬敞的空白區，裁成直式畫面後可能已經不在。
以下用一組金黃色做示例，數值依不透明的 sRGB 色碼計算。比例顯示到小數點後兩位，是否符合一般文字要求則以未四捨五入的數值判斷。
| 文字色 | 背景色 | 對比約值 | 一般文字的判斷 |
|---|---|---|---|
| 金黃 #D9B34C | 白色 #FFFFFF | 2.00:1 | 未達 4.5:1，不用於這種底色上的正文 |
| 深灰 #242424 | 金黃 #D9B34C | 7.76:1 | 達 4.5:1，可再檢查字級與實際版面 |
| 深棕 #745A19 | 白色 #FFFFFF | 6.52:1 | 達 4.5:1，可作為白底文字的候選組合 |
| 白色 #FFFFFF | 深棕 #745A19 | 6.52:1 | 達 4.5:1，可作為深底文字的候選組合 |
這個比較說明，同一組品牌配色可以安排不同用途。金黃色本身不必被刪掉，只要避免拿它當白底正文；需要白字時，也可以換成已確認的深色底。示例的色碼可用來練習，正式規範仍應測試品牌實際使用的顏色。
需要讓人理解的資訊，應在顏色之外加上文字、形狀或其他清楚提示。錯誤欄位除了變紅，也要說明哪裡有問題；圖表除了不同色塊，也應有可對照的名稱。
若選取的方案只把外框從灰色改成綠色，有些人仍不容易察覺目前選了哪一項。可以同時加入勾選圖示與「已選取」文字。連結可以保留底線；錯誤訊息則直接寫出修正方法，不讓使用者只憑紅色猜原因。
另外，辨識控制項、狀態或理解圖形所必需的視覺資訊，依 WCAG 2.2 非文字對比要求，通常須與相鄰顏色達 3:1，並按條文的適用範圍與例外判斷。這不是要求所有裝飾線都達到 3:1，也不能用這個門檻代替按鈕內文字的檢查。
至少整理平常顯示、滑鼠移入、鍵盤焦點、已選取與錯誤等實際會出現的狀態。各狀態不一定需要換一個色相，但使用者應看得出目前能做什麼、焦點在哪裡，以及有沒有需要修正的地方。
品牌主色若接近常用錯誤色，也要避免讓一般操作按鈕看起來像錯誤提示。可以用不同底色、圖示與明確文字區分用途，再請沒有參與設計的人指出哪些地方可以點、哪些內容代表異常。
配色和文字需要一起設計。若問題出現在詢問表單，可延伸閱讀聯絡表單的欄位、錯誤提示與送出回覆設計，確認訪客看完提示後，知道如何修正資料、確認是否送出。
一份可用的配色表，應交代顏色名稱、用途、數位色碼、搭配底色與限制，再附上已完成的範例。接手的人應該能找到適合的組合，而不必自行測遍所有色票。
名稱可以先用「正文色」「主要按鈕底色」「淺色背景」等容易理解的用途，再補色碼。若同一個色碼目前兼任兩個用途，仍可以分別記錄；日後調整其中一種用途時，才不會誤以為所有地方都應一起換色。
準備一張白底長文、一張深色底卡片，以及一張含按鈕和錯誤提示的表單畫面。三張都放入真實長度的中文，保留常用連結與補充說明。這些範本能直接顯示哪些文字和背景可以搭配，比只有一排色票更方便套用。
照片或漸層背景需要另外標明限制，例如只使用指定的文字底板、不得把小字直接壓在照片上。限制應描述具體做法，避免只寫「注意可讀性」，卻讓製作者自行猜測什麼程度才算合格。
網站與印刷品也要分開確認。網站用的色碼不能保證在每種紙材上呈現相同效果；重要印刷品應依實際材質與製作條件確認樣張。不要把螢幕上的對比測試結果，當成所有印刷成品都已驗收。
配色驗收要同時檢查數值與使用情況。先核對常用組合，再用手機閱讀完整段落，最後實際操作連結、按鈕與表單，確認顏色沒有讓重要資訊消失或產生誤解。
發現問題時，記錄是哪個版面、哪組文字和底色，以及在哪種狀態看不清楚。例如「手機表單的補充說明是淺灰字，白底閱讀吃力」，比「整體再加強一點」更容易處理。修正後回到同一位置重新確認，不只看新版色票。
之後新增活動或頁面，也先從已確認的組合選擇。真的需要新顏色時，把用途與測試結果一起補進配色表，並指定負責確認的人，讓配色表與網站使用的顏色保持一致。
不一定。按鈕需要讓人辨識動作、讀清楚文字，還要和其他狀態區分。主色若適合，可以使用；若太亮或容易被誤認為警告，可以另訂深色版本，並透過其他圖形和版面保留品牌辨識。
通常可以先調整用途與配對，例如亮底改深字、增加深色文字版本，或把主色移到裝飾區。先確認問題只出現在少數文字，還是多數必要應用都無法使用，再決定是否需要重新討論整套配色。
需要。單一裝置和一個人的感受，無法代表不同視力與閱讀條件。先用數值找出明顯不足的配對，再檢查實際字級、字重、背景和操作狀態，兩種方法一起使用，才能比較完整地找到問題。
現在可以先找出網站的正文、主要按鈕與錯誤提示，分別記下文字色、背景色和用途。檢查完這三組，再把確認可用的版本放回範本。等最常使用的地方都清楚了，再擴充活動與特殊版面，團隊會更容易持續照同一套規則製作。
發布：嵐澤 LANZE / 發布日期
LANZE GUIDE