各國數位政府的色彩規範：加拿大紅、阿聯酋金，台灣的品牌色是什麼？

上篇：各國數位政府字體排版：為什麼英國用像素、加拿大用百分比？

上個章節在討論設計系統的「字體排版」，本篇開始研究「色彩」。

---

為什麼色彩很重要？

1. 信任感
   • 當民眾進入政府服務的網站，色彩是第一個瞬間的感官回饋。
   • 一致且穩定的色彩規範，能建立一種「這是官方正式管道」的直覺信任，減少詐騙疑慮或資訊混淆。
2. 資訊層級與認知的簡化
   • 在複雜政策文件或申辦流程中，色彩能引導大腦快速分類資訊。
   • 可點擊的動作（主色/強調色）、靜態資訊（中性色）、緊急狀態（警示色）可以用色彩分類。
3. 無障礙
   • 設定對比度高的顏色，確保色盲或視力受損的民眾可以清晰閱讀。
4. 展現國家性格
   • 英國的黑白藍展現了效率與穩定、阿聯酋的金色象徵未來願景、新加坡的紫色象徵了中立。

本篇我們將深入研究英國、加拿大、阿聯酋、星加坡、義大利，了解他們如何建立設計系統中的「色彩」。

思考時間：如果台灣要建立自己的政府色票，我們該學到什麼？

---

各國數位政府色彩組合

英國

英國將色彩組合拆解為兩個層級：

• 主色
  • 僅用於文字、邊框、連結與關鍵狀態。這部分的色彩直接受到無障礙標準的嚴格控管。
• 輔助色彩組合
  • 提供約 20 種顏色，但限制僅能用於插畫（Illustrations）或自定義元件。這確保了網頁的主體視覺永遠保持冷靜、專業。

英國的色彩規範特色

• 系統強烈要求使用 Sass 變數（如 $govuk-brand-colour）而非十六進制碼（#1d70b8）。
• 用功能來區分狀態色彩，例如 Focus、Error、Success
  • 將色彩命名為「功能」而非「顏色名稱」（如 Red），政府能確保數位服務的一致性不會隨系統迭代而崩解。
• 針對「數據圖表」，有另一套專用的色彩組合，確保統計圖表在色弱使用者眼中依然有高辨識度。

---

加拿大

加拿大同樣將色彩組合用功能區分，包含：

• 文字、連結、背景、邊框、危險狀態、焦點狀態、禁用狀態

加拿大的色彩規範特色

• 目的導向的選色
  • 加拿大並沒有提供多樣化的「色彩組合」，而是直接定義特定場景的色彩，例如直接指定背景必須是白色（#fff）。
• 強制性（Mandatory）
  • 加拿大在設計系統中會定義哪些標準為「強制性」，字型與色彩皆有「強制性標籤」。
• 無繁瑣複雜的顏色
  • 文字統一為深灰（#333）、鮮明的紅色（#d3080c），這種極度限縮顏色的做法，可以降低維護成本，也能建立對「聯邦政府」的信任感。

---

新加坡

新加坡的色彩組合分類包含兩種：

• 品牌色：主色、輔助色、字體色
• 系統色：系統藍、系統琥珀、系統綠、系統紅

新加坡的色彩規範特色

• 將色彩封裝成 CSS 類別（Classes）
  • 透過 is- （定義元件整體色）或 has-（定義特定元素色）作為前綴。
  • is-primary 讓按鈕變紫色、has-text-white 讓文字變白色
• 品牌色與系統色的「功能分工」
  • 主色紫色（#6137b3）在色彩心理學中，並不像紅色、藍色、黃色有明確的「功能語意」，因此被定義為品牌識別和插畫。
  • 系統色各自有功能：藍色代表中性資訊；琥珀色代表警示或需注意（特別註明要搭配黑字以通過 WCAG）；綠色代表成功；紅色代表嚴重問題。
• 分階邏輯
  • 品牌色（七階）：品牌色通常包含淺到深的色階，可以用來做大型區塊的背景色，或者在必要時通過無障礙測試。
  • 系統色（三階）：推測因為警告、錯誤、成功等資訊不需要層次感，只需要「絕對的辨識度」。

---

UAE

阿聯酋的色彩組合分類為：

• 核心/主色：阿聯酋金、阿聯酋紅、阿聯酋綠、阿聯酋黑（各11個色階）
• 輔助色：科技藍、海藍、駝黃、沙漠橘、紫紅、石板（各11個色階）
• 中性色：白色階層、石板色階、阿聯酋黑色階（各4個色階）
• 漸層色：微調漸層、淺色漸層、深色漸層

UAE 的色彩規範特色

"The colour system is a carefully curated combination of palettes that represent strength and softness."

• 重視感官體驗
  • 阿聯酋（UAE）在規範中明確提到，色彩系統是為了展現「力量」與「溫柔」，這在數位政府設計系統中相對罕見，因為大多數政府只談功能，但阿聯酋將「感官體驗」也加入考量。
