Trên điện thoại, đầu ngón tay che một vùng rộng khoảng 8–10mm, lớn hơn nhiều so với con trỏ chuột. Khi nút bấm hoặc liên kết quá nhỏ, ngón tay không nhắm trúng — người dùng bấm nhầm sang phần tử bên cạnh, hoặc phải bấm lại nhiều lần. Đây không phải lỗi “ngón tay to” (fat finger), mà là lỗi của vùng chạm quá hẹp. Bài này nêu các con số chuẩn, ghi rõ nguồn từng con số, để bạn biết đặt bao nhiêu là đủ.
Phân biệt vùng chạm và phần nhìn thấy
Điểm dễ nhầm nhất: kích thước touch target không bằng kích thước icon hiển thị. Một icon trông chỉ 24×24 px vẫn có thể có vùng chạm 48×48 px nếu bạn thêm padding (đệm — khoảng trống bao quanh) xung quanh. Material Design mô tả đúng điều này: phần nhìn thấy có thể nhỏ, nhưng vùng nhận chạm phải đủ lớn nhờ lớp đệm bao ngoài.
Vì vậy khi đo, bạn đo vùng phản hồi chạm thật (thường là kích thước nút gồm cả padding), không đo riêng hình vẽ bên trong. Một liên kết text trong câu văn cũng được miễn yêu cầu — vì nó nằm trong dòng chữ, không phải nút độc lập.
Ba con số chuẩn và nguồn của chúng
Có ba mốc kích thước hay được nhắc, đến từ ba nguồn khác nhau. Đừng trộn lẫn — mỗi con số có vai trò riêng:
| Nguồn | Kích thước tối thiểu | Tính chất |
|---|---|---|
| WCAG 2.2 — SC 2.5.8 (mức AA) | 24×24 px CSS | Sàn pháp lý/tiêu chuẩn, mức tối thiểu |
| Apple Human Interface Guidelines | 44×44 pt | Khuyến nghị nền tảng iOS |
| Material Design 3 (Android) | 48×48 dp | Khuyến nghị nền tảng Android |
| WCAG 2.5.5 (mức AAA) | 44×44 px CSS | Mức cao hơn, không bắt buộc |
24×24 px — sàn của WCAG 2.2
Tiêu chí 2.5.8 Target Size (Minimum) là quy định mới của WCAG 2.2, mức AA, yêu cầu mọi phần tử bấm/chạm có vùng tối thiểu 24×24 px CSS. Đây là sàn — mức thấp nhất được chấp nhận để đạt chuẩn, không phải mức lý tưởng. Tiêu chí này có ngoại lệ: nếu các target nhỏ hơn 24px nhưng cách nhau ít nhất 24px (đo theo độ lệch giữa tâm các vùng), hoặc nằm trong câu văn, thì vẫn đạt.
44pt (Apple) và 48dp (Material) — khuyến nghị nền tảng
Apple khuyến nghị tối thiểu 44×44 point; Material Design khuyến nghị 48×48 dp — tương đương khoảng 9mm vật lý bất kể độ phân giải màn hình. Hai con số này cao hơn sàn WCAG 2.2 và xấp xỉ mức AAA (44px). Lưu ý đơn vị: pt của Apple và dp của Android là đơn vị độc lập mật độ điểm ảnh, không phải px thuần — nhưng trên thực tế quy đổi gần tương đương để bạn hình dung.
Khuyến nghị thực dụng: lấy 44–48 px làm mốc thiết kế mặc định cho nút và liên kết quan trọng trên giao diện chạm, dùng 24px chỉ như mức tối thiểu tuyệt đối khi không gian quá chật.
Khoảng cách giữa các vùng chạm
Kích thước đủ chưa chắc đã hết bấm nhầm — hai nút to đặt sát nhau vẫn gây “trượt tay” sang nút bên cạnh. Cần khoảng trống giữa các target:
- Material Design: các touch target nên cách nhau từ 8dp trở lên.
- Apple: tối thiểu 8pt giữa các phần tử kề nhau, và 16pt trở lên cho nhóm điều khiển dùng thường xuyên.
- NN/G (Nielsen Norman Group): nên có ít nhất 8–16 px khoảng trống giữa các vùng chạm thật của phần tử kề nhau để giảm khả năng trượt tay.
NN/G nhấn mạnh rằng phần tử tương tác nên đạt cỡ 1cm × 1cm (~0,4 inch) để đủ thời gian nhắm và tránh lỗi bấm nhầm — quy ra pixel rơi vào khoảng 44px, lớn hơn cho nút hành động chính (primary CTA — nút kêu gọi hành động chính).
Checklist áp dụng nhanh
- Nút và liên kết độc lập trên mobile: đặt vùng chạm ≥ 44–48 px. Tối thiểu tuyệt đối 24px (WCAG 2.2 AA).
- Icon nhỏ (đóng popup, nút back, ô tick): đừng để icon trần — bọc padding cho vùng chạm đạt mốc, dù hình vẽ chỉ 24px.
- Giữ khoảng trống ≥ 8px giữa các target sát nhau; ≥ 16px cho nhóm bấm nhiều như thanh điều hướng.
- Kiểm tra trên thiết bị thật, dùng ngón cái — không chỉ rê chuột trên desktop.
- Đo vùng phản hồi chạm thật, không đo riêng kích thước icon hiển thị.
Góc thực chiến từ Web22
Khi Web22 vừa thiết kế vừa lập trình một giao diện, các mốc kích thước trên được đưa thẳng vào component tái dùng trong theme — ví dụ nút và ô chạm có một padding tối thiểu cố định để mọi nơi dùng lại đều đạt vùng chạm chuẩn, thay vì căn tay từng nút. Đây cũng là lúc design system phát huy: định nghĩa kích thước nút một lần, mọi màn hình thừa hưởng. Việc tuân thủ kích thước touch target nằm trong khung accessibility (khả năng tiếp cận) rộng hơn, và liên quan trực tiếp tới tư duy thiết kế mobile-first.
Câu hỏi thường gặp
24px hay 44px mới là chuẩn đúng?
Cả hai, tùy vai trò: 24px là sàn pháp lý của WCAG 2.2 mức AA, còn 44–48px là khuyến nghị nền tảng (Apple/Material) cho trải nghiệm tốt. Dùng 44–48px làm mặc định, 24px chỉ khi quá chật.
Vùng chạm có cần bằng đúng kích thước icon không?
Không. Icon có thể nhỏ, nhưng padding bao quanh phải nâng vùng nhận chạm lên đủ mốc tối thiểu.
Liên kết text trong đoạn văn có phải đạt 24px không?
Không bắt buộc. WCAG 2.2 miễn yêu cầu kích thước cho liên kết nằm trong câu hoặc khối văn bản.
Cần dựng giao diện chuẩn vùng chạm và khả năng tiếp cận ngay từ component, Web22 nhận thiết kế giao diện website kèm phần lập trình để bản thiết kế ra đúng như khi chạy.