Tỷ lệ tương phản màu WCAG là gì?
Tỷ lệ tương phản cho biết hai màu khác biệt với nhau đến mức nào — thường là giữa chữ và nền phía sau. Bộ Hướng dẫn về khả năng tiếp cận nội dung web (WCAG 2.x) dùng tỷ lệ này để đặt ra ngưỡng tối thiểu, giúp nội dung vẫn dễ đọc với người thị lực kém hoặc người gặp khó khăn về phân biệt màu sắc. Tỷ lệ dao động từ 1:1 (hai màu giống hệt nhau) cho đến 21:1 (chữ đen tuyền trên nền trắng tinh).
Cách dùng công cụ này
Bạn nhập màu chữ (foreground) và màu nền dưới dạng mã hex, ví dụ #1a73e8 hoặc dạng viết tắt #fff. Công cụ sẽ tuyến tính hóa từng màu, tính độ chói tương đối của nó, rồi trả về tỷ lệ tương phản kèm kết quả đạt/không đạt so với từng ngưỡng của WCAG.
Giải thích công thức
Tỷ lệ được tính bằng \((L_1 + 0{,}05) / (L_2 + 0{,}05)\), trong đó \(L_1\) là độ chói tương đối của màu sáng hơn và \(L_2\) là của màu tối hơn.
$$\text{Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05} \\[1.5em] \text{where}\quad \left\{ \begin{aligned} L_1 &= \max(L_{\text{Foreground}},\, L_{\text{Background}}) \\ L_2 &= \min(L_{\text{Foreground}},\, L_{\text{Background}}) \end{aligned} \right.$$Độ chói tương đối được tính bằng cách chuyển mỗi kênh sRGB về giá trị trong khoảng 0–1, tuyến tính hóa nó (kênh có giá trị từ 0,03928 trở xuống thì chia cho 12,92; kênh sáng hơn thì dùng \(((c+0{,}055)/1{,}055)^{2{,}4}\)), rồi kết hợp lại theo công thức \(0{,}2126 \cdot R + 0{,}7152 \cdot G + 0{,}0722 \cdot B\). Hằng số 0,05 giúp tránh phép chia cho 0 và mô phỏng hiện tượng lóa sáng môi trường trên màn hình.
$$L = 0.2126\,R_{lin} + 0.7152\,G_{lin} + 0.0722\,B_{lin}$$$$c_{lin} = \begin{cases} \dfrac{c}{12.92} & c \le 0.03928 \\[0.4em] \left(\dfrac{c+0.055}{1.055}\right)^{2.4} & c > 0.03928 \end{cases}$$
Ví dụ minh họa
Chữ đen (#000000) trên nền trắng (#FFFFFF): màu đen có độ chói bằng 0, màu trắng có độ chói bằng 1. Tỷ lệ là $$\frac{1 + 0.05}{0 + 0.05} = \frac{1.05}{0.05} = 21:1$$ — giá trị tối đa có thể đạt, vượt qua mọi cấp độ một cách dễ dàng.
Câu hỏi thường gặp
Tôi cần độ tương phản bao nhiêu? Chuẩn WCAG AA yêu cầu 4,5:1 với chữ thường và 3:1 với chữ lớn (≥18pt, hoặc 14pt in đậm). Chuẩn AAA yêu cầu lần lượt là 7:1 và 4,5:1.
Thứ tự màu có quan trọng không? Không. Công thức luôn lấy độ chói của màu sáng hơn chia cho màu tối hơn, nên dù bạn hoán đổi màu chữ và màu nền thì tỷ lệ vẫn như nhau.
Vì sao không thể chỉ dựa vào độ sáng đơn thuần? Mắt người cảm nhận màu sắc theo cách phi tuyến và thiên về màu xanh lá, đó là lý do độ chói phải dùng hiệu chỉnh gamma cùng các hệ số riêng cho từng kênh, thay vì lấy trung bình đơn giản.
