Câu chuyện phía sau công cụ kiểm tra tương phản màu

Độ tương phản thấp là một trong những vấn đề trợ năng phổ biến nhất trên web. Các quy tắc trông như những con số kỳ diệu, nhưng mỗi quy tắc đều có lý do, gắn với cách mắt giảm độ nhạy theo tuổi và cách màn hình tạo ra ánh sáng.

Hai mẫu màu chồng lên nhau bên cạnh một thang tương phản phát sáng
Hai mẫu màu chồng lên nhau bên cạnh một thang tương phản phát sáng

Nguồn gốc của 4,5 và 7

WCAG 2.0 trở thành khuyến nghị của W3C vào tháng 12 năm 2008. Các tác giả xuất phát từ mức tối thiểu 3:1 trong tiêu chuẩn ISO 9241-3 rồi nâng lên để bù cho sự suy giảm độ nhạy tương phản ở thị lực khoảng 20/40, thường gặp quanh tuổi 80. Từ đó có 4,5:1 cho mức AA. Mức AAA, 7:1, làm điều tương tự cho thị lực khoảng 20/80.

Độ chói tương đối

Công thức trước hết đưa mỗi kênh sRGB về ánh sáng tuyến tính, sau đó nhân đỏ, lục và lam với 0,2126, 0,7152 và 0,0722, giống các trọng số của tiêu chuẩn truyền hình ITU-R BT.709, vì mắt nhạy nhất với màu lục. Tỷ lệ là độ chói sáng hơn cộng 0,05 chia cho độ chói tối hơn cộng 0,05. Con số 0,05 đại diện cho ánh sáng màn hình phản chiếu và giới hạn thang đo từ 1:1 đến 21:1, chữ đen trên nền trắng.

Không chỉ là chữ

Chữ lớn, ít nhất 24 px hoặc 18,66 px đậm, vẫn dễ đọc ở độ tương phản thấp hơn nên chỉ cần 3:1 cho AA. WCAG 2.1 phát hành tháng 6 năm 2018 bổ sung tiêu chí 1.4.11 Tương phản phi văn bản: viền ô nhập, vòng tiêu điểm, biểu tượng và những phần của biểu đồ cần để hiểu nó phải đạt 3:1 so với vùng bên cạnh.

Mù màu và tương lai

Khoảng 1 trong 12 nam giới và 1 trong 200 nữ giới có khiếm khuyết sắc giác, phần lớn với màu đỏ và lục. Tương phản được đo theo độ chói nên cặp màu đạt vẫn đọc được, nhưng các màu chỉ khác nhau về sắc độ có thể trông giống nhau. Mô phỏng ở đây dùng mô hình của Machado, Oliveira và Fernandes năm 2009. Các bản thảo WCAG 3 đang nghiên cứu APCA, phương pháp mới hơn có tính cả cỡ chữ và việc chữ tối trên nền sáng hay chữ sáng trên nền tối.

Hỏi thường xuyên

Tương phản tốt có đủ cho trợ năng không?

Không. Đó chỉ là một trong nhiều yêu cầu. WCAG còn yêu cầu màu sắc không phải là cách duy nhất để truyền đạt ý nghĩa, ví dụ thêm biểu tượng hoặc gạch chân cho liên kết hay thông báo lỗi.

Mô phỏng có cho thấy chính xác những gì một người nhìn thấy không?

Đó là phép xấp xỉ tốt cho chứng lưỡng sắc hoàn toàn. Nhiều người ở dạng nhẹ hơn và mỗi người nhìn hơi khác nhau, vì vậy hãy dùng nó như một hướng dẫn.

Tôi có nên dùng APCA thay cho tỷ lệ WCAG 2 không?

Để tuân thủ hiện nay, hãy dùng tỷ lệ WCAG 2. WCAG 2.2 phát hành tháng 10 năm 2023 giữ nguyên công thức, và các luật cũng như tiêu chuẩn như EN 301 549 đều dẫn chiếu đến nó. APCA vẫn đang được phát triển.

Sẵn sàng thử chưa?

Mở PictorX trong trình duyệt của bạn — không cài đặt, không cần thiết thẻ tín dụng để khởi động.

Mở công cụ kiểm tra tương phản