Contrast Checker
WCAG contrast check
WCAG contrast check 在您的瀏覽器中本地執行
The quick brown fox
Small body text at 14px
| Normal text (AA) | needs 4.5:1 | Pass |
| Normal text (AAA) | needs 7:1 | Pass |
| Large text 18pt+ (AA) | needs 3:1 | Pass |
| Large text 18pt+ (AAA) | needs 4.5:1 | Pass |
| UI components and graphics (AA) | needs 3:1 | Pass |
Text: #1a1a1a Background: #ffffff Contrast ratio: 17.40:1 Normal text (AA) (needs 4.5:1): Pass Normal text (AAA) (needs 7:1): Pass Large text 18pt+ (AA) (needs 3:1): Pass Large text 18pt+ (AAA) (needs 4.5:1): Pass UI components and graphics (AA) (needs 3:1): Pass
About the
對比度檢查器使用 WCAG 亮度公式測量文字顏色和背景顏色之間的對比度，並告訴您該對通過了哪些輔助功能等級。這是決定正文文本是否真正可讀的檢查：對於普通文本，最小比例為 4.5 比 1；對於大文本和介面邊界，比例為 3 比 1；對於增強合規性，比例為 7 比 1。透過眼睛判斷對比度是不可靠的，因為眼睛對綠色的敏感度遠高於對藍色的敏感度，這就是為什麼看起來明亮的黃色和看起來暗的藍色得分幾乎相同。
Where people use the
- 檢查彩色背景上的正文是否符合 AA。
- 在黑色和白色文字之間選擇按鈕顏色。
- 在重新設計之前審核現有調色盤。
- 在票證中記錄無障礙決策。
How to use the
- 1
設定文字顏色
鍵入十六進位值，例如 1a1a1a，或使用顏色選擇器。接受三位數簡寫，例如 f0a。
- 2
設定背景顏色
背景也一樣。當您更改其中之一時，預覽會更新。
- 3
讀取比例
數字範圍從 1:1（相同顏色）到 21:1（黑底白字）。更高意味著更具可讀性。
- 4
檢查您需要的級別
正常正文文字 AA 需要 4.5 比 1，AAA 需要 7 比 1。 18pt 或 14pt 粗體標題和 UI 邊框需要 3 比 1。
- 5
看預覽以及數量
一對可以在紙上傳遞，但在小尺寸或低品質螢幕上看起來仍然很差。如果看起來很難讀，那就很難讀。
提示和最佳實踐
- 使文字顏色變暗，填滿色彩保持較亮。
- 檢查實際使用的文字的最小尺寸。
- 邊框和圖示也需要 3 比 1，而不僅僅是文字。
常見問題
對比度的公式是什麼？
在伽瑪校正後，每種顏色都使用標準權重轉換為相對亮度，紅色為 0.2126，綠色為 0.7152，藍色為 0.0722。此比率就是較亮的亮度加上 0.05 除以較暗的亮度加上 0.05。結果範圍為 1:1 至 21:1。
為什麼我的品牌顏色失敗？
因為大多數飽和的中間色調顏色與白色的比例無法達到 4.5 比 1。通常的解決方法是使文字使用的顏色變暗，同時為大填充保留較亮的版本，這正是大多數設計系統對其原色所做的處理。
通過該比率就足以訪問嗎？
這是必要的，但還不夠。非常大或非常小的文字、較細的字型粗細、文字覆蓋影像以及某些形式的色覺缺陷都會影響超出比例的可讀性。盡可能與真實使用者進行測試。
方向重要嗎，淺色對深色還是深色對淺色？
不會。比例是對稱的，因此黑底白字和白底黑字的得分都是 21:1。實踐中的不同之處在於眩光和感知重量，這是一種設計判斷，而不是合規性判斷。
什麼算大文本？
在 WCAG 術語中，粗體時為 18pt 或更大，或 14pt 或更大。在 CSS 中，畫素大約是 24 畫素，粗體時大約為 18.66 畫素。
計算在哪裡進行？
完全在您的瀏覽器中。沒有上傳任何內容，因此您可以從尚未公開的品牌指南中檢查顏色。