按鈕設計規格：尺寸 24、44、48 差在哪，對比與文案怎麼驗收

作者｜瞻新資訊　張安邦執行長（台大醫工背景・十年以上IT服務公司創辦人）

設計稿送來了，會議上最常出現的兩句話是「這顆按鈕可不可以再大一點」和「可不可以再明顯一點」。設計師調了，下一輪還是有人覺得不夠。問題不在誰的眼光比較好，而是這兩句話沒有數字，沒辦法驗收。

按鈕好不好按，其實量得出來。 能按的範圍有多大、離旁邊的按鈕多遠、字跟底色差多少、上面寫了什麼、一個畫面有幾顆在搶注意力、按下去之後有沒有反應，這六件事都有國際標準或平台官方文件可以對。這篇把數字和出處一次列出來，最後收成一張驗收表。

先給趕時間的人一段結論：手機上的主要按鈕，能按的範圍做到 44 到 48 見方（單位下一節會解釋）；再小的按鈕也不要低於 24，而且要跟旁邊的保持距離。按鈕上的字對底色的對比至少 4.5:1，按鈕的外形對背景至少 3:1。一個畫面只留一顆最醒目的主要按鈕，上面寫「按了會發生什麼」。

按鈕設計要訂成規格：好不好按，六件事量得出來

來找我談網站或系統的客戶，需求一開始多半是模糊的，這很正常。「按鈕好按一點」也是一種模糊的需求。模糊的需求可以討論，但沒辦法驗收，所以要先換成量得出來的東西。

按鈕設計可以拆成六項規格：尺寸、間距、對比、文案、主次、狀態。前三項有明確的數字；後三項沒有數字，但官方文件把判斷方式寫得很清楚。另外還有一項「位置」，目前沒有可靠的通則，只能靠實機測試，後面單獨講。

這些看起來是小事，實際上多數網站都沒做到。美國猶他州立大學的無障礙研究單位 WebAIM 每年檢測排名前一百萬個網站的首頁，2026 年的 WebAIM Million 報告顯示 95.9% 的首頁測得出無障礙錯誤。最常見的一項就是文字對比不足，83.9% 的首頁都有；另外有 30.6% 的首頁存在「空白按鈕」，也就是按鈕上沒有任何文字可以讓輔助工具唸出來。對比不足和沒有名字的按鈕，是全世界網站最常見的毛病，不是少數人才會犯的錯。

按鈕尺寸 24、44、48 差在哪：及格線、平台建議值與單位

先講結論：24 是網頁無障礙的及格線，44 和 48 是 Apple 與 Google 給自家 App 的建議值，三個數字連單位都不一樣。 它們沒有互相矛盾，只是在回答不同的問題。

表上的數字都回原文對過，出處依序是 WCAG 2.2 本文與 W3C 對 2.5.8 目標尺寸（最小）的說明文件、Apple 人機介面指南的按鈕頁、Material Design 3 的無障礙設計頁與 web.dev 的觸控目標說明。台灣的規範後面有一節專門講。

三個單位先用白話講一次。螢幕越做越細，同一顆按鈕如果用螢幕上真正的小點來算，在不同手機上會差好幾倍。所以各平台都改用「邏輯上的一格」來量：不管螢幕多細，一格在手上看起來差不多一樣大。網頁叫它 CSS 像素，iPhone 叫 pt，Android 叫 dp。三把尺的刻度很接近，但不是同一把。web.dev 換算過：在設定正確的手機網頁上，48 個這樣的單位大約是 9 公釐，差不多是一個指腹的大小。

那網頁到底要照哪一個？實務上分兩層來訂：

• 主要按鈕（送出、加入購物車、預約、聯絡）在手機上能按的範圍，做到 44 到 48。 這是 Apple、Google 與 WCAG 加強等級三邊都指向的區間。
• 次要的小按鈕、圖示按鈕不要低於 24，而且要跟旁邊的東西保持距離。

為什麼不直接用 24 就好？因為 24 是「不能再低」的線，不是目標。W3C 在同一份說明文件裡就寫了：重要的連結與控制項，建議往更嚴格的 44 靠，目標做大一點能幫到更多人。打個比方，24 像「停得進去」的車格，要慢慢喬；44 到 48 是「一次就停好」的車格。及格和好用是兩回事。

給網頁用的官方規格裡，也有直接訂在 44 的。日本數位廳的設計系統是日本政府機關網站共用的元件規範，它的按鈕頁寫明目標區域要保持在 44 CSS 像素以上。這是日本的做法，不是台灣的規定，但看得出「網頁的主要按鈕做到 44」不是 App 才有的要求。

