色彩對比檢查會測量前景色與背景色之間的數值比率，結果會告訴你這組配色對大多數閱讀者來說是否足夠清晰；根據 WCAG 2.2，一般文字需要至少 4.5:1 的比率才能達到 AA，等級 AAA 則需要 7:1。在 Figma 中，這個比率並不會顯示在畫布上的任何地方，因此重視無障礙的設計師必須從 Figma 中取出兩個十六進位色碼，再用其他工具進行測試。最快的方式是使用 色彩對比檢查工具，它會讀取兩個十六進位色碼，並即時回傳比率以及 AA 與 AAA 的通過或未通過標記。
Figma 的設計核心是視覺疊代，而非無障礙稽核。你可以自由挑選任意兩種顏色，將文字圖層放在形狀上，畫面渲染出來看起來都沒問題。但弱視使用者、年長使用者，或是在強烈陽光下閱讀的人是否真的看得清楚，則是另一個問題；這個問題的答案來自對比比率，而非設計師的肉眼。將對比視為可量化的數字，而不是感覺，是讓 Figma 檔案具備無障性最重要的轉變。
對比比率真正的意義
對比比率是介於 1:1 到 21:1 之間的單一數字。它由兩種顏色的相對亮度計算而來，相對亮度是紅、綠、藍色通道經過加權後的版本，反映了人類視覺實際感知亮度的方式。兩個完全相同的顏色會產生 1:1，因為這是最低的可辨識程度；純黑對純白則會產生 21:1，這是公式能回傳的最大值。Figma 中所有的配色都落在這兩個極端之間。
WCAG 2.2 將這些比率分為通過或未通過等級。對於一般大小的內文，AA 等級至少需要 4.5:1，AAA 等級則至少需要 7:1。對於大型文字（WCAG 定義為 18 級（point，約 24px）或 14 級（point）粗體（約 18.66px 粗體）），AA 的門檻降至 3:1，AAA 則為 4.5:1。非文字的 UI 元素（例如圖示和表單邊框）也適用 3:1 的門檻。如果你的設計是面向一般使用者的產品，AA 是常見的基本要求；AAA 則是高標的目標，通常保留給閱讀量大的介面內文。
| 內容類型 | WCAG AA | WCAG AAA |
|---|---|---|
| 一般文字 | 4.5:1 | 7:1 |
| 大型文字（18pt 或 14pt 粗體） | 3:1 | 4.5:1 |
| UI 元件與圖形物件 | 3:1 | 未定義 |
這些數字直接來自 w3.org 上的 WCAG 2.2 規範，這也是為什麼每個無障礙檢查工具都會以此作為比較標準。
為什麼用肉眼檢視 Figma 圖層還不夠
設計師通常會假設深色配淺色就一定清晰可讀。有時候確實如此，有時候卻不然。舉例來說，石板灰配白色在昏暗房間的 27 吋螢幕上看起來對比強烈，但比率大約只有 4.5:1，勉強通過 AA，卻完全達不到 AAA。淺藍配白色則更糟，經常低於 3:1。如果你只在自己辦公室、只有校正過的螢幕上設計，那你等於只為一組眼睛和一種照明條件做測試。
真正的對比檢查能消除這種猜測。你不再依賴「看起來還可以」的感覺，而是信任一個反映相對亮度的數字，這大致上就是眼睛分辨明暗的方式。這個數字對每個人都一樣，不分螢幕品牌，所以在咖啡廳的 MacBook 上與在日光燈下的便宜筆電上，同一組配色會以同樣的方式未通過檢查。
另一個常見的陷阱是在 Figma 預設的淺色主題中設計，卻忘了許多使用者在使用深色模式。在白色畫布上看起來清晰的配色，到了黑色畫布上可能會變得難以閱讀。如果你的產品同時支援兩種模式，每一組重要的配色都必須檢查兩次，每個主題各一次，因為背景色會完全改變計算結果。
從 Figma 中取出正確的兩個顏色
對比檢查只有在輸入正確的兩個數值時才有效。對於任何文字圖層，前景是文字填色，背景則是緊鄰下方的形狀或框架的填色。如果文字圖層位於帶有自己填色的群組中，請沿著圖層樹往上找，直到找到文字實際渲染的表面；那才是使用者看到的字母背後的顏色。
若要從 Figma 複製前景的十六進位色碼，請選取文字圖層，在右側面板中開啟填色色塊，然後點擊十六進位色碼欄位。在 macOS 上按 Cmd + C，在 Windows 上按 Ctrl + C，即可複製這個六位數值。在文字正下方的圖層上重複同樣的步驟，即可取得背景的十六進位色碼。如果你的設計使用了透明度或混合模式，實際可見的顏色可能與原始填色值不同，因此若有疑慮，請將螢幕取畫面壓平後再直接取樣像素。
同時也建議測試互動狀態，而不僅僅是預設狀態。hover、focus、disabled 和 error 狀態經常會使用更淺或更具裝飾性的顏色，因而更難閱讀。同一套十六進位色碼比對流程同樣適用於每一種狀態。
將這組配色送進色彩對比檢查工具
- 在瀏覽器中開啟 色彩對比檢查工具。
- 使用選色器或直接輸入十六進位色碼來設定前景顏色，例如 #111111；貼上你從文字圖層複製的值。
- 用同樣的方式設定背景色，例如 #ffffff；貼上你從文字下方圖層複製的值。
- 讀取對比比率以及旁邊顯示的 AA 和 AAA 通過或未通過標記；只要任一十六進位色碼變動，結果就會立即更新。
- 在檢查工具中調整其中一個或兩個顏色，直到比率符合專案所需的等級，然後將通過的十六進位色碼複製回 Figma，套用到對應的圖層。
因為這個工具是即時更新的，你可以拖曳前景或背景的數值範圍，即時觀察比率跨越 AA 與 AAA 門的過程。這樣的回饋迴圈比手動重新輸入數字快得多，也能讓你清楚看出該調整配色的哪一端。一般來說，加深前景或調亮背景會提高比率，反之則會降低。
一個實用的技巧是一次將品牌色與三個參考背景進行比對：純白、純黑，以及實際產品的背景。任一組合之間差距最大的地方，通常就是無障礙問題最容易出現的地方，因為品牌色調色盤是為情感而設計，而非為亮度。如果品牌色只在三種背景中的其中一種上通過，請規劃在該處使用它，並為其他情況挑選一個搭配色。
建立可在每個衝刺週期中重複的工作流程
一次性的檢查只能解決一次性的問題，但無障礙的成敗取決於習慣。最簡單的習慣是在每次設計審查結束時，對檔案中每一組文字與背景的配色進行對比檢查。略過這個步驟的設計師，往往會在開發階段才發現問題，而那時修改顏色所花費的時間是分鐘與小時的差別。
你也可以預先測試任何新加入的顏色。設計師將品牌色放進 Figma 的那一刻，就把它貼到檢查工具中，分別與白色、黑色以及產品使用的任何背景色進行比對。如果它在白色上未通過，那在大多數淺灰色上也會未通過；這時你可以選擇更深色階的品牌色，或將其限制在大型文字與裝飾元素上。灰色文字也是常見的問題來源，因為設計師傾向挑選符合視覺層級的灰色，而非符合可讀性需求的灰色。
將對比檢查與簡短的交接清單搭配使用。這份清單應該列出檔案中所有的文字樣式、預期放置的表面，以及它所通過的比率。當開發人員開啟檔案時，可以將每個樣式對應到已核准的配色，而無需自行猜測。一份一頁的清單，能將無障礙工作從額外負擔轉化為可融入既有審查會議的例行程序。
若想更深入了解規則本身，WCAG 合規指南 詳細說明了各項準則，而 Figma 專屬的對比工作流程 則涵蓋了重疊形狀、透明度以及圖片背景等相關的邊界情況。
即使使用檢查工具仍會踩坑的常見陷阱
大多數未通過的檢查都來自一組反覆出現的小錯誤。第一個是忘記半透明圖層會改變實際可見的顏色；如果你將 60% 透明度的黑色文字放在彩色背景上，對於對比計算而言，真正的背景是混合後的結果，而不是底下的原始填色。第二個是只測試預設狀態，卻交付了一個未通過 AA 的 focus 環或 disabled 標籤。第三個是使用了從未設計來閱讀的灰色佔位文字。
圖片背景需要特別注意。照片或插畫很少是單一顏色，而檢查工具無法評估漸層。實務上的做法是，在任何置於圖片之上的文字後方覆蓋一層實色色塊，然後將這個色塊與文字視為一般組合進行測試。如果你想保留圖片的可見度，請挑選與照片中最深與最淺部分都有足夠對比的文字顏色，並接受在最差的區域可能需要使用更深的色塊。
另一個陷阱是將同一個十六進位色碼同時用於文字和裝飾性外框。環繞按鈕的兩像素外框看似設計語言的一部分，但如果它帶有「選取」或「錯誤」這類含義，WCAG 會將其視為非文字 UI 元素，並要求與周圍表面達到 3:1 的對比。同樣的色碼在 14pt 文字時可能感覺不到存在，但作為 2px 外框時卻可能在相同比率下未通過，因為外框和文字的判定規則不同。
如果你想在確定之前並排比較兩個候選文字顏色，色彩差異計算工具 會在任意兩個十六進位色碼之間提供 CIEDE2000 讀數，當兩個顏色看起來相同卻在不同比率下未通過時，這是一個實用的健全性檢查。當你想在專案中途轉換格式時，RGB 轉 HEX 轉換器 能讓來回轉換完全無損，因此以 RGB 測試過的顏色，回到 Figma 時仍是完全相同的十六進位色碼。
比較在 Figma 中檢查對比的兩種主要方式
設計師大致分為兩派：一派會安裝 Figma 外掛，另一派則會複製十六進位色碼，再用瀏覽器工具測試。兩種做法都有效，也各自適用於不同情境。下表根據實際產品工作流程中最在意的幾項標準，比較這兩種方式。
| 標準 | Figma 對比外掛 | 獨立的色彩對比檢查工具 |
|---|---|---|
| 執行位置 | 在 Figma 畫布中 | 在任何瀏覽器分頁中,無需安裝 |
| 輸入方式 | 直接讀取選取的圖層 | 手動貼上十六進位色碼或 RGB |
| 單組配對的速度 | 非常快速,點選即可讀取 | 快速,貼上兩次並讀取 |
| 多組配對的速度 | 較慢,必須逐個選取圖層 | 較快,可用複製十六進位色碼的方式批次處理 |
| 資料過時的風險 | 反映目前的圖層狀態 | 取決於你編輯後是否重新貼上 |
| 外掛權限 | 需要檔案的存取權限 | 不需要檔案存取權限 |
| 最適合用於 | 設計過程中的快速抽樣檢查 | 系統性的審查與交付 |
在實務上,最強的工作流程是兩者並用。當你仍在調整像素時,外掛負責抽樣檢查;獨立檢查工具則在審查與交付前負責完整檢測。選擇其中一種並不會把你排除在另一種之外,許多團隊會採用獨立工具作為唯一真相來源,因為它不依賴外掛更新或 Figma 的權限設定。
讓對比成為每個畫面上的具體數字,而不是一種感覺
這個工作流程最短的版本也最可靠:從 Figma 複製文字顏色,從 Figma 複製背景顏色,把兩者都貼上對比檢查工具,讀取比例,然後調整到符合該內容類型的 AA 或 AAA 門檻為止。在檔案中對每一組文字與表面的配對都跑過這個迴圈,包括各種狀態與佔位元素,這樣的設計對幾乎所有開啟它的人來說都能清楚閱讀。數字勝過意見,而對比是少數能由單一比例精確捕捉的設計品質之一。
一旦這個迴圈成為每次審查的一部分,所付出的時間成本會迅速下降。熟練的設計師可以在不到五分鐘內,清完一個含有六到十組文字與表面配對的典型畫面;同一個迴圈也能抓出那些通常會在審查中溜過去的細微退化,例如新出現的佔位元素顏色,或變深的焦點環。經過一個季度,這些分鐘累積起來,會變成一個更多人能真正閱讀的產品,這最終才是無障礙設計唯一重要的衡量標準。
如果你正在權衡各種選項,如何找出兩個十六進位色碼之間的色彩差異對此有詳細介紹。