Web、UI與CSS

黑字也難讀？檢查含透明度的對比度

使用工具

輔助文字底色同為黑卻淡，可能因 alpha 降低而與背景混合。白字置於半透明卡片，還受卡片後方影響。應分別填前景、背景、最終底色，不把單色結果擴展到整張照片或變化背景。

不透明前景與背景

foreground: #000000
background: #FFFFFF
ratio: 21:1

黑前景、白背景得比率 21，先建立不透明基準。比率描述相對亮度對比，不單獨評估字型、顯示解析度或實際字級。

前景改 #777777，對白約 4.478。自行捨入 4.5 不代表達到一般文字 4.5:1。工具用未顯示捨入值判斷，不能把邊界失敗捨入成通過。

帶 alpha 的前景

foreground: rgba(0, 0, 0, 0.5)
background: #FFFFFF
composited RGB: 127.5, 127.5, 127.5
ratio: approximately 3.977:1

填 rgba(0,0,0,0.5)，黑與白各半合成灰，約 3.977:1，低於一般文字 AA 4.5。應看 finalForeground，不能僅憑未合成色是黑判斷。

同前景置黑背景，合成仍黑，比率一。alpha 0.5 沒有脫離背景的固定可讀性結論。每個主題都需含透明度檢查完整組合。

半透明卡片條件

foreground: #FFFFFF
background: rgba(0, 0, 0, 0.5)
backdrop: #FFFFFF → approximately 3.977:1
backdrop: #000000 → 21:1

白字置半透明黑卡，後方白則卡變灰，後方黑則保持黑。兩色不足，需指定實際不透明底色。工具拒絕最終底色仍透明，避免未知條件下編造數值。

父元素 opacity 可能將文字背景作為群組整體合成，分別給兩色同 alpha 不保證等價。需確認透明度施加層級並檢查繪製色彩。

WCAG AA 一般字 4.5:1、符合條件大字 3:1。大字按字級與粗細定義，不憑感覺。工具顯示兩者但不檢查字型，大字通過不能直接用於小輔助文字。

對比通過不等於整頁無障礙稽核完成。焦點、連結、放大與非色彩提示仍需另查。目的是可讀可操作，而不是增加通過標籤。

單一取樣色不能代表照片或漸層上全部文字。需查字下不同區域與懸停、選取、主題狀態，可用不透明文字底板固定條件。工具不掃圖或全狀態，應記錄具體測了哪組。