appstoryoAppStoryolapnito.cz s.r.o.blog/check-text-contrast-picked-color-ui/zh-hant如何在將選取的顏色用於介面之前檢查文字對比度Lubor Šimůnek29082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0學習如何檢查 WCAG 對比度並在 HSL 中調整顏色，讓您的介面始終無障礙且易於閱讀。
設計articleAppStoryo為什麼對比度至關重要全球約有 3 億人患有某種形式的色覺障礙。具有良好對比度的設計不僅是美觀問題——在許多地區，這已成為法律要求。參考標準是 WCAG 2.1，定義了兩個主要級別：
AA 級：正常文字對比度為 4.5:1，大號文字（18px 以上或 14px 粗體）為 3:1。
AAA 級：正常文字為 7:1。
常見錯誤最常見的問題包括：白色背景上的淺灰色文字（對比度可低至 1.5:1）、視覺上看起來還好但無法通過 AA 標準的彩色按鈕白色文字，以及在淺色模式下通過但在深色模式下失敗的顏色。
實用工作流程取得背景顏色。開啟 Color Picker Camera: HEX RGB，將相機對準表面輕觸即可立即取得 HEX 值。該應用程式同時顯示 HSL 值。
以同樣方式取得文字顏色。
在對比度檢查器中驗證這對顏色——例如 WebAIM Contrast Checker、瀏覽器 DevTools 無障礙面板或 Figma 的 Contrast 外掛。
在 HSL 中調整亮度直到通過標準。保持 H（色相）和 S（飽和度）不變，降低 L 值使顏色變深而不改變視覺識別。
為什麼 HSL 最適合對比度調整RGB 和 HEX 無法直觀控制亮度。HSL 將色相、飽和度和亮度分開。Color Picker Camera: HEX RGB 同時顯示 HEX、RGB、HSL 和 CMYK，無需手動轉換。
實際範例中等藍色（#4A90E2）白色文字按鈕的對比度約為 3.1:1——未達到 AA 標準。改為深海軍藍（#1A3A6B）後對比度達到 9.4:1，甚至超過了 AAA。
關於 WCAG 3.0 和 APCA下一代指南引入了 APCA——一種更精細的感知對比度模型。WCAG 2.1 AA 仍是目前適用標準，但對於長期專案而言，針對 APCA 進行測試也值得考慮。
立即在 iOS 或 Android 上免費下載 Color Picker Camera: HEX RGB——無廣告、無追蹤，完全離線運作。