WCAG對比公式
計算前景色和背景色之間的相對亮度對比。
Formula
對比 = (L1 + 0.05) / (L2 + 0.05) 其中 L1 是較亮的亮度。
Variables
- 紅、綠、藍
- sRGB 通道（0–255 或 0–1 標準化）
- 高、小、長
- HSL 中的色相（度數）、飽和度和亮度 (0–1)
- L
- HSL/OKLCH 中的相對亮度 (WCAG) 或亮度
FAQ
- WCAG 對比公式對於列印工作流程準確嗎？
- 螢幕 RGB 和列印 CMYK 使用不同的色域。將轉換視為近似證明；使用 ICC 配置檔案進行商業印刷校準。
- 我可以在 CSS 中使用這個公式嗎？
- 現代 CSS 支援 color-mix()、oklch() 和 lab() 的許多操作。對於複雜的管道，請使用 JavaScript 進行計算並匯出 CSS 變數。
- Color DevByte 會上傳我的顏色嗎？
- 不會。公式參考頁是靜態文件；互動式工具在瀏覽器中 100% 用戶端運作。
概述
計算前景色和背景色之間的相對亮度對比。
Color DevByte 為需要可重複顏色數學且無需將資料傳送至伺服器的開發人員、設計人員和可存取性審核人員記錄了此公式。
使用連結的顏色工具透過即時預覽和多格式匯出以互動方式套用此公式。
何時使用此公式
在建立設計令牌、驗證 WCAG 對比度或在 CSS、Tailwind 或設計系統 JSON 中自動化顏色管道時應用 wcag 對比度公式。
對於生產 UI，始終使用對比度檢查器或視覺預覽來驗證結果 - 伽瑪校正和色域映射中的邊緣情況可能會改變結果。
實施說明
基於瀏覽器的工具應在亮度或 ΔE 計算之前對 sRGB 進行線性化。
優先選擇 OKLCH 或 LAB 插值進行漸變和主題，以避免 RGB 混合中常見的灰色中點。