看得到的大小，跟按得到的範圍，是兩個數字

很多人看到規格會問：垃圾桶圖示才這麼一點大，怎麼可能有 48？答案是規範量的是「按得到的範圍」，不是「看得到的圖案」。Material Design 舉的例子是：圖示看起來 24，四周各補 12 的透明內距，能按的範圍就是 48。圖案沒有變大，手指卻好按很多。

💡 小提醒

請設計師在設計稿上把兩個數字都標出來：看得到的大小，和按得到的範圍。只標前者，工程師很可能就照圖案的大小去做。

還有一個例外要知道：這些數字主要是為手指訂的。滑鼠比手指準，所以 Material Design 另外給了滑鼠 44 的建議值。只在桌機上用的內部後台，表格裡的小按鈕可以密一點；但只要這個畫面會在手機上打開，就照手指的標準。

按鈕間距：靠太近一樣會按錯，危險動作要離得更遠

按鈕夠大，不代表不會按錯，兩顆貼在一起照樣會按到隔壁。Material Design 給的數字是：目標之間至少留 8 dp。

WCAG 2.2 的寫法比較特別，它把間距當成小按鈕的補救條件：不到 24 的目標，以它為中心畫一個直徑 24 的圓，只要這個圓不碰到別的目標、也不碰到別人的圓，就算通過。意思是按鈕可以小，但周圍要空。

不過補救有限度。Nielsen Norman Group 整理觸控研究後的建議是：觸控目標的實體大小至少要有 1 公分見方，而且要先夠大，再談間距。按鈕本身太小的話，把間距拉開也救不回來。

間距還有一個容易漏掉的用途：隔開後果差很多的動作。「儲存」旁邊緊貼著「刪除」，按錯一次就是一筆資料。微軟給 Windows 應用程式的設計指引寫得很直接：按錯後果嚴重的目標，四周要留更多空間，而且不要貼著內容區的邊緣。

按鈕對比：字對底色 4.5:1，按鈕外形對背景 3:1

對比值是兩個顏色亮度的比，從 1:1（完全一樣）到 21:1（黑配白）。按鈕要過兩關，管的是不同的東西。

用路牌想最快。第一關是牌子上的字跟牌面分不分得開，這決定你讀不讀得懂；第二關是牌子本身跟後面的樹分不分得開，這決定你找不找得到它。

第一關對應 WCAG 2.2 的 1.4.3「對比值（最小）」：文字對它的背景至少 4.5:1。大字可以放寬到 3:1，英文的標準是 18 pt 以上、或 14 pt 以上的粗體，中文字取相當的大小。按鈕上的字通常不大，所以抓 4.5:1 最保險。

第二關對應 1.4.11 非文字對比：辨識一個介面元件和它的狀態所需要的視覺資訊，對相鄰的顏色至少 3:1。如果使用者是靠那塊底色或那圈外框，才看得出「這裡有顆按鈕」，那塊底色或外框就要對背景達到 3:1。淺灰底配白色頁面的按鈕、細到快看不見的外框按鈕，最常栽在這一關。

這條準則有三個常被誤會的地方，W3C 的說明文件都寫了：

• 它不要求每顆按鈕都要有外框。只有文字、沒有底色也沒有框的按鈕可以通過，因為文字本身就足以讓人知道這是按鈕；但文字還是得過第一關。
• 停用中的按鈕不受對比要求。這不代表可以放心用，後面講狀態時會說明。
• 用鍵盤操作時的焦點框，一樣要有足夠的對比。

合規之外還有一層：找不找得到。只有外框、沒有底色的「幽靈按鈕」可以通過上面的準則，但 Nielsen Norman Group 的眼動研究找了 71 位受測者，比較九組只差在按鈕與連結樣式的頁面，結果可點擊訊號比較弱的版本，受測者找到目標平均多花 22% 的時間。這個實驗在桌機上做，量的只是「找到目標」這一段，研究者自己也說整個任務的差距會小一些。所以結論不是幽靈按鈕不能用，而是主要按鈕不適合做成幽靈按鈕。

另一條相關的準則是 1.4.1：不可以只靠顏色傳達資訊。刪除按鈕做成紅色沒問題，但不能只有紅色，還要有「刪除」兩個字或看得懂的圖示，因為有些人分不出紅和綠。

至於「哪個顏色的按鈕轉換率最高」，規範不管這件事，只問對比夠不夠、跟周圍分不分得開。按鈕用什麼顏色是品牌的決定，對比夠不夠才是驗收的項目。

怎麼驗：請設計師在設計稿上標出按鈕文字、按鈕底色、頁面背景三個色碼，丟進對比檢查工具（搜尋 contrast checker 就找得到）就會算出比值；網站做好之後，瀏覽器的開發者工具也查得到。

主要按鈕一個畫面只留一顆：主要、次要與危險動作的分法

行銷上說的 CTA 按鈕（行動呼籲按鈕），就是你最希望訪客按下去的那一顆：送出詢問、加入購物車、預約。它在設計上的名字叫「主要按鈕」。

四份彼此獨立的官方文件，在這一點上的寫法幾乎一樣。Apple 的寫法是一個畫面裡醒目的按鈕保持在一到兩顆，太多會增加認知負擔。Material Design 的按鈕指引提醒，最搶眼的填滿樣式要省著用，最好一頁只給一個動作。英國政府設計系統把理由也講了：主要的行動呼籲超過一個，每一個的效果都會變弱，使用者也更難判斷下一步，所以同一頁避免放多顆主要按鈕。日本數位廳的設計系統寫得最直接：重要度最高的主要按鈕，原則上一個畫面只用一顆。

每顆按鈕都做得一樣搶眼，等於沒有一顆是主要的。 像舞台上的聚光燈，打一盞，觀眾知道看哪裡；三盞同時打，反而看不出主角是誰。

實際的分法是三級：

• 主要按鈕：實心底色、最醒目，一個畫面一顆。
• 次要按鈕：只有外框，或顏色較淡，給「上一步」「存成草稿」這類動作。
• 最低一級：只有文字，給「取消」「略過」。

危險動作是例外。Apple 特別寫了：會造成資料損失的動作，就算它是最可能被按的那一顆，也不要給它主要按鈕的角色，因為醒目的按鈕常常沒被讀就按下去了。刪除、取消訂單這類按鈕，不要做成畫面上最醒目的那一顆。

CTA 按鈕文案：寫「按了會發生什麼」，不寫「確定」「了解更多」

Material Design 的文件有一句話很值得記：文字是按鈕最重要的部分，它描述的是按下去之後會發生的事。Apple 的建議是用動詞開頭，英國政府設計系統的說法是「描述它執行的動作」。

檢查方法只有一個：把按鈕以外的東西全部遮住，只看按鈕上的字，知不知道按下去會怎樣？ 對照幾組常見的寫法：

• 「送出」→「送出詢問單」
• 「確定」→「刪除這筆訂單」
• 「了解更多」→「看方案與費用」
• 「立即開始」→「建立帳號」

字數方面，Material Design 寫的是理想一到三個英文單字，不折行、不被截斷。中文沒有對應的官方字數，抓「一行放得下、動詞加受詞」就夠了。

籠統的文案會出什麼事，Nielsen Norman Group 做過易用性觀察。寫著「Get Started」（開始使用）的按鈕很容易被按，但受測者以為會先看到服務介紹，結果被直接帶進註冊流程或問卷。其中一個餐點外送網站，八位受測者有六位按了這顆按鈕，接著面對的是一連串要求註冊的視窗，卻沒有任何服務說明。研究者的結論是：連結是一種承諾，文案要明確說出使用者接下來會遇到什麼。要先講清楚，這是少數受測者的質性觀察，不是轉換率統計。

至於「按鈕文案改一個字，轉換率提高百分之幾」這類說法，這次找得到出處的多半是單一網站自己的測試，或是追不到原始資料的轉述，本文不採用。文案要不要改，用上面的遮住測試判斷就好。

只有圖示、沒有文字的按鈕更要注意。W3C 的無障礙實作指引要求按鈕要有一個名稱，讓螢幕報讀軟體唸得出來。前面提到三成首頁有的「空白按鈕」，多半就是只放了一個圖示、沒給名稱。

按鈕狀態：滑過、鍵盤焦點、按下、處理中與停用都要畫

設計稿上的按鈕通常只畫一種樣子，但一顆按鈕在實際使用時至少有六種：平常的樣子、滑鼠滑過、鍵盤移到它身上（焦點）、按下的瞬間、處理中、停用。沒畫的狀態，工程師只能自己猜，或是乾脆沒做。

其中三個最常出事。

焦點。 不用滑鼠、只用鍵盤的人，靠焦點框知道自己現在停在哪一顆。WCAG 2.2 的 2.4.7 要求鍵盤焦點看得見。很多網站為了好看，把瀏覽器預設的焦點框拿掉，卻沒有補上自己的。

