Kiểm tra Ma trận Tương phản Màu

Vì sao cần kiểm tra tất cả các tổ hợp màu cùng lúc, thay vì từng cặp một?

Hướng dẫn khả năng truy cập WCAG yêu cầu một tỷ lệ tương phản tối thiểu giữa màu chữ và màu nền, nếu không người dùng có thị lực kém hoặc mù màu có thể không đọc được văn bản. Trong thực tế, hầu hết các trang web kết hợp nhiều màu thương hiệu, màu nền và màu trạng thái khác nhau —một tiêu đề màu chủ đạo trên thẻ màu xám nhạt, một màu cảnh báo trên nền trắng, chữ đậm trên nền có màu— và việc kiểm tra từng cặp bằng tay rất dễ sai sót hoặc bỏ sót. Công cụ này cho phép bạn dán tất cả các màu bạn thực sự sử dụng và ngay lập tức tính toán tỷ lệ tương phản cho mọi cặp có thể, hiển thị dưới dạng một ma trận duy nhất —không còn phải kiểm tra từng tổ hợp một nữa.

Tỷ lệ được tính như thế nào — một ví dụ cụ thể

WCAG 2.1 định nghĩa tỷ lệ tương phản là (L1 + 0,05) / (L2 + 0,05), trong đó L1 và L2 là "độ chói tương đối" của hai màu (giá trị càng cao càng gần với màu trắng). Đen tuyền #000000 so với trắng tuyền #FFFFFF đạt tỷ lệ hoàn hảo 21:1, nhưng xám nhạt #999999 so với trắng chỉ đạt 2,85:1 —thấp hơn nhiều so với mức tối thiểu 4,5:1 yêu cầu cho văn bản thường. Văn bản thường (dưới 18px, hoặc dưới 14px đậm) cần AA ≥ 4,5:1, hoặc AAA ≥ 7:1 với tiêu chuẩn khắt khe hơn; văn bản lớn (đậm 18px+ hoặc 24px+) có ngưỡng thấp hơn với AA ≥ 3:1.

Cách đọc ma trận kết quả

Mỗi ô trong ma trận thể hiện tỷ lệ tương phản giữa màu của hàng đó và màu của cột đó, được tô màu: xanh lá (đạt AAA), vàng (chỉ đạt AA), đỏ (không đạt) —giúp bạn nhận ra ngay các cặp có vấn đề mà không cần tính toán từng cái bằng tay.

Độ tương phản chỉ được tính dựa trên giá trị RGB của từng màu —không tính đến độ đậm của phông chữ, hiệu ứng khử răng cưa (anti-aliasing) hay các lớp phủ trong suốt trong quá trình hiển thị thực tế. Luôn kiểm tra lại trên thiết bị thật trước khi triển khai chính thức.