Đăng ký để truy cập
Đăng ký để đọc phần hướng dẫn thực hành chi tiết, bao gồm cách chọn màu, kiểm tra thành phần giao diện và đánh giá trên thiết bị thật.
Tỉ lệ tương phản cho biết nội dung trên trang có đủ nổi bật so với nền hay không. Với văn bản, nút bấm, biểu tượng và các phần thông tin quan trọng, tương phản thấp có thể khiến người đọc phải căng mắt, bỏ lỡ nội dung hoặc không nhận ra thao tác cần thực hiện.
Vì vậy, khi thiết kế website, tương phản không chỉ là vấn đề thẩm mỹ. Đây là một phần của khả năng tiếp cận web dựa trên WCAG, giúp nội dung dễ đọc hơn cho người có thị lực yếu, người cao tuổi, người bị mỏi mắt, người xem màn hình ngoài trời hoặc người đang dùng thiết bị trong điều kiện ánh sáng không lý tưởng.
Chỉ số tương phản là gì?
Chỉ số, hay tỉ lệ tương phản, là cách đo mức chênh lệch độ sáng giữa màu ở tiền cảnh và màu nền. Tiền cảnh thường là chữ, biểu tượng, đường viền, nút bấm hoặc phần đồ họa mang thông tin. Nền là màu nằm phía sau các yếu tố đó.
Tỉ lệ này được viết dưới dạng 1:1 đến 21:1. 1:1 nghĩa là hai màu gần như không có chênh lệch, chẳng hạn chữ trắng trên nền trắng. 21:1 là mức tương phản cao nhất, chẳng hạn chữ trắng trên nền đen hoặc chữ đen trên nền trắng.
Nói đơn giản, tỉ lệ càng cao thì người đọc càng dễ phân biệt nội dung chính với nền. Tuy nhiên, mục tiêu không phải lúc nào cũng là dùng màu tương phản mạnh nhất, mà là bảo đảm nội dung quan trọng đủ rõ trong bối cảnh sử dụng thực tế.
Các mốc tương phản thường dùng trong WCAG
Trong thiết kế giao diện, các mốc dưới đây thường được dùng để kiểm tra văn bản và phần tử trực quan quan trọng. Chúng giúp nhóm thiết kế có một tiêu chuẩn cụ thể thay vì chỉ đánh giá bằng cảm giác.
| Đối tượng cần kiểm tra | Mốc nên đạt | Cách hiểu nhanh |
|---|---|---|
| Văn bản thông thường | Tối thiểu 4,5:1 | Áp dụng cho phần lớn nội dung bài viết, mô tả, nhãn biểu mẫu và văn bản trên nút. |
| Văn bản lớn | Tối thiểu 3:1 | Áp dụng cho chữ đủ lớn hoặc chữ lớn in đậm, vì kích thước giúp người đọc nhận diện dễ hơn. |
| Yếu tố không phải văn bản | Thường dùng mốc 3:1 khi yếu tố truyền tải thông tin | Áp dụng cho biểu tượng, đường viền ô nhập liệu, trạng thái chọn, đồ thị hoặc nút không chỉ dựa vào chữ. |
| Trang trí thuần túy | Không nhất thiết áp cùng mốc | Chỉ nên xem là trang trí khi việc bỏ yếu tố đó không làm mất thông tin hoặc chức năng. |
Nếu muốn tìm hiểu sâu hơn về tiêu chí văn bản, có thể xem thêm bài viết về WCAG 1.4.3 Tương phản tối thiểu. Với biểu tượng, viền và thành phần giao diện, bài viết về độ tương phản không phải văn bản sẽ phù hợp hơn.
Vì sao tương phản quan trọng trong trải nghiệm người dùng?
Tương phản thấp thường không làm hỏng bố cục ngay lập tức, nhưng nó làm tăng chi phí đọc. Người dùng phải nhìn kỹ hơn, đoán nội dung nhiều hơn và dễ bỏ qua thông tin quan trọng hơn.
- Hỗ trợ người có vấn đề về thị giác: Người bị suy giảm thị lực, mù màu, đục thủy tinh thể hoặc nhạy cảm với ánh sáng có thể gặp khó khăn khi chữ và nền quá gần nhau về độ sáng.
- Giúp người cao tuổi đọc dễ hơn: Thị lực và khả năng nhận biết tương phản có thể giảm theo tuổi tác, nên văn bản rõ ràng giúp giảm mệt mỏi khi đọc.
- Ổn định trong nhiều môi trường: Màn hình nhỏ, ánh sáng ngoài trời, phản chiếu trên kính hoặc chế độ tiết kiệm pin đều có thể làm nội dung kém rõ hơn.
- Giảm lỗi thao tác: Nút bấm, liên kết, ô nhập liệu và trạng thái lỗi cần đủ rõ để người dùng nhận ra nơi cần chú ý.
Cách thiết lập tỉ lệ tương phản phù hợp
Không nên đợi đến cuối dự án mới kiểm tra tương phản. Cách làm hiệu quả hơn là kiểm tra ngay từ lúc chọn bảng màu, sau đó kiểm tra lại khi giao diện có nội dung thật.
1. Kiểm tra màu chữ và màu nền bằng công cụ đo
Hãy nhập mã màu chữ và màu nền vào công cụ như WebAIM Contrast Checker hoặc Accessible Colors để biết cặp màu có đạt mốc cần thiết hay không. Cách này đáng tin cậy hơn việc chỉ nhìn bằng mắt, vì cảm giác “đủ rõ” có thể thay đổi theo màn hình, ánh sáng và thị lực của từng người.
Chúng tôi đã phát hành UUU Web Accessibility Widget Tool, công cụ giúp triển khai hỗ trợ khả năng truy cập web dễ dàng hơn. Nếu bạn đang muốn cải thiện khả năng truy cập của website, hãy xem thêm thông tin chi tiết.