• 色階豐富
  • 主色和輔助色的每種顏色都有11個色階，讓系統具備極強延展性，可是同時適應 Light Mode & Dark Mode
• 納入漸層色
  • 與其他國家相比，阿聯酋將漸層色納入政府設計規範，符合阿聯酋想要展現出「未來感」與「科技強國」的願景。

延伸思考
阿聯酋為顏色建立多達 11 階的細膩色譜；英國/加拿大維持定義清楚的顏色；
新加坡分為品牌色 7 階、功能色 3 階。
台灣目前共有 13 個色階，有需要這麼多嗎？又應該有多少色階數量呢？

---

義大利

義大利的色彩組合分類為：

• 主色：義大利藍（Blu Italia），是源自於義大利國家隊（Azzurri）的顏色（10個色階）
• 強調色：一個顏色（10個色階）
• 系統色：綠色、黃色、紅色（各10個色階）
• 中性色：深灰色、藍灰色（各10個色階）

義大利的色彩規範特色

• 義大利藍
  • 義大利的主色叫 Blu Italia。這是一種深邃、穩定且極具識別性的藍色，源自於義大利國家隊（Azzurri）的顏色，將深厚的體育與文化情感融入數位政府中。

延伸思考
英國品牌的藍色、加拿大楓葉的紅色、新加坡中性的紫色、阿聯酋未來感的金色、義大利國家隊的藍色
可以代表台灣的顏色是什麼？

---

台灣

儘管 PDIS 設計系統有提供一套顏色系統，但沒有統一規定顏色，只有規定「選色的方法」，每個機關可以有自己的品牌意象和主題色。

台灣色彩規範的特色

• 機關可以自行定義三個主要類別的七個主色
  • 品牌色：包含「主要色」與「次要色」
  • 中和色：僅需一個，用於生成頁面背景與元件底色
  • 系統色：定義四種功能，包含「正向、負向、資訊、警告」
• 十三色階
  • 這七個機關定義的主色會再展開為 13 色階，總共 91 個色票（7主色 * 13色階 = 91 個色票）
• 套用 PDIS Token
  • PDIS 定義了 Token 名稱，例如 On-brand
  • 衛福部可以把 Brand 定義成自己的綠色、交通部可以定義成藍色、觀光署可以定義成橘色

台灣色彩規範的優缺點

• 優點
  • 彈性極大，各政府組織可以自行選擇自己的品牌色
• 缺點
  • 無單一數位政府品牌認同感
  • 系統色決定「信號」，各機關系統色不一致，可能導致語意不一致，進而產生混淆
  • 中性色決定「質感」，背景、文字、邊框等最常出現的顏色若不一致，可能削弱對政府的信任感

我的思考
品牌色或許可以百花齊放。
但擔負功能溝通的系統色，以及支撐介面骨架的中和色，是否應該定義一套全台通用的標準？
讓無論民眾進入哪個數位服務，都能看到同樣深淺的文字灰階、同樣飽和度的警告紅
確保跨平台的連貫性，是建立數位政府信任感的基礎。

---

各國色彩無障礙比較

雖然五個國家都遵循 WCAG (Web Content Accessibility Guidelines) 的標準，但他們在傳達方式和限制力道上有顯著差異。

• 英國
  • 已經預先計算好背景的對比度，並直接透過 Sass 變數系統限制色彩用途
  • 要求達到 WCAG 2.1 AA 級標準
  • 提供 Contrast Checker 連結，要求開發者在自定義文件時必須自行檢測
• 加拿大
  • 加拿大是比較中唯一將「強制性（Mandatory）」寫在標題中的
  • 要求達到 WCAG AAA 級標準（增強對比度）
  • 直接規定各個顏色的用途（Purpose），傾向限制使用者的選擇權，以確保 100% 合規
• 新加坡
  • 在色票手冊中，每個顏色都直接標注對比度（Contrast Ratio）數值
  • 針對容易出錯的顏色給與警告，例如琥珀色就特別標注：「此顏色僅在配上黑字時才符合 WCAG 要求」
• 阿聯酋（UAE）
  • 直接在色彩文件中紀錄「測試 WCAG 的過程」，強調所有顏色都符合美學與無障礙範圍
  • 挑選顏色時確保達到 WCAG 2.1 AA 級標準
  • 提供極深與極淺的色彩組合，確保設計師無論在哪種背景下都能找到符合規範的顏色
• 義大利
  • 直接設定哪些色彩組合是可行的，而哪些又是不可行的
  • 確保符合 WCAG 1.4.1 的標準

延伸思考
對於色彩對比度，我們應該像加拿大直接定義「符合無障礙性」的顏色；
還是提供多元的色階，並明定 WCAG 的標準，讓設計師自行決定適合的組合呢？

---

資料來源：

• UK｜Colour
• Canada｜Colour
• Singapore｜Colour
• UAE｜Colour system
• Italy｜Colori
• Taiwan｜顏色 Colours