Cách kiểm tra độ tương phản màu cho khả năng tiếp cận
Khoảng 1 trong 12 đàn ông và 1 trong 200 phụ nữ có một dạng khiếm thị màu sắc. Hàng triệu người khác có thị lực kém, mắt già hoặc nhìn vào màn hình của họ dưới ánh nắng mặt trời. Nếu văn bản của bạn không có đủ độ tương phản với nền, những người này không thể đọc nó.
Độ tương phản màu không phải là « điểm cộng » — đó là yêu cầu cốt lõi của khả năng tiếp cận.
WCAG yêu cầu gì
Web Content Accessibility Guidelines (WCAG) xác định tỷ lệ tương phản tối thiểu giữa văn bản và nền:
| Cấp | Văn bản thường | Văn bản lớn | Phần tử không phải văn bản |
|---|---|---|---|
| AA (tối thiểu) | 4,5:1 | 3:1 | 3:1 |
| AAA (nâng cao) | 7:1 | 4,5:1 | — |
« Văn bản lớn » có nghĩa là 18 px đậm hoặc 24 px thường trở lên.
Tỷ lệ tương phản đi từ 1:1 (không có tương phản — trắng trên trắng) đến 21:1 (tương phản tối đa — đen trên trắng).
Cách kiểm tra độ tương phản
- Chọn màu sắc của bạn — nhập màu văn bản (tiền cảnh) và màu nền qua các mã HEX, giá trị RGB hoặc bộ chọn.
- Xem kết quả — công cụ ngay lập tức hiển thị tỷ lệ tương phản và liệu kết hợp của bạn có đạt WCAG AA và AAA cho văn bản thường và lớn hay không.
- Điều chỉnh nếu cần — nếu độ tương phản không đạt, hãy làm tối văn bản hoặc làm sáng nền (hoặc ngược lại) cho đến khi đạt mức yêu cầu.
Các lỗi tương phản phổ biến
Văn bản xám nhạt trên nền trắng — #999999 trên #ffffff chỉ có tỷ lệ 2,8:1. Điều này thất bại với WCAG AA. Có thể trông « tinh tế » đối với một nhà thiết kế có thị lực hoàn hảo, nhưng nó không thể đọc được đối với nhiều người.
Văn bản có màu trên nền có màu — một nút màu xanh dương với văn bản trắng thường đạt, nhưng một nút màu xanh lá với văn bản trắng thì không. Luôn xác minh — không thể đánh giá tỷ lệ tương phản bằng mắt.
Văn bản gợi ý — các văn bản gợi ý của trường nổi tiếng là yếu về độ tương phản. Mặc dù WCAG không áp đặt nó nghiêm ngặt, người dùng vẫn phải đọc chúng.
Chế độ tối — các nhà thiết kế thường sử dụng xám trung bình trên xám đậm để có vẻ « tinh tế ». Điều này thường thất bại các kiểm tra độ tương phản.
Mẹo
- Xác minh mỗi kết hợp văn bản/nền — đừng giả định gì cả. Ngay cả các nhà thiết kế có kinh nghiệm cũng ngạc nhiên bởi các kết hợp thất bại.
- Kiểm tra cả hai chủ đề — nếu trang web của bạn có chế độ sáng và chế độ tối, hãy xác minh độ tương phản trong cả hai. Một màu hoạt động trên nền trắng có thể thất bại trên xám đậm.
- Sử dụng màu thương hiệu của bạn một cách khôn ngoan — nếu màu xanh thương hiệu của bạn thất bại làm màu văn bản, hãy sử dụng nó cho các phần tử lớn hơn (nút, tiêu đề) nơi ngưỡng « văn bản lớn » (3:1) áp dụng, và sử dụng một sắc thái tối hơn cho văn bản nội dung.
- Đừng chỉ dựa vào màu sắc — ngoài độ tương phản đủ, đừng bao giờ truyền tải thông tin chỉ qua màu sắc. Sử dụng biểu tượng, nhãn hoặc mẫu bổ sung.
Câu hỏi thường gặp
Nên nhắm tỷ lệ tương phản nào?
Đối với văn bản thường, hãy nhắm ít nhất 4,5:1 (WCAG AA). Đối với văn bản lớn (18 px đậm hoặc 24 px thường), 3:1 là đủ. Đối với mức tiếp cận cao nhất (AAA), nhắm 7:1 cho văn bản thường.
Điều này chỉ áp dụng cho văn bản?
Không. WCAG 2.1 cũng yêu cầu độ tương phản đủ cho các thành phần giao diện và đối tượng đồ họa (biểu tượng, viền trường, chỉ báo lấy nét). Mức tối thiểu cho các phần tử không phải văn bản là 3:1.
Còn ở chế độ tối thì sao?
Chế độ tối yêu cầu cùng các kiểm tra độ tương phản. Văn bản trắng trên nền tối thường đạt dễ dàng, nhưng văn bản xám trên nền xám đậm thường thất bại. Kiểm tra cả hai chế độ.
Độ tương phản màu có phải là yêu cầu pháp lý không?
Ở nhiều khu vực pháp lý, có. ADA (US), EN 301 549 (EU) và các luật tương tự áp đặt khả năng tiếp cận kỹ thuật số. Tuân thủ WCAG là tiêu chuẩn được công nhận để đáp ứng chúng.