Thiết kế dễ tiếp cận (Accessibility): Tương phản màu, cỡ chữ và tiêu chuẩn WCAG

Có một nhóm người dùng mà sinh viên gần như không bao giờ nghĩ tới khi làm đồ án: người khiếm thị, người mù màu, người lớn tuổi mắt kém, người bị hạn chế vận động tay, và cả người dùng bình thường đang đứng ngoài nắng nhìn màn hình điện thoại.

Accessibility (viết tắt là a11y) là việc thiết kế sao cho càng nhiều người dùng được càng tốt. Đây không phải một tính năng thêm vào cuối, mà là một tiêu chuẩn chất lượng — và ở nhiều công ty, đây là yêu cầu bắt buộc khi tuyển dụng.

Tin vui cho sinh viên: chỉ cần nắm vài quy tắc đơn giản, bạn đã đáp ứng phần lớn yêu cầu, và đây là điểm cộng rất dễ ghi khi bảo vệ đồ án.

WCAG là gì và ba mức A, AA, AAA

WCAG (Web Content Accessibility Guidelines) là bộ hướng dẫn do W3C ban hành, hiện ở phiên bản 2.2. Nó chia thành ba mức:

Mức	Ý nghĩa	Áp dụng khi
A	Yêu cầu tối thiểu	Mức sàn, không nên dừng ở đây
AA	Tiêu chuẩn phổ biến	Mục tiêu thực tế của hầu hết sản phẩm
AAA	Nâng cao	Cho sản phẩm chuyên biệt hoặc phục vụ người khuyết tật

Trong thực tế, AA là mức bạn nên nhắm tới. Bốn nguyên tắc nền tảng của WCAG (viết tắt POUR): nội dung phải nhận biết được, thao tác được, hiểu được và tương thích với các công nghệ hỗ trợ.

Tương phản màu — quy tắc quan trọng nhất

Đây là yêu cầu bị vi phạm nhiều nhất và cũng dễ sửa nhất.

Loại nội dung	Tỷ lệ tối thiểu (mức AA)
Chữ thường (dưới 24px, hoặc dưới 18.66px nếu in đậm)	4.5:1
Chữ lớn (từ 24px, hoặc 18.66px in đậm trở lên)	3:1
Thành phần giao diện: viền ô nhập, icon mang thông tin	3:1
Chữ ở mức AAA	7:1

Tỷ lệ tương phản đo chênh lệch độ sáng cảm nhận giữa hai màu, chạy từ 1:1 (hai màu giống hệt) đến 21:1 (đen trên trắng).

Điều quan trọng cần hiểu: hai màu rất khác nhau trên bánh xe màu vẫn có thể có tương phản rất thấp nếu độ sáng của chúng gần nhau. Ví dụ chữ vàng trên nền trắng — khác hue hoàn toàn nhưng gần như không đọc được.

Những lỗi tương phản hay gặp trong đồ án:

Chữ xám nhạt (#999999) trên nền trắng — chỉ đạt khoảng 2.8:1, không đạt chuẩn.
Chữ trắng trên nền màu pastel.
Chữ đặt trên ảnh không có lớp phủ.
Chữ placeholder trong ô nhập quá mờ.
Nút bấm màu nhạt với chữ trắng.

Cách kiểm tra: dùng công cụ đo tương phản (WebAIM Contrast Checker, plugin Stark trong Figma, hoặc công cụ Lighthouse tích hợp trong trình duyệt). Nhập hai mã màu và đọc kết quả — mất khoảng 10 giây cho mỗi cặp màu.

Đừng dùng riêng màu sắc để truyền đạt thông tin

Khoảng 8% nam giới và 0.5% nữ giới bị rối loạn phân biệt màu ở một mức độ nào đó, phổ biến nhất là khó phân biệt đỏ và lục.

Vi phạm điển hình:

Biểu đồ với chú thích "đường màu đỏ là doanh thu, đường màu xanh là chi phí".
Ô nhập báo lỗi chỉ bằng cách đổi viền sang màu đỏ.
Trạng thái "còn hàng / hết hàng" chỉ thể hiện bằng chấm tròn xanh hoặc đỏ.

Cách sửa:

Thêm nhãn chữ hoặc icon bên cạnh màu.
Trong biểu đồ, dùng thêm kiểu đường (liền, đứt, chấm) hoặc gắn nhãn trực tiếp lên đường.
Với thông báo lỗi, kèm icon và câu chữ mô tả cụ thể.

Cách kiểm tra nhanh: chuyển bản thiết kế sang thang xám. Nếu vẫn phân biệt được mọi thông tin, bạn đã đạt. Đây cũng chính là bài kiểm tra giúp cải thiện phân cấp thị giác.

Cỡ chữ, khoảng cách và khả năng đọc

Cỡ chữ nội dung tối thiểu 16px trên web. Nhỏ hơn buộc người dùng phóng to.
Chiều cao dòng tối thiểu 1.5 cho đoạn văn.
Không chặn thao tác phóng to trên trình duyệt di động — đây là lỗi kỹ thuật rất phổ biến.
Nội dung phải còn dùng được khi phóng to 200%: chữ không bị cắt, không chồng lên nhau.
Độ dài dòng 45–75 ký tự để mắt không bị mỏi.

Xem thêm bài Typography cơ bản.

Thao tác được: chuột, phím và ngón tay

Vùng chạm: trên di động, mọi mục tiêu chạm nên đạt tối thiểu khoảng 44×44px và cách nhau đủ để không bấm nhầm. Hai liên kết nằm sát nhau trong một dòng chữ là ác mộng với người có tay run.

Điều hướng bằng bàn phím: người không dùng được chuột sẽ dùng phím Tab. Yêu cầu:

Mọi phần tử tương tác phải tới được bằng Tab.
Phải có viền focus nhìn thấy rõ. Đừng bao giờ xóa viền focus chỉ vì thấy xấu — hãy thiết kế một viền focus đẹp hơn.
Thứ tự Tab phải hợp lý, đi theo trình tự đọc.

Không phụ thuộc vào di chuột: thông tin chỉ hiện khi rê chuột sẽ hoàn toàn vô hình trên điện thoại.

Nội dung phi văn bản

Ảnh cần văn bản thay thế (alt text): mô tả nội dung ảnh cho phần mềm đọc màn hình. Ảnh chỉ mang tính trang trí thì để alt rỗng.
Video cần phụ đề: có lợi cho cả người khiếm thính lẫn người xem ở nơi ồn ào.
Icon đứng một mình cần nhãn: một icon hình bánh răng không kèm chữ sẽ được đọc thành "hình ảnh" nếu thiếu nhãn.

Cách viết alt text tốt: mô tả điều ảnh truyền đạt trong ngữ cảnh đó. "Biểu đồ cột cho thấy số sinh viên đăng ký tăng từ 120 lên 340 trong ba năm" tốt hơn nhiều so với "biểu đồ".

Cấu trúc nội dung

Dùng đúng cấp tiêu đề (H1 → H2 → H3), không nhảy cóc và không dùng tiêu đề chỉ để làm chữ to.
Nhãn phải gắn với ô nhập, không dùng chữ placeholder thay cho nhãn — placeholder biến mất ngay khi người dùng bắt đầu gõ.
Chữ trên liên kết phải có nghĩa khi đứng riêng. "Xem hướng dẫn tính GPA" tốt hơn "Bấm vào đây".

Checklist kiểm tra nhanh trước khi nộp đồ án

#	Hạng mục	Đạt?
1	Mọi cặp chữ/nền đạt tối thiểu 4.5:1	☐
2	Chuyển sang đen trắng vẫn hiểu được mọi thông tin	☐
3	Cỡ chữ nội dung từ 16px trở lên	☐
4	Vùng chạm tối thiểu 44×44px	☐
5	Bấm Tab đi hết được các phần tử, có viền focus rõ	☐
6	Ảnh có alt text, icon có nhãn	☐
7	Thông báo lỗi có chữ, không chỉ có màu	☐
8	Phóng to 200% vẫn dùng được	☐
9	Cấp tiêu đề đúng thứ tự	☐
10	Video có phụ đề	☐

Chỉ cần đạt 10 mục này, đồ án của bạn đã tốt hơn phần lớn website đang hoạt động ngoài thực tế.

Câu hỏi thường gặp

Accessibility có làm thiết kế xấu đi không?

Không. Ràng buộc về tương phản và cỡ chữ thường buộc bạn đơn giản hóa và làm rõ phân cấp — kết quả thường đẹp hơn chứ không xấu đi. Rất nhiều thiết kế được khen "sạch sẽ, dễ đọc" chính là nhờ tuân thủ những ràng buộc này.

Chữ xám nhạt trông rất tinh tế, có nhất định phải bỏ không?

Bạn có thể dùng xám cho chữ phụ, miễn là vẫn đạt 4.5:1. Trên nền trắng, xám khoảng #595959 vẫn đạt chuẩn và trông vẫn nhẹ nhàng. Vấn đề nằm ở những mức xám nhạt hơn thế.

Làm accessibility có tốn nhiều thời gian không?

Nếu làm ngay từ đầu (khi chọn bảng màu và cỡ chữ), gần như không tốn thêm thời gian. Nếu để đến cuối mới sửa, bạn phải rà lại toàn bộ giao diện — đó mới là phần tốn kém.

Đồ án sinh viên có bắt buộc tuân thủ WCAG không?

Thường không bắt buộc, nhưng đưa phần kiểm tra accessibility vào báo cáo là cách rất hiệu quả để tạo khác biệt. Nó cho thấy bạn hiểu tiêu chuẩn nghề nghiệp chứ không chỉ biết vẽ đẹp.

Có công cụ nào kiểm tra tự động không?

Có: Lighthouse (tích hợp sẵn trong trình duyệt Chrome), axe DevTools, WAVE cho website; plugin Stark hoặc Contrast cho Figma. Lưu ý công cụ tự động chỉ phát hiện được khoảng một phần ba vấn đề — phần còn lại cần kiểm tra thủ công, đặc biệt là chất lượng alt text và thứ tự điều hướng.

Thiết kế cho người mù màu thì chọn màu thế nào?

Tránh dựa vào cặp đỏ–lục để phân biệt. An toàn hơn là dùng cặp có chênh lệch độ sáng rõ, hoặc kết hợp xanh dương với cam. Và luôn kèm nhãn chữ hoặc kiểu nét, đừng để màu là tín hiệu duy nhất.

Nguồn tham khảo

Kết luận

Thiết kế dễ tiếp cận không phải là làm sản phẩm riêng cho người khuyết tật, mà là làm sản phẩm dùng được cho nhiều người hơn — kể cả bạn, khi đang xem điện thoại dưới nắng hoặc đọc màn hình lúc mắt đã mỏi.

Hãy bắt đầu từ đúng một việc: kiểm tra tương phản màu trong đồ án hiện tại. Đó là thay đổi tốn ít công nhất nhưng tạo ra khác biệt lớn nhất.