Vì sao có màu khó đọc?
Mắt nhận ra chữ nhờ sự khác nhau giữa sáng và tối. Hai màu có độ sáng gần nhau thì chữ như chìm vào nền, dù hai màu khác hẳn nhau.
Chữ vàng trên nền trắng rất khó đọc. Chữ xanh đậm trên nền trắng thì rõ ràng.
Dữ liệu ví dụ
Màu chữ và màu nền vừa đủ khác nhau sẽ giúp mọi người, từ bạn nhỏ đến ông bà, đọc dễ dàng hơn.
Bấm “Thử ngay” để đưa ví dụ vào bản xem trước. Bạn có thể bấm Hoàn tác.
Thử chữ nhỏ và chữ lớn
Với cùng một cặp màu, chữ to hoặc đậm dễ đọc hơn chữ nhỏ. Tỷ lệ tương phản không đổi khi đổi cỡ chữ, chỉ có mức yêu cầu thay đổi.
Chữ lớn là chữ từ 24 px, hoặc từ 18,67 px khi in đậm. Chữ lớn cần tỷ lệ từ 3:1, chữ thường cần từ 4,5:1.
Dữ liệu ví dụ
Màu chữ và màu nền vừa đủ khác nhau sẽ giúp mọi người, từ bạn nhỏ đến ông bà, đọc dễ dàng hơn.
Bấm “Thử ngay” để đưa ví dụ vào bản xem trước. Bạn có thể bấm Hoàn tác.
Thử nút bấm và biểu tượng
Một nút bấm có hai phần cần nhìn rõ: chữ trên nút, và đường viền hay hình biểu tượng giúp nhận ra nút.
Chữ trên nút được tính như chữ thường hoặc chữ lớn. Viền và biểu tượng cần từ 3:1 so với màu ngay cạnh. Hình chỉ để trang trí thì không bắt buộc.
Dữ liệu ví dụ
Xem thêm
Bấm “Thử ngay” để đưa ví dụ vào bản xem trước. Bạn có thể bấm Hoàn tác.
Hiểu kết quả kiểm tra
“Dễ đọc” nghĩa là cặp màu đạt mức AA cho chữ thường (từ 4,5:1). “Chỉ nên dùng cho chữ lớn” nghĩa là chỉ đạt mức AA cho chữ lớn (từ 3:1). “Khó đọc” là dưới 3:1.
WCAG 2.2 là bộ hướng dẫn tiếp cận nội dung web của W3C. AA là mức thường được yêu cầu, AAA là mức cao hơn.
Tỷ lệ hiển thị được cắt xuống 2 chữ số thập phân; kết luận đạt/chưa đạt dùng giá trị chưa làm tròn.
Công thức & cách tính
Mỗi kênh màu sRGB được đổi về 0–1 rồi tuyến tính hoá: c/12,92 nếu c ≤ 0,04045, ngược lại ((c + 0,055)/1,055)^2,4. Độ chói L = 0,2126 R + 0,7152 G + 0,0722 B. Tỷ lệ = (L sáng + 0,05) / (L tối + 0,05).
Với cặp màu đang thử: độ chói chữ 0,0215, độ chói nền 1,0000 → tỷ lệ 14,67:1.
Công cụ kiểm tra được gì?
Công cụ đo độ tương phản giữa hai màu đục trên màn hình. Kết quả giúp chọn màu, không phải chứng nhận.
- Chỉ kiểm tra từng cặp màu; không chứng nhận cả website hay cả thiết kế đạt WCAG.
- Chỉ nhận màu sRGB đục dạng HEX 3 hoặc 6 ký tự; chưa hỗ trợ độ trong suốt, dải màu hay ảnh nền.
- Kết quả là tương phản số trên màn hình; không bảo đảm màu in hay vật liệu in.
- Không dùng APCA để kết luận AA/AAA, và không mô phỏng các dạng suy giảm thị lực.
- Hình ảnh mẫu chỉ minh hoạ; không đại diện cho mọi thiết bị hay mọi người đọc.
Nguồn tham khảo
Công thức và ngưỡng lấy từ tài liệu chính thức của W3C: