標頭或 CTA 的 CSS 漸層要先服務文字，再服務裝飾。最穩定的做法，是讓標題、說明與按鈕後方維持足夠一致的深色或淺色區域，把明顯的色相與明度變化移到沒有重要文字的一側。
先決定文字會出現在哪裡，再選漸層方向
漸層方向不該只看色彩流動得順不順，而要看最亮與最暗的位置會不會穿過文字。先在桌機與手機版型上標出標題、兩行說明、CTA 按鈕與導覽列可能占用的範圍，再決定由左到右、由上到下，或由中心向外變色。
例如桌機標頭把文案放在左側，圖片或裝飾放在右側，可以讓左側前半段維持深藍，約從 55% 之後才逐步轉成較亮的紫色。手機版若文字改成置中，原本安全的左側色帶就不再安全；此時應另外設定手機漸層，或在文字區加一層穩定的半透明底，而不是勉強沿用桌機數值。
先選一個即使漸層圖片失效也能承接白字或深色字的純色。CSS 宣告順序可以先放 background-color: #16213e;，下一行再放漸層背景。這個備用色不會自動從產生器出現，必須由實作者依實際文字色與版型補上。
用 CSS 漸層產生器固定安全色帶
CSS 漸層產生器可以選擇 linear、radial 或 conic，調整角度、增加色彩節點與百分比位置，即時預覽並複製 CSS。標頭通常先從 linear 開始，因為文字區與裝飾區的邊界較容易控制；radial 適合把亮點放在遠離文字的位置，conic 則較常作為圖形裝飾，不宜直接把長段文字壓在明暗交界上。
以左文右圖的 CTA 為例，可先放三個節點：深色在起點，相近的深色在中段，亮一些的品牌色放在最末端。前兩個節點的明度不要差太多，確保標題換行或按鈕變寬時仍落在穩定背景上。再調整角度，讓色帶邊界避開文字，而不是只追求斜線看起來有動感。
產生器會依位置排序節點，至少保留兩個節點，並輸出可複製的 background 宣告。它不會讀取你的頁面文字、不會計算對比，也不會替你產生響應式斷點；預覽框看起來清楚，不能直接推論實際標頭也清楚。
對比要檢查文字底下每一段背景
漸層的兩端通過檢查，不代表中間一定通過。W3C 的 WCAG 2.1 對一般文字提出至少 4.5:1、對大型文字提出至少 3:1 的對比要求；評估時應使用文字正常顯示時實際相鄰的背景。只量第一個與最後一個色碼，會漏掉中途最接近文字顏色的區段。
把標題、說明、連結與按鈕文字分開測量。標題字很大，不表示導覽連結與小字說明也能套用大型文字門檻；按鈕若有 hover、focus 或 disabled 狀態，也要檢查各狀態下的文字與底色。細字、較輕字重與半透明白字即使數字勉強通過，實際閱讀仍可能吃力，應保留更多餘裕。
可以用螢幕取色器從設計截圖抽取代表色，再交給獨立的對比檢查工具計算；取色器本身不會判定 WCAG。若需要先整理一組深、中、淺品牌色，配色產生器可用來建立候選色，但同樣不能取代文字位置的逐點驗證。
用真實文案驗收桌機與手機
交付前要把產生的 CSS 放進真正的標頭元件，而不是只看色塊。測試最短標題、預期長度的標題，以及會換成三行的長標題；也要放入實際 CTA 文案，確認按鈕變寬後沒有跨進亮色區。
驗收時至少包含下列情境：
- 桌機寬版、平板與窄手機，確認文字重排後的背景位置。
- 正常、hover、鍵盤 focus 與按鈕停用狀態。
- 瀏覽器放大到 200%，確認文字放大或換行後仍可讀。
- 暫時停用
background-image，確認備用純色與文字仍有足夠對比。 - 使用較長的繁體中文與英文混排文案，避免只用兩個字的示意標題驗收。
若任何尺寸出現文字跨過明暗交界，先移動色彩節點或改變方向；仍不穩定時，為文字容器加純色或半透明底。陰影只能作輔助，不能拿來掩蓋底色本身對比不足。
常見問題
CSS 漸層兩端對比都夠，中間還要檢查嗎？
要。漸層中間會產生兩端沒有的混合色，文字也可能因換行落在不同位置；應測量文字實際覆蓋的最不利區段。
可以只靠文字陰影改善可讀性嗎？
不建議。陰影可讓邊緣稍微清楚，但主要文字色與背景仍應有足夠對比；若背景變化太大，應先建立穩定底色。
為什麼桌機清楚，手機卻看不清楚？
手機版常會把左右排列改成置中或上下排列，文字因此移到另一段漸層上。需要為斷點重新設定方向、節點或文字底層。
產生器會自動加入 background-color 備用色嗎？
不會。它輸出漸層的 background 宣告；備用純色、文字顏色、響應式規則與對比驗證都要在實際元件中補上。
CTA 按鈕本身也要另外檢查嗎？
要。按鈕文字要對按鈕底色檢查，按鈕邊界與周圍標頭也要能辨識，並包含 hover 與鍵盤 focus 狀態。