把照片色票用在文字：六個顏色的對比取捨練習

把六色色票放進工具，先固定背景

在色碼欄貼入以下內容並按「套用色票」，接著在比較區選第 4 色 #F4EDDD 作背景。

#BB4D4D #E79585 #783B43 #F4EDDD #69966B #283044

這組顏色來自本站人工繪製的桌景練習圖。本次目的是做一張有紅杯氣氛的資訊卡，因此先保留米白底，只更換文字色；這樣才能知道改善來自哪個選擇。

同一個米白背景，逐一比較文字色

表格的數字由本站 sRGB 計算函式產生，顯示時捨去到小數第 2 位。#BB4D4D 看起來比淡色醒目，但 4.20:1 仍低於一般文字門檻。不能因為「看起來很紅」就省略計算。

一個可操作的起點是：正文用 #283044，想保留暖色風格的文字可試 #783B43，原本的 #BB4D4D 用在沒有文字的裝飾色塊。這是這張卡片的選擇示例，不是唯一配色答案。

想保留原來的紅字，就試著換背景

在色碼欄末尾加上 #FFFFFF 並套用，再以 #BB4D4D 配白色背景，結果為 4.90:1，可達一般文字的 AA 對比門檻。這表示你可以改背景，而不一定要把喜歡的紅色全部換掉。

若直接交換文字與背景，對比率不會改變：紅底白字仍為 4.90:1。深淺顛倒的閱讀感受可能不同，最後仍要在實際字級、字重與卡片大小下檢查。

綠色則呈現另一種取捨：#69966B 配白色是 3.40:1，配 #283044 是 3.86:1，都未達一般文字 4.5:1。這份色票裡的綠適合先作非文字裝飾；若一定要用綠色底排正文，需另找合適的文字色或調整底色，重新計算。

4.5:1 與 3:1，什麼情況看哪一個？

WCAG 2.2 的一般文字 AA 對比門檻為 4.5:1；大字門檻為 3:1。大字定義包括至少 18pt，或粗體 14pt，CJK 字型需有相當的字形大小。不確定字是否符合大字時，先使用一般文字門檻。

計算判定不能把 4.499 四捨五入成通過。工具使用完整計算值判定，顯示只供閱讀。這裡只檢查兩個不透明純色，不代表整張作品或整個網站已符合所有無障礙要求。

準則與完整定義：W3C：Contrast (Minimum)。

把字放回照片時，單一背景色不夠

假設字的左半邊壓在紅杯，右半邊壓在米白桌面，兩側背景不同。只從桌面取一個色碼，無法代表整行文字後方的像素。文字移動、圖片裁切或手機換行後，也可能壓到不同位置。

對這種版面，可先在文字後方加一個固定的不透明色板，再檢查色板與文字的組合。若仍要直接壓在照片上，就必須核對文字承載區域的不同背景，不能只挑最有利的一點報告比值。

工具目前不分析漸層與整張照片上的文字範圍；你能使用它測試候選純色，再回到實際作品完成檢查。

匯出之前，留下一個可重用的決定

1. 記下每個色的角色：文字、背景、點綴，而不是只存一串 HEX。
2. 在實際作品檢查正常閱讀大小、手機換行與字重；不要只在放大預覽時判斷。
3. 如果有錯誤或成功狀態，另外加文字或圖示，不只用紅色、綠色區分。
4. 複製色碼或下載色票 SVG，連同文字／背景配對與對比值一起記錄。工具不會自動保存這些用途筆記。

回到這組六色，可以寫下「米白底＋深色正文 11.27:1；紅杯色作點綴」。下次延伸卡片時，就知道哪些決定可沿用，哪些新配對必須再測。