色彩對比批量矩陣檢測器

為什麼要一次檢查「所有顏色組合」的對比度？

無障礙網頁設計規範（WCAG）要求文字與背景的對比度必須達到一定標準，否則視力不佳或色弱的使用者可能看不清楚文字。但實務上一個網站常常有好幾種主色、背景色互相搭配——例如主色文字配淺灰背景、警示色配白底、深色卡片配淡字——如果一組一組手動檢查，很容易漏掉某個組合。本工具讓你一次貼上所有會用到的顏色，自動算出「每兩個顏色互相搭配」的對比度，用一張矩陣表全部呈現，不用再一組一組手動比對。

對比度怎麼算？舉個例子

WCAG 2.1 的對比度公式是 (L1+0.05)/(L2+0.05)，L1、L2 是兩個顏色的「相對亮度」，數值愈大代表愈接近白色。例如純黑 #000000 對純白 #FFFFFF 的對比度是 21:1（滿分），但淺灰 #999999 對白色只有 2.85:1——遠低於一般文字要求的 4.5:1 及格線。一般文字（小於18px或14px粗體）需要 AA 級 ≥ 4.5:1，若想更嚴謹則要達 AAA 級 ≥ 7:1；大字（18px+粗體或24px+）門檻較寬，AA 級只要 ≥ 3:1。

怎麼看懂結果矩陣？

矩陣每個格子代表「這一列的顏色」對「這一欄的顏色」的對比度數值，格子背景會用綠色（AAA通過）、黃色（僅AA通過）、紅色（未達標）標示，一眼就能看出哪組顏色配對有問題，不需要逐一計算。

對比度計算僅根據顏色本身的 RGB 數值，不會考慮字型粗細、實際渲染的抗鋸齒效果或半透明疊加顏色，正式上線前建議仍以肉眼在實際裝置上複查一次。