顏色對比度檢測

按 WCAG 對比度規則檢查文字和背景顏色。

在您的瀏覽器中執行。您的檔案不會離開裝置。 瞭解如何驗證

…

使用方法

  1. 1
    填寫各項

    輸入數字或選擇所需選項。

  2. 2
    檢視結果

    更改任何值時,答案會立即更新。

  3. 3
    使用結果

    複製結果或記下來。不會向任何地方傳送任何內容。

About this tool

Enter a text colour and a background colour as hex codes. You see the contrast ratio and whether it passes the WCAG 2 levels: AA needs 4.5 to 1 for normal text and 3 to 1 for large text, AAA needs 7 to 1 and 4.5 to 1. Good contrast helps everyone, especially people with low vision.

When to use it

Check text and background colours against WCAG contrast rules.

Tips

Aim for 4.5:1 for normal text and 3:1 for large text.

Privacy

Everything runs in your browser, so your data is not uploaded or stored.

計算示例

With the boxes at their starting values (Text colour (hex): #1f2937; Background colour (hex): #ffffff), the tool shows: AA, normal text (4.5 : 1): Pass; AA, large text (3 : 1): Pass; AAA, normal text (7 : 1): Pass; AAA, large text (4.5 : 1): Pass; Interface parts and icons (3 : 1): Pass; Contrast ratio: 14.68 : 1. Change any box to see your own numbers. The result updates as you type, and nothing leaves your browser.

獲得最佳結果的提示

在相信結果之前先檢查每一個輸入項,因為一個錯誤的數字就會改變整個答案。請使用工資單、賬單、證書或合同上的準確數字,並記下計算日期。稅率、門檻和規則會不時變化,因此對於稅費和法律事務,請將結果視為估算,並與本頁註明的官方來源核對。您可以嘗試任意多個方案;不會儲存或傳送任何內容,重新整理頁面會清空輸入。

要點

將此計算器嵌入您的網站

複製此程式碼,即可在您的頁面上顯示計算器。包含指向 shobfree.com 的連結。

常見問題

What counts as large text?

About 24 px, or 18.7 px in bold, and above.

Which level should I aim for?

AA is the common legal and practical target for websites.

What does AA mean?

The common WCAG level for contrast.

What ratio is needed?

4.5 to 1 for normal text.

完全免費無費用,無需註冊
檔案保持私密一切都在您的瀏覽器中執行
用您的語言輕鬆使用提供多種語言