[{"data":1,"prerenderedAt":367},["ShallowReactive",2],{"blog-post-/blog/zh-tw/create-css-gradients-online":3,"related-posts-/zh-TW/blog/create-css-gradients-online":101},{"id":4,"title":5,"author":6,"body":7,"category":83,"date":84,"description":85,"extension":86,"featured":87,"image":88,"meta":89,"navigation":90,"path":91,"readingTime":92,"seo":93,"stem":94,"tags":95,"tools":99,"__hash__":100},"content/blog/zh-TW/create-css-gradients-online.md","如何在線建立 CSS 漸層：實用設計流程","Anything Tools Editorial",{"type":8,"value":9,"toc":74},"minimark",[10,14,18,22,25,28,47,50,53,56,68,71],[11,12,5],"h1",{"id":13},"如何在線建立-css-漸層實用設計流程",[15,16,17],"p",{},"漸層能增加介面層次與方向感，但隨意配色常讓文字難以閱讀。好的漸層先有明確任務：區分區塊、引導注意力，或替內容提供安靜背景。",[19,20,21],"h2",{"id":21},"選擇漸層類型",[15,23,24],{},"線性漸層適合橫幅、卡片與方向性畫面；徑向漸層把注意力帶向一點，適合放在插圖背後。先用兩種色彩，只有能改善過渡時才加入第三個色標。",[19,26,27],{"id":27},"在瀏覽器中製作",[15,29,30,31,36,37,41,42,46],{},"開啟 ",[32,33,35],"a",{"href":34},"/design/gradient-generator","漸層產生器","，選擇方向並調整色標。可用 ",[32,38,40],{"href":39},"/design/color-picker","取色器"," 從既有素材擷取品牌色，或用 ",[32,43,45],{"href":44},"/design/color-converter","色彩轉換器"," 取得 CSS 可用的色值。",[19,48,49],{"id":49},"維持文字可讀性",[15,51,52],{},"在預覽上放入真實標題與按鈕文字，而不只看色塊。對比不足時，可加深淺色文字後方、降低文案附近飽和度，或加上淡淡遮罩。不要只用漸層傳達操作或狀態。",[19,54,55],{"id":55},"讓成果可重用",[15,57,58,59,63,64,67],{},"複製 CSS 後，使用 ",[60,61,62],"code",{},"--surface-accent"," 這種語意名稱，不要用 ",[60,65,66],{},"--blue-gradient-2","。也請在窄螢幕與圖片旁測試，桌面端平衡的背景在手機裁切後可能顯得干擾。",[19,69,70],{"id":70},"結論",[15,72,73],{},"最好的漸層襯托內容而非搶走焦點。使用聚焦色盤、以真實文案檢查對比，並把 CSS 儲存為可重用的設計權杖。",{"title":75,"searchDepth":76,"depth":76,"links":77},"",2,[78,79,80,81,82],{"id":21,"depth":76,"text":21},{"id":27,"depth":76,"text":27},{"id":49,"depth":76,"text":49},{"id":55,"depth":76,"text":55},{"id":70,"depth":76,"text":70},"設計","2026-07-10T00:00:00.000Z","使用線上 CSS 漸層產生器，建立有目的的色標、可讀的對比度與可重用的 CSS 背景。","md",false,"/blog/create-css-gradients-online.png",{},true,"/blog/zh-tw/create-css-gradients-online",4,{"title":5,"description":85},"blog/zh-TW/create-css-gradients-online",[96,35,97,98],"CSS 漸層","網頁設計","色彩",[34,39,44],"M7BAhtfcRJsIdACrfKk1FAFcL0hwceU4aamfG4WjwiY",[102],{"id":103,"title":104,"author":105,"body":106,"category":83,"date":351,"description":352,"extension":86,"featured":87,"image":353,"meta":354,"navigation":90,"path":355,"readingTime":356,"seo":357,"stem":358,"tags":359,"tools":365,"__hash__":366},"content/blog/zh-TW/how-to-pick-accessible-ui-colors.md","如何在 2026 年挑選無障礙 UI 配色","Anything Tools Team",{"type":8,"value":107,"toc":341},[108,111,114,117,124,128,131,134,150,153,157,160,186,189,192,196,199,216,219,223,226,229,240,245,248,251,268,271,275,283,286,303,306,309,327,330,332,335],[11,109,104],{"id":110},"如何在-2026-年挑選無障礙-ui-配色",[15,112,113],{},"挑選介面顏色，不只是品牌美感問題。它會直接影響可讀性、操作判斷、錯誤預防，以及產品是否讓人覺得可靠。",[15,115,116],{},"如果按鈕看起來很漂亮，但文字難以辨認，那這套配色就沒有完成它該做的事。真正好的無障礙配色，應該先讓介面更清楚，再談裝飾感。",[15,118,119,120,123],{},"如果你想先快速試色並轉換顏色格式，可以直接使用 ",[32,121,122],{"href":39},"Anything Tools 顏色選擇器","。",[19,125,127],{"id":126},"先看對比再談好不好看","先看對比，再談好不好看",[15,129,130],{},"很多團隊會先定一個品牌主色，然後想把它盡量用到所有地方。這通常會出問題，因為一個強調色很難同時適合正文、背景、邊框、標籤、狀態提示和停用狀態。",[15,132,133],{},"更穩妥的做法，是先從使用者最常閱讀、最常操作的區塊開始：",[135,136,137,141,144,147],"ul",{},[138,139,140],"li",{},"正文與主背景",[138,142,143],{},"次要文字與淡色面板",[138,145,146],{},"按鈕與連結",[138,148,149],{},"成功、警告、錯誤狀態",[15,151,152],{},"一般文字通常需要足夠穩妥的對比度，才能符合 WCAG 的可讀性預期。對按鈕、標籤和提示狀態來說，即使不是正文，也必須讓使用者一眼分清楚哪些能點、哪些已選取、哪些有風險。",[19,154,156],{"id":155},"不要只找一個完美色值而是建立一套小型色彩系統","不要只找一個完美色值，而是建立一套小型色彩系統",[15,158,159],{},"無障礙介面更容易維護的關鍵，不是找到一個神奇的 HEX，而是先替每個顏色角色定義用途。常見做法是先建立一組小型 token：",[135,161,162,165,168,171,174,177,180,183],{},[138,163,164],{},"頁面背景",[138,166,167],{},"主文字",[138,169,170],{},"次要文字",[138,172,173],{},"邊框",[138,175,176],{},"主要操作色",[138,178,179],{},"成功色",[138,181,182],{},"警告色",[138,184,185],{},"錯誤色",[15,187,188],{},"當這些角色清楚後，你就能圍繞它們延伸深淺層級，而不是每做一個畫面就重猜一次。",[15,190,191],{},"重點不是顏色越多越好，而是一致性越高越好。",[19,193,195],{"id":194},"一定要在真實元件中測試而不是只看色塊","一定要在真實元件中測試，而不是只看色塊",[15,197,198],{},"顏色單獨看沒問題，不代表放進產品裡也沒問題。真正應該測試的是：",[135,200,201,204,207,210,213],{},[138,202,203],{},"有文字的主按鈕",[138,205,206],{},"有 placeholder 的輸入框",[138,208,209],{},"表單下方的錯誤提示",[138,211,212],{},"被選取的頁籤",[138,214,215],{},"停用狀態的操作按鈕",[15,217,218],{},"很多可近用性問題都出在組合，而不是單一顏色本身。例如淺灰文字放在白底上勉強可讀，放進帶色卡片或搭配細邊框後，就會變得很虛。",[19,220,222],{"id":221},"調色時盡量使用-hsl-或有結構的色階","調色時盡量使用 HSL 或有結構的色階",[15,224,225],{},"如果團隊只是在多個隨機 HEX 值之間來回試，後續維護會很痛苦。更實用的方式，是按色相、飽和度、明度去有意識地調整。",[15,227,228],{},"這樣你會更容易回答這些實際問題：",[135,230,231,234,237],{},[138,232,233],{},"這個警告色應該更深一點，還是降低飽和度？",[138,235,236],{},"邊框是不是和卡片背景太接近？",[138,238,239],{},"hover 狀態需要明顯加深，還是只要微調就夠？",[15,241,242,244],{},[32,243,122],{"href":39}," 在這一步很方便，因為它能快速切換 HEX、RGB、HSL，也能順手查看配色關係和明暗變化。",[19,246,247],{"id":247},"最常見的無障礙配色錯誤",[15,249,250],{},"下面這些問題在產品裡反覆出現：",[135,252,253,256,259,262,265],{},[138,254,255],{},"為了看起來現代，把正文做得太灰",[138,257,258],{},"只靠顏色表達成功或錯誤狀態",[138,260,261],{},"紅綠組合對色覺缺陷使用者不友好",[138,263,264],{},"焦點外框太弱，鍵盤導覽時幾乎看不見",[138,266,267],{},"把文字放到漸層或染色背景上，卻沒有重新檢查對比",[15,269,270],{},"一個很實用的原則是：只要這個狀態重要，就不要只靠顏色。可以同時搭配字重、圖示、標籤或形狀變化。",[19,272,274],{"id":273},"把配色寫成可重用規則工程落地才不會偏掉","把配色寫成可重用規則，工程落地才不會偏掉",[15,276,277,278,282],{},"很多配色在設計稿裡是正確的，真正上線卻失真，常常不是設計問題，而是 token 沒有被清楚記錄。建議把每個顏色的用途與限制寫清楚。如果團隊會把設計 token 放進設定檔或交接文件，也可以順手用 ",[32,279,281],{"href":280},"/dev/json-formatter","Anything Tools JSON Formatter"," 整理顏色物件，減少工程接入時的誤讀。",[15,284,285],{},"一份實用的顏色文件通常至少要包括：",[135,287,288,291,294,297,300],{},[138,289,290],{},"token 名稱",[138,292,293],{},"精確色值",[138,295,296],{},"適用背景",[138,298,299],{},"能否作為文字色",[138,301,302],{},"hover 與 active 變體",[19,304,305],{"id":305},"一套夠輕量的瀏覽器工作流",[15,307,308],{},"對大多數團隊來說，下面這套流程就很夠用：",[310,311,312,315,318,321,324],"ol",{},[138,313,314],{},"先確定品牌色或起始介面色。",[138,316,317],{},"生成相鄰色階與協調配色。",[138,319,320],{},"在真實按鈕、卡片、輸入框中測試。",[138,322,323],{},"移除對比太弱的組合。",[138,325,326],{},"把最終 token 整理成可重用格式。",[15,328,329],{},"這樣做比每個畫面單獨調色更快，也更容易隨著產品成長繼續維護。",[19,331,70],{"id":70},[15,333,334],{},"無障礙 UI 配色的目標，是讓使用者更容易讀懂介面、完成判斷與操作。也就是說，文字要清楚，狀態要明顯，重點要穩定可見。",[15,336,337,338,340],{},"把顏色當成介面結構，而不是裝飾層，產品品質會更穩。如果你想快速開始建立這套結構，可以先用 ",[32,339,122],{"href":39}," 產生候選配色，再放進真實元件裡驗證。",{"title":75,"searchDepth":76,"depth":76,"links":342},[343,344,345,346,347,348,349,350],{"id":126,"depth":76,"text":127},{"id":155,"depth":76,"text":156},{"id":194,"depth":76,"text":195},{"id":221,"depth":76,"text":222},{"id":247,"depth":76,"text":247},{"id":273,"depth":76,"text":274},{"id":305,"depth":76,"text":305},{"id":70,"depth":76,"text":70},"2026-03-29T00:00:00.000Z","一份實用指南，教你用更好的對比、狀態區分與瀏覽器工作流挑選更易讀的 UI 配色。","/blog/how-to-pick-accessible-ui-colors.png",{},"/blog/zh-tw/how-to-pick-accessible-ui-colors",8,{"title":104,"description":352},"blog/zh-TW/how-to-pick-accessible-ui-colors",[360,361,362,363,364],"無障礙設計","顏色選擇器","UI 設計","WCAG","設計系統",[39,44],"-cMlYHzDqd2J3R44zmwwF39HwUK-XmDW9mtUiRZzhb0",1783657487509]