Web、UI與CSS

文字顏色清楚嗎？也檢查深色模式

使用工具

工作顯示器上能讀的文字，在另一塊螢幕可能很淡。想降低說明文字的存在感，可能無意中降低了可讀性。對比度將前景與背景的亮度差整理成數值，先輸入實際使用的兩種顏色，再決定調整。

前景 #777777、背景 #FFFFFF 得約 4.478:1，低於普通文字 AA 的 4.5:1。改為 #767676 得約 4.542:1。小變化雖跨過界限，但設計目標不是勉強過線，還要查看實際字型、字重和背景，保留閱讀餘裕。

白底比較

#777777 / #FFFFFF → 4.478:1
#767676 / #FFFFFF → 4.542:1
#000000 / #FFFFFF → 21:1

顯示比率會四捨五入，但判定使用未四捨五入值，不能把 4.499 變成 4.5 後當通過。大文字 AA 為 3:1，但叫標題不自動算大文字，還要符合尺寸和字重條件。滿足普通文字的配色更便於用於說明。

rgba(0,0,0,0.5) 配白底約為 3.977:1，因為合成後是灰色。只複製黑色 CSS 而忽略父元素透明度或疊層背景，會高估真實對比度。輸入應包含實際影響顯示的透明條件。

背景也透明時，需要最底層的不透明色。同一個面板放在白頁或深色頁會不同。工具合成指定顏色，不檢查 DOM 與堆疊關係；一組顏色無法評估整張圖片、漸層或複雜透明層。

#E2E8F0 文字配 #0F172A 約為 14.482:1，但輔助文字、連結、選取行與懸停背景各有自己的組合。每個主題都要檢查普通、懸停、聚焦、選取狀態，能發現只改背景卻保留深色文字等問題。

調整前先決定哪種顏色可變。固定品牌色可用於裝飾或背景，內文另用易讀顏色；連結可加底線，不只依賴色相。目標是在保持資訊層次時改善閱讀，而非單純提高數值。

文字夠深仍可能太小、行距過緊或放大後截斷。需另測真實內容、長翻譯、200% 文字放大與窄螢幕。預覽用於檢查顏色組合，並非自動稽核整個頁面。

僅用紅色表示錯誤、綠色表示成功，可能無法傳達狀態，應配合文字或圖示與可見焦點。文字對比度不能直接代替邊框、圖表、焦點的評估，應分別確認相關條件並實際操作。

共用修改方案時列出文字用途、前景、背景、透明度及前後比率，比只說變深更清楚。顏色轉換可統一 RGB/HSL 表示，但轉換本身不會改善閱讀，應區分格式轉換與實際改色。

最後回到實際頁面，從閱讀修改後的說明到完成操作走一遍。用數值找問題，再用實際畫面確認閱讀與操作。改好一組後，再查看重用同色的狀態和主題，避免局部修好卻遺漏別處。

白底本文可讀不涵蓋選取卡片、懸停連結或紅色錯誤。應取文字與其正後方實際表面，包含透明疊層；半透明面可能使頁面底色不是正確比較對象。逐狀態統一前景、背景、透明度，才能找到要修的組合。

修正可改背景、去透明、把重要小字升為本文，不只加深文字。但應按實際字級字重選擇標準，不為通過而改稱大字。#777777 白底說明顯示四捨五入接近 4.5 不足以判斷邊界，應看實際判定。

比率改善後回實際畫面看，圖片背景各處不同，細字小字仍可能難讀。錯誤僅用紅色表達也不夠，應加文字或圖示並檢查焦點。對比度是重要檢查之一，不是整個介面的自動評分。