文字難讀時的調整順序 – ZenBlocks buttonBasic
結論
建議依序調整：**對比 -> 字型設定 -> 文字陰影 -> 背景覆蓋層**，一次只調整一項最有效。
> **重點：** 可讀性問題應先處理對比，再處理字型與陰影。
> **影響：** 先後順序正確可大幅縮短調整時間。
> **調整建議：** 每次僅調整一個參數並立即比對前後差異。—
原因
1. 文字與背景對比不足。
2. 字體尺寸過小（手機尤其明顯）。
3. 文字直接壓在複雜背景圖上。
4. 行高或字距設定不適合。—
解決步驟
### 步驟 1：先看對比
1. 檢查文字色與背景色。
2. 提高明度差。
3. 以 WCAG AA（4.5:1）做為參考。### 步驟 2：調整字型
1. `字型大小`：手機建議至少 14px。
2. `Font 粗細`：背景複雜時建議 600-700。
3. `行高`：建議 1.4-1.8。
4. `字距`：必要時加 0.02-0.05em。### 步驟 3：加入文字陰影
1. 開啟文字陰影設定。
2. 模糊值先用 2-4px。
3. 不透明度先從 0.3-0.5 開始。### 步驟 4：加背景覆蓋層
1. 在背景設定啟用 overlay。
2. alpha 建議在 0.3-0.6 間調整。### 步驟 5：重新檢查響應式
1. 依桌面、平板、手機逐一確認。
2. 必要時分裝置調整字級。—
注意事項
– Microtext / Subtext 可較弱化，但不能犧牲可讀性。
– Microcopy / Subcopy 在按鈕外部，需用實際頁面背景檢查。—
相關設定
– [樣式設定](../button/style/)
– [字型設定](../button/font/)
– [背景設定](../button/background/)
– [微文字設定](../additional/microtext/)
– [補充文字設定](../additional/subtext/)