我需要多少對比度才能通過 WCAG AA？
一般文字需要 4.5:1 的對比度；大型文字（18pt 以上，或 14pt 粗體）需要 3:1。WCAG 色彩對比檢查器會同時顯示這兩個門檻，以及你目前的通過或未通過狀態。
集合
設計與色彩工具
檢查色彩對比度是否符合 WCAG、模擬色盲，並計算長寬比——免費的設計小工具，完全在你的瀏覽器中執行。
此分類共有 3 個工具
← 首頁為什麼會有這個集合
具備無障礙又比例得宜的視覺，從正確的數字開始。這個集合把設計師、開發者與內容創作者用來檢查色彩無障礙、模擬視覺狀況並確定正確比例的 TeaFun 工具整理在一起。
常見用途
- 在交付一個設計之前，先確認內文與其背景達到 WCAG AA 的對比度。
- 透過綠色盲與紅色盲預覽一組配色，確保狀態色彩不是唯一傳達意義的東西。
- 在裁切或匯出之前，把影像或影片畫面鎖定為乾淨的 16:9 或 4:3 比例。
這個集合包含哪些工具
三個用來把設計背後數字弄對的工具：一個 WCAG 對比檢查器、一個色盲模擬器，以及一個長寬比計算機。對比檢查器接受一個前景色與一個背景色，並對照 WCAG AA 與 AAA 門檻回報對比度，讓你不必猜測就知道文字是否易讀。色盲模擬器近似呈現一組配色在常見色覺缺陷者眼中的樣子。長寬比計算機則在你縮放或裁切時維持正確比例。它們是小而專注的工具——屬於你在設計接近尾聲時做的檢查，而不是你用來創作的畫布。
如何使用這個集合
只要文字落在有顏色或圖片的背景上，就用對比檢查器：輸入兩個顏色，確認對比度對一般文字至少達到 4.5:1，對大型或粗體文字至少達到 3:1。任何由顏色傳達意義的東西——一張圖表、一組狀態徽章、一個表單錯誤狀態——都用色盲模擬器跑一遍，並確保拿掉顏色後資訊仍然成立，畢竟有相當一部分使用者有某種色覺缺陷。當你需要在不變形的情況下縮放時，就用長寬比計算機：輸入一個尺寸與目標比例，它會算出另一個尺寸。
為什麼這些檢查很重要
無障礙與比例都很容易光憑肉眼就判斷錯。在你校正過的螢幕上看起來沒問題的配色，在陽光下的手機上可能就過不了對比；對你而言清楚易讀的配色，若顏色是唯一的線索，對色盲使用者來說可能就完全失效。WCAG 對比門檻之所以存在，正是因為人對對比的判斷並不可靠。比例同樣重要：裁切失準的圖片或被拉伸的影片，正是那種人們會注意到、卻說不出名堂的小瑕疵。這些工具都不會替你做設計——它們抓出那些好眼力仍可能漏掉、卻可以被量化的錯誤，讓你的作品在離開你自己的螢幕之後依然站得住腳。
精選工具
常見問題
色盲模擬器是如何運作的？
它對輸入的色彩套用標準的色盲轉換矩陣，藉此近似不同類型色覺缺陷下這些色彩看起來的樣子——全部在你的瀏覽器中本機計算。
我可以只用顏色來傳達資訊嗎？
不行。由於有些使用者無法分辨某些顏色，請為每一個顏色提示再搭配第二種訊號——一個標籤、一個圖示、一種紋理，或一段文字。模擬器能幫你檢查：當顏色被拿掉時，你的意義是否仍然保留。
長寬比對影像與影片為什麼重要？
裁切或縮放到錯誤的比例，不是讓內容變形，就是被迫加上黑邊。鎖定為 16:9 或 1:1 之類的標準比例，能讓一切維持比例正確，並在各種顯示場合中保持可預期。