在線即時計算器 · 純前端本地秒算 · 零數據上傳

🖥️ Contrast Ratio 計算機

專業免費的 Contrast Ratio 計算機。純前端本機毫秒級計算、零資料上傳、極致隱私保護。提供詳細公式推導、實例示範與常見問答。

即時推算結果 (Computed Output)
21:1 WCAG 2.x 相對亮度對比
專業公認計算模型,即時運算完畢
📜 計算歷史記錄 (試算軌跡)
尚無歷史記錄,每次點擊「計算」將在此留下試算軌跡...

什麼是對比度計算機?

這個工具會依照官方的 WCAG 2.x 公式,計算前景色(文字)與背景色之間的色彩對比度。對比度是無障礙設計的關鍵指標,它能告訴你文字對於弱視或有色覺障礙的使用者來說是否清晰易讀。數值範圍從 1:1(兩色完全相同、文字等於看不見)到 21:1(純黑配純白)。

使用方式

分別輸入前景色(文字)與背景色的紅、綠、藍三個分量(0–255)。計算機會先將每個色彩通道線性化,算出兩色的相對亮度,並在各自加上 0.05 的環境光常數後,以較亮者除以較暗者。接著系統會回報這組配色在一般文字與大型文字下,是否通過 WCAG AA 與 AAA 標準。

公式說明

對比度的計算方式為 (L_1 + 0.05) / (L_2 + 0.05),其中 L_1 是較亮色彩的相對亮度,L_2 則是較暗色彩的相對亮度。相對亮度的算法是先把每個通道縮放到 0–1 之間,再套用 gamma 轉換:若縮放後的數值 ≤ 0.03928,就除以 12.92;否則代入 ≤ft((c+0.055)/1.055\right)^{2.4}。線性化後的通道再依 0.2126· R + 0.7152· G + 0.0722· B 加權合成,反映人眼對綠色較為敏感的特性。

Contrast = ((L_1 + 0.05) ÷ (L_2 + 0.05))
where ≤ft{ \begin{aligned} L_1 &= \max(L_{fg}, L_{bg}) \\ L_2 &= \min(L_{fg}, L_{bg}) \\ L &= 0.2126 R_{\ell} + 0.7152 G_{\ell} + 0.0722 B_{\ell} \\ C_{\ell} &= \begin{cases} \dfrac{C/255}{12.92} & C/255 ≤ 0.03928 \\[0.6em] ≤ft(\dfrac{C/255 + 0.055}{1.055}\right)^{2.4} & otherwise \end{cases} \end{aligned} \right.

實際範例

白底(255,255,255)上的黑字(0,0,0):黑色亮度 = 0,白色亮度 = 1。對比度

=((1 + 0.05) ÷ (0 + 0.05)) = ((1.05) ÷ (0.05)) = 21:1
——這是理論上的最高對比,輕鬆通過所有 WCAG 等級。

使用注意事項與精準校對原則(6 大核心守則)

📐 1. 嚴格對齊輸入量綱與單位

輸入各項數值時請務必確認量綱(例如小時、天數、金額、百分比),避免單位不匹配引發推算偏差。

🔒 2. 純前端本機毫秒級隱私保障

所有計算邏輯 100% 在您的終端瀏覽器內完成,資料絕不上傳伺服器,嚴格守護商業與個人隱私。

📊 3. 符合公認學術與產業計算模型

演算法嚴格遵循國際通用數學公式與標準計算模型,經多重情境交叉核對,數值嚴密精確。

📋 4. 一鍵複製與免登入 PDF 匯出

支援一鍵複製推算結果字串至剪貼簿,亦可直接點擊列印按鈕輸出純淨 PDF 工作報表。

🔄 5. 多情景敏感度動態對比

建議針對極端值與多組預期情景分別試算,觀察輸出數據的波動區間,輔助做出更穩健的決策。

🛡️ 6. 專業諮詢與日常參考免責聲明

本工具運算結果供日常排程、學業研習與事前參考之用,如涉及重大法規或投資決策請諮詢持證專家。

常見問題 (FAQ)

我需要多少對比度才夠?
WCAG AA 要求一般文字達到 4.5:1、大型文字(≥18pt 或 14pt 粗體)達到 3:1。AAA 則分別要求 7:1 與 4.5:1。
前景與背景的順序會影響結果嗎?
不會。公式一律以較亮的亮度除以較暗的亮度,所以即使把前景色和背景色對調,得到的對比度仍然相同。
為什麼要加上 0.05?
這個常數是用來模擬螢幕的環境光反射,讓即使是純黑對純黑這種情況,也能得到一個有定義、不會趨近無限大的數值。