什麼是顏色對比度檢查器？
顏色對比度檢查器測量前景（文字）顏色和背景顏色之間的對比度，並告訴您該對是否符合 Web 內容可訪問性指南。 它報告了一個介於 1:1 和 21:1 之間的單一數字，並根據 WCAG 2.2 對正常和大文字大小的 AA 和 AAA 閾值進行評分，以及用戶介面組件和圖形的單獨 3:1 閾值。
對比是兩種顏色之間相對亮度的差異，而不僅僅是它們的不同。 對於視力低下、色覺不足或任何在明亮陽光下使用手機的讀者，兩種顏色仍然可以感覺到獨特。 該比率是使用 WCAG 定義的精確 SRGB 相對亮度公式計算的，因此結果與審計工具和螢幕閱讀器用戶體驗的相符，而不是粗略的視覺猜測。
一切都在您的瀏覽器中運行。 鍵入或貼上顏色為十六進位、RGB、HSL 或 CSS 關鍵字，觀看即時文字預覽更新，如果一對失敗，您可以應用建議的顏色通過。 沒有上傳，沒有註冊，一旦頁面載入，工具就會繼續離線工作。
WCAG 2 對比公式是相對亮度的比率,其閾值是可訪問性審核和大多數法律要求的衡量標準,因此它是正確的設計數字。眾所周知,它也是不完美的:它可以在深色背景上輕寫文本,而在某些中音對上則很粗糙,這就是為什麼後繼演算法APCA 存在並且正在針對未來版本進行試驗。大文字有一個較低的條,大意味著 18pt,或粗體時為 14pt,大約是 24px 和 18.66px。 1.4。11 以 3:1 單獨涵蓋非文字元素,這是最常錯過的規則:圖示按鈕、輸入邊框和焦點環都需要它,並且設計可以傳遞每個段落,但在其表單欄位上仍然失敗。
如何使用顏色對比度檢查器？
輸入您的文字顏色
以任何常見格式鍵入或貼上前景色 - #1a1a1a、rgb (26,26,26)、hsl (0,0%,10%) 或海軍藍等關鍵字。顏色樣本和本機選擇器可讓您微調它。
輸入您的背景顏色
設定文字所在的背景。 如果您的文字顏色具有透明度，則在測量比率之前將其混合在此背景上，與用戶實際看到的內容相符。
閱讀比率和成績
與 AA 和 AAA 的 Pass 或 Fail 徽章在正常和大尺寸中出現的確切對比度，以及 3:1 UI 成分檢查，所有這些都在您背景上的文字樣本旁邊。
立即修復故障
如果組合失敗,請套用建議的輔助顏色 - 該工具將文字推得更亮或更暗,直到清除目標級別,然後您可以複製固定值。
主要特點
精確的 WCAG 比率
使用 WCAG 2.2 中的官方 SRGB 相對亮度和對比度公式，因此該數字將正式審計與小數點後兩位相匹配，而不是近似
AA、AAA 和 UI 評分
每個結果都針對 AA (4.5:1)、AAA (7:1)、大文字閾值 (3:1 和 4.5:1) 以及非文字 UI 組件和圖形物件的 3:1 規則進行分級
即時文字預覽
鍵入時在您選擇的背景上顯示正常和大文字的真實樣本，因此您可以根據數字分數判斷可讀性
可訪問的顏色建議
當一對失敗時，工具在 HSL 中行走文字顏色較淺或較暗，直到它達到您的目標比率並提供一個傳遞值，您可以一鍵套用
Frequently Asked Questions
Related Tools
Color Palette Generator
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX codes you can copy and a CSS variables export.
Color Picker & Converter
Pick colors and convert between HEX, RGB, and HSL formats
Color Shades Generator
Generate tints, shades, and tones from any base color
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!