Contrast ratio4.79:1AA for normal text
Large text sampleNormal body text - the quick brown fox jumps over the lazy dog.Small caption text at 14 pixels.
WCAG 2.2 results
AA NormalPass≥ 4.5:1
AAA NormalFail≥ 7:1
AA LargePass≥ 3:1
AAA LargePass≥ 4.5:1
UI Components & GraphicsPass≥ 3:1 (WCAG 1.4.11)
Category:color
Mode:Offline
Version:1.0.0
Access:Free
什麼是顏色對比度檢查器？
顏色對比度檢查器測量前景（文字）顏色和背景顏色之間的對比度，並告訴您該對是否符合 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 單獨涵蓋非文字元素,這是最常錯過的規則:圖示按鈕、輸入邊框和焦點環都需要它,並且設計可以傳遞每個段落,但在其表單欄位上仍然失敗。
如何使用顏色對比度檢查器？
1
輸入您的文字顏色
以任何常見格式鍵入或貼上前景色 - #1a1a1a、rgb (26,26,26)、hsl (0,0%,10%) 或海軍藍等關鍵字。顏色樣本和本機選擇器可讓您微調它。
2
輸入您的背景顏色
設定文字所在的背景。 如果您的文字顏色具有透明度，則在測量比率之前將其混合在此背景上，與用戶實際看到的內容相符。
3
閱讀比率和成績
與 AA 和 AAA 的 Pass 或 Fail 徽章在正常和大尺寸中出現的確切對比度，以及 3:1 UI 成分檢查，所有這些都在您背景上的文字樣本旁邊。
4
立即修復故障
如果組合失敗,請套用建議的輔助顏色 - 該工具將文字推得更亮或更暗,直到清除目標級別,然後您可以複製固定值。
主要特點
精確的 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
對於正常的身體文字，目標至少 4.5:1 以滿足 WCAG AA 和 7:1 以達到更嚴格的 AAA 等級。 大文字（約 24 像素或 18.66 像素）只需要 3:1 的 AA 和 4.5:1 的 AAA。 圖示和互動式 UI 元件至少需要 3:1。
Related Tools
CLR
color
Color Converter
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
CLR
color
Color Palette Generator
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX, RGB, and HSL values you can copy.
CLR
color
Color Picker & Converter
Pick colors and convert between HEX, RGB, and HSL formats
CLR
color
Color Shades Generator
Generate tints, shades, and tones from any base color
Comments
0 comments
No comments yet. Be the first to share your thoughts!
color contrast checkerwcag contrast checkercontrast ratio calculatoraccessibility contrastaa aaa contrasttext contrast checkera11y color checkerwcag 2.2 contrastaccessible colors