文字與背景顏色之間 4.5:1 的對比度是符合 WCAG AA 標準的最低要求，能確保低視力或色盲使用者的可讀性。在 Figma 中，手動檢查這個比例可能很費時，特別是在反覆調整設計時更是如此。Color Contrast Checker 透過讓你輸入任何前景與背景顏色（使用選色器或十六進位代碼）來解決這個問題，並即時顯示該配色是否符合 WCAG AA 或 AAA 標準。這個工具消除了猜測，讓設計師能即時調整顏色，並在最終定稿前確認無障礙性。
無障礙性不僅是最佳實務；對許多網站和應用程式來說，它也是法律要求。根據 W3C 網頁內容無障礙指南（WCAG）2.1，色彩對比不足是視障使用者最常見的障礙之一。例如，淺灰色文字放在白色背景上可能看起來很簡潔，但連基本的 AA 標準都無法達到。透過在 Figma 工作流程中加入對比檢查，你可以從一開始就確保設計的包容性，減少日後昂貴的修改成本。
為何色彩對比在 Figma 設計中很重要
Figma 廣泛用於 UI 與網頁設計，是打造無障礙數位產品的關鍵工具。然而，即使是經驗豐富的設計師也可能忽略色彩對比，特別是在使用品牌色或複雜版面配置時。低對比的設計雖然可能看起來賞心悅目，卻可能將患有白內障、青光眼或色覺缺陷的使用者排除在外。例如，按鈕若採用 3:1 的對比度，雖然某些使用者看得見，但對其他人來說可能完全隱形，導致使用者體驗不佳並可能產生法律風險。
WCAG 定義了兩個合規等級：AA 與 AAA。AA 是大多數組織追求的標準，一般文字需要 4.5:1 的對比度，大型文字（18.66px 粗體或 24px 標準）則需 3:1。更嚴格的 AAA 標準要求一般文字達到 7:1，大型文字達到 4.5:1。雖然 AAA 合規是理想目標，但在某些配色方案下可能難以達成。Color Contrast Checker 透過提供即時回饋，幫助你在美學與無障礙之間取得平衡，讓你能在不犧牲設計完整性的情況下做出明智決策。
如何使用此工具在 Figma 中檢查色彩對比
在 Figma 中測試色彩對比不需要外掛或複雜的設定。Color Contrast Checker 直接在瀏覽器中運作，能無縫整合進你的工作流程。使用方式如下：
- 在 Figma 中工作時，於瀏覽器開啟 Color Contrast Checker。
- 確認 Figma 設計中的文字與背景顏色。複製其十六進位代碼（例如，深灰色文字 #333333 搭配白色背景 #FFFFFF）。
- 在工具中，將前景（文字）顏色貼到第一個輸入欄位，或使用選色器選取。
- 對第二個輸入欄位重複相同步驟以設定背景顏色。
- 工具會立即顯示對比度（例如 7.4:1），並以明確的通過／未通過徽章標示是否符合 WCAG AA 與 AAA 標準。
- 若對比未通過，請在工具中調整前景或背景顏色，直到比例達到你的目標等級（AA 或 AAA）。
- 滿意後，在 Figma 設計中更新顏色以符合無障礙的組合。
這個過程只需幾秒鐘，就能確保你的設計在進入開發階段前符合無障礙標準。對團隊而言，這是在審查或交付期間快速驗證設計的好方法。
Figma 內建對比檢查器與外部工具的比較
Figma 雖然內建對比檢查器，但與 Color Contrast Checker 等專用工具相比有其限制。下表列出主要差異：
| 功能 | Figma 內建檢查器 | Color Contrast Checker 工具 |
|---|---|---|
| 即時回饋 | 有，但僅限於 Figma 介面內 | 有，可獨立於 Figma 運作 |
| WCAG AA／AAA 通過／未通過 | 有 | 有，並附清楚的視覺指示 |
| 顏色輸入方式 | 僅十六進位代碼 | 十六進位代碼、選色器或手動輸入 |
| Figma 外部的無障礙性 | 無 | 有，可用於任何設計工具或網頁專案 |
| 其他功能 | 無 | 即時預覽、對比度歷史紀錄 |
雖然 Figma 內建工具方便快速檢查，但 Color Contrast Checker 提供更高的靈活性。例如，你可以在套用至 Figma 前先測試顏色，或將此工具用於非 Figma 專案，如印刷設計或簡報。對需要在程式碼中驗證對比（無需開啟 Figma）的開發人員來說，這個工具也同樣實用。
對比檢查不可或缺常見情境
色彩對比不僅關乎內文文字。許多設計元素都需要仔細注意以符合無障礙標準。以下是一些在 Figma 中檢查對比至關重要的情境：
- 按與 CTA：低對比的按鈕（例如白底淺藍）可能會融入背景，讓使用者難以辨識互動元素。Color Contrast Checker 協助你在品牌色與可讀性之間取得平衡。
- 表單欄位與輸入框：對比不足的佔位文字或標籤會讓使用者感到困惑，尤其是認知障礙者。測試這些元素可確保所有使用者都能順利完成表單。
- 圖示與符號：圖示常透過顏色傳達意義，但低對比可能讓某些使用者完全看不見。例如，在深色背景上的紅色錯誤圖示，對紅綠色盲使用者來說可能難以區分。
- 資料視覺化：圖表依賴顏色區分資料點。確保線條、長條或圓餅圖切片之間有足夠對比，可讓資訊對所有人都易於理解。
- 深色模式設計：深色模式雖能提升部分使用者的可讀性，卻可能為其他人帶來對比問題。在淺色與深色模式下測試文字與 UI 元素，確保跨主題的一致性。
及早處理這些情境，能避免日後需要重新設計的無障陷阱。Color Contrast Checker 可快速測試多種顏色組合，讓你專注於創意而不犧牲包容性。
選擇無障礙色彩組合的技巧
選擇無障礙的色彩組合並不意味著犧牲美學。以下是一些兼顧對比的實用設計建議：
- 從高對比開始：一般文字先以 7:1（符合 AAA）為基準，再依需要調整。這讓你在維持最低 4.5:1 對比的同時保有調整彈性。
- 善用工具激發靈感：Color Palette Generator 可協助你建立和諧且符合對比要求的色票。輸入基礎色後產生互補或類比色，再用 Color Contrast Checker 進行測試。
- 避免純黑與純白：雖然 #000000 配 #FFFFFF 對比完美，但過於刺眼。可考慮較柔和的替代方案，例如 #111111 配 #F8F8F8，仍能符合 WCAG 標準。
- 以灰階測試：若設計在灰階模式下仍清晰可見，通常對色覺缺陷使用者也具有無障礙性。Figma 允許你以灰階模式預覽設計，方便快速發現對比問題。
- 考量字重與字級：較大或較粗的文字可用較低對比度達到無障礙標準。例如，18.66px 粗體文字只需 3:1 對比即可通過 WCAG AA，而 12px 一般文字則需 4.5:1。
想了解更多進階技巧，請參考這份實用的色彩對比無障礙檢查指南，其中涵蓋更多工具與工作流程。
將對比檢查整合進 Figma 工作流程
將色彩對比檢查養成 Figma 中的習慣，能從一開始就將無障礙性內建於設計中。以下是如何順暢整合此流程：
- 建立對比檢查範本：在 Figma 中建立一個畫框，內含常見的文字樣式（標題、內文、按鈕）及其對應的背景顏色。使用 Color Contrast Checker 驗證每組配色，並標示為符合 AA 或 AAA。
- 使用 Figma 顏色樣式：將無障礙色彩組合儲存為 Figma 樣式，方便團隊重複使用並維持跨專案的一致性。
- 透過外掛自動化檢查：雖然 Color Contrast Checker 是基於瀏覽器的工具，但像 "A11y" 或 "Contrast" 等 Figma 外掛能直接在應用程式中提供類似功能，方便在設計審查時快速檢查。
- 記錄無障決策：在 Figma 檔案中新增註解，說明選擇特定色彩組合的原因。這能幫助開發人員與其他設計師理解你的決策依據。
- 儘早且經常測試：不要等到最終設計審查才檢查對比。在建立顏色時就進行測試，避免最後一刻的修改。
對團隊而言，建議建立一個共享的 Figma 資料庫，收錄預先核准的無障礙色票。這能確保所有人都使用合規的組合，減少個別檢查的需求。若你需要處理圖片，可以參考在 Illustrator 中從圖片產生色票的指南，協助你擷取並測試視覺中的顏色。
若你在權衡不同選項，輕鬆檢查 PDF 中的色彩對比以符合無障礙標準對此有詳細說明。
若你在權衡不同選項，如何在 Figma 中正確檢查色彩對比對此有詳細說明。