處理中。 按下「送出」之後畫面沒反應，使用者會再按一次。Apple 的做法是在按鈕上顯示轉圈的指示，文字從「結帳」換成「結帳中……」。英國政府設計系統則提醒，重複點擊可能讓資料被送出兩次，按鈕可以設定成忽略第二次點擊，但伺服器端也要防。送出類的按鈕，按下之後一定要有反應，而且要擋住第二次送出。

停用。 表單沒填完就把送出按鈕變灰，是很常見的做法。問題是灰色按鈕對比很低，使用者看不出為什麼不能按。英國政府設計系統的建議是能不用就不用，除非研究顯示它真的讓介面更好懂。比較穩的做法是按鈕照常可以按，按下去之後明確指出哪一欄沒填。

這些狀態應該在設計稿交給工程師之前就畫好、標好。交付時還該附哪些規格，可以對照 UI/UX 設計流程的六階段產出物。

手機按鈕位置：拇指熱區圖不可靠，重要按鈕別塞角落

講到手機上的按鈕要放哪裡，很多文章會放一張「拇指熱區圖」：螢幕下半部是綠色好按區，上方角落是紅色難按區。回頭查這張圖的出處，結果跟一般的說法不太一樣。

它出自設計研究者 Steven Hoober 2013 年的一篇文章。他和幾位研究者在街頭、車站、咖啡店觀察了 1,333 個用手機的人，其中 780 人正在觸控螢幕：單手操作的佔 49%，一手托著、另一手點的佔 36%，雙手操作的佔 15%。文章裡附了幾張拇指可及範圍的示意圖，後來被大量轉載。

但 2017 年 2 月，作者本人在那篇文章底下留言說，那些圖不準確，請大家忽略，改看後來直接記錄觸控位置的研究。他同年發表的後續文章，直接把這種圖標成「廣為人知、但不正確」。新的觀察是：人會不自覺地一直換握法；點得最準的是螢幕中央，越靠近角落越不準，所以角落的目標要做得更大。 他給的數字是中央可以小到 7 公釐，角落大約要 12 公釐。這些是研究者個人的觀察與文獻整理，不是國際標準，但比那張熱區圖可靠。

對業主來說，可以帶走兩件事。第一，不要把最重要的按鈕塞在畫面角落；非放角落不可，就把它做大。 第二，位置好不好按，設計稿上看不出來，要拿真的手機、用真的手指去按。上線前的手機實機驗收該看哪些項目，可以對照手機網站設計的驗收重點。

台灣網站無障礙規範對按鈕的要求：2026 年 11 月 30 日生效

前面講的 WCAG 是國際標準。台灣自己的版本叫「網站無障礙規範」，由數位發展部主管。數位發展部在 2026 年 5 月 29 日發布修正版，刊登在行政院公報。修正版自 2026 年 11 月 30 日生效，共有 87 項成功準則，參考標準寫的是 WCAG 2.2。

跟按鈕直接有關的條文，內容跟國際版一致：

• 成功準則 2.5.8「目標尺寸（最小）」，檢測等級 AA：指標輸入的目標至少 24×24 CSS 像素，並列了間距、等效、行內等例外。
• 成功準則 2.5.5「目標尺寸（加強）」，檢測等級 AAA：44×44 CSS 像素。
• 成功準則 1.4.3 與 1.4.11：文字對比 4.5:1、非文字對比 3:1，都是 AA。

⚠️ 注意

這份規範不是所有網站的法定義務。身心障礙者權益保障法第 52 條之 2 規定的對象，是各級政府及其附屬機關（構）、學校所建置的網站。一般公司的官網不在條文裡。

那民間企業需不需要理它？兩種情況值得照著做。一是你會承接公部門或學校的網站案子，驗收就是照這份規範。二是你的客人裡有不少長輩，按鈕大一點、對比高一點，他們才用得順。誰有義務、標章分哪幾級，無障礙網站的規範與標章等級那一篇有完整說明。

如果要把無障礙寫進合約或需求規格，寫清楚版本和等級，例如「符合 WCAG 2.2 AA」，不要只寫「符合無障礙」。 少了版本和等級，24×24 這一條算不算在驗收範圍裡，雙方會各說各話。

還有一點容易漏掉：AA 等級只要求 24。想讓主要按鈕做到 44 以上，要另外寫進規格，「符合 AA」不會自動給你 44。

按鈕設計驗收表：六項規格加一次實機測試

把前面的內容收成一張表。拿到設計稿，或是網站做好要驗收時，逐項對：

前六項在設計稿階段就能驗，最後一項要等做出來、拿到手機上才驗得到。

哪些可以讓步？只在桌機上用的內部系統，尺寸可以照滑鼠的標準縮小一點；品牌色對比不夠的時候，可以只在按鈕上用深一階的顏色，不必整套換掉。不該讓步的是手機上的主要按鈕尺寸、文字對比，還有送出之後的回饋，這三樣直接決定訪客能不能把事情做完。

規格訂好之後，把它收進共用的元件庫，也就是 UI 設計裡說的設計系統，之後每一頁都用同一顆按鈕，就不用每次改版重新吵一次。

如果你手上正好有一份設計稿要驗收，或是想把這些規格寫進新網站、App 的需求裡，瞻新資訊可以陪你逐項對過，把模糊的「好按一點」變成寫得進合約的數字。

常見問題

參考資料

• Understanding SC 2.5.8: Target Size (Minimum) — W3C Web Accessibility Initiative（英文，國際標準的說明文件，2026-10-12 查證）
• Understanding SC 1.4.11: Non-text Contrast — W3C Web Accessibility Initiative（英文，國際標準的說明文件，2026-10-12 查證）
• Web Content Accessibility Guidelines (WCAG) 2.2 — W3C Recommendation，2023-10-05 發布、2024-12-12 更新（英文，國際標準，2026-10-12 查證）
• Button Pattern — W3C ARIA Authoring Practices Guide（英文，國際，無障礙實作指引，2026-10-12 查證）
• Buttons — Apple Human Interface Guidelines（英文，美國，平台官方設計指引，2026-10-12 查證）
• Accessibility designing: Structure — Google Material Design 3（英文，美國，平台官方設計指引，2026-10-12 查證）
• Buttons: Guidelines — Google Material Design 3（英文，美國，平台官方設計指引，2026-10-12 查證）
• Accessible tap targets — Google web.dev，2020-03-31 更新（英文，美國，官方開發者指引，2026-10-12 查證）
• Targeting — Microsoft Learn，2026-09 更新（英文，美國，平台官方設計指引，2026-10-12 查證）
• Button — GOV.UK Design System（英文，英國，政府設計系統，2026-10-12 查證）
• ボタン（Button） — デジタル庁デザインシステム（日本數位廳設計系統），2024-09-10 更新（日文，日本，政府設計系統，2026-10-12 查證）
• Touch Targets on Touchscreens — Nielsen Norman Group，Aurora Harley，2019-05-05（英文，美國，研究機構文章，2026-10-12 查證）
• “Get Started” Stops Users — Nielsen Norman Group，Aurora Harley、Kim Flaherty，2017-08-20（英文，美國，質性易用性研究，2026-10-12 查證）
• Flat UI Elements Attract Less Attention and Cause Uncertainty — Nielsen Norman Group，Kate Moran，2017-09-03（英文，美國，眼動實驗研究，2026-10-12 查證）
• How Do Users Really Hold Mobile Devices? — UXmatters，Steven Hoober，2013-02-18；作者 2017-02-28 於同頁留言更正示意圖（英文，美國，研究者的實地觀察，2026-10-12 查證）
• Design for Fingers, Touch, and People, Part 1 — UXmatters，Steven Hoober，2017-03-06（英文，美國，研究者的實地觀察與文獻整理，2026-10-12 查證）
• The WebAIM Million：2026 年報告 — WebAIM，猶他州立大學，2026-03-30 更新（英文，美國，年度實測報告，2026-10-12 查證）
• 數位發展部令：修正「網站無障礙規範」（數位政府字第 11540006711 號） — 行政院公報第 032 卷第 097 期，2026-05-29（繁體中文，台灣，政府公報，2026-10-12 查證）
• 身心障礙者權益保障法第 52 條之 2 — 全國法規資料庫（繁體中文，台灣，法條，2026-10-12 查證）

ℹ️ 關於本文

本文引用的 WCAG 2.2、Apple 人機介面指南、Material Design、英國政府設計系統、日本數位廳設計系統、微軟設計指引與各項研究，以查閱當日（2026 年 10 月 12 日）的版本為準；平台指引與無障礙標準會更新，實際請以各來源的最新內容為準。台灣修正版「網站無障礙規範」的條文與生效日依行政院公報 2026 年 5 月 29 日刊登的內容，檢測與標章的實際做法請以數位發展部的公告為準。文中對尺寸、對比、文案與位置的建議屬一般性的實務經驗整理，實際情形會因產品類型、使用者與裝置而有明顯差異，不構成任何通過無障礙檢測、提升轉換率或成效的保證。