Công cụ tính tỷ lệ tương phản màu là gì?
Công cụ này tính tỷ lệ tương phản giữa màu chữ (foreground) và màu nền (background) dựa trên công thức chính thức của tiêu chuẩn WCAG 2.x. Tỷ lệ tương phản là một chỉ số quan trọng về khả năng tiếp cận (accessibility): nó cho biết liệu nội dung văn bản có dễ đọc đối với người thị lực kém hoặc người rối loạn nhận biết màu sắc hay không. Giá trị dao động từ 1:1 (hai màu giống hệt nhau, chữ vô hình) đến 21:1 (chữ đen tuyền trên nền trắng tinh).
Cách sử dụng
Nhập giá trị ba kênh đỏ, xanh lá và xanh dương (0–255) cho màu chữ (foreground) và màu nền (background). Công cụ sẽ tuyến tính hóa từng kênh, tính độ sáng tương đối của cả hai màu, rồi lấy giá trị sáng hơn chia cho giá trị tối hơn sau khi cộng thêm hằng số ánh sáng môi trường 0.05. Cuối cùng, công cụ cho biết cặp màu này có đạt chuẩn WCAG AA và AAA cho văn bản thường và văn bản cỡ lớn hay không.
Giải thích công thức
Tỷ lệ tương phản được tính bằng \((L_1 + 0.05) / (L_2 + 0.05)\), trong đó \(L_1\) là độ sáng tương đối của màu sáng hơn và \(L_2\) là của màu tối hơn. Độ sáng tương đối được tính bằng cách trước hết quy đổi từng kênh về thang 0–1, sau đó áp dụng phép biến đổi gamma: nếu giá trị đã quy đổi ≤ 0.03928 thì chia cho 12.92, ngược lại thì lũy thừa theo công thức \(((c+0.055)/1.055)^{2.4}\). Các kênh sau khi tuyến tính hóa được kết hợp theo tỷ trọng \(0.2126\cdot R + 0.7152\cdot G + 0.0722\cdot B\), phản ánh việc mắt người nhạy hơn với màu xanh lá.
$$\text{Contrast} = \frac{L_1 + 0.05}{L_2 + 0.05}$$ $$\text{where}\quad \left\{ \begin{aligned} L_1 &= \max(L_{fg},\, L_{bg}) \\ L_2 &= \min(L_{fg},\, L_{bg}) \\ L_{fg} &= 0.2126\,\ell(\text{Fg R}) + 0.7152\,\ell(\text{Fg G}) + 0.0722\,\ell(\text{Fg B}) \\ L_{bg} &= 0.2126\,\ell(\text{Bg R}) + 0.7152\,\ell(\text{Bg G}) + 0.0722\,\ell(\text{Bg B}) \\ \ell(C) &= \begin{cases} \dfrac{C/255}{12.92} & C/255 \le 0.03928 \\[0.6em] \left(\dfrac{C/255 + 0.055}{1.055}\right)^{2.4} & \text{otherwise} \end{cases} \end{aligned} \right.$$
Ví dụ minh họa
Chữ đen (0,0,0) trên nền trắng (255,255,255): độ sáng của màu đen = 0, độ sáng của màu trắng = 1. Tỷ lệ = \((1 + 0.05) / (0 + 0.05) = 1.05 / 0.05 =\) 21:1 — đây là mức tương phản cao nhất có thể đạt được, dễ dàng vượt qua mọi cấp độ của WCAG.
Câu hỏi thường gặp
Tôi cần tỷ lệ tương phản bao nhiêu? Chuẩn WCAG AA yêu cầu 4.5:1 cho văn bản thường và 3:1 cho văn bản cỡ 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 độ sáng lớn hơn chia cho độ sáng nhỏ hơn, nên việc hoán đổi màu chữ và màu nền vẫn cho ra cùng một tỷ lệ.
Tại sao phải cộng thêm 0.05? Hằng số này mô phỏng độ lóa của ánh sáng môi trường trên màn hình, để ngay cả màu đen tuyền trên nền đen tuyền cũng cho ra một giá trị hữu hạn, xác định được chứ không phải vô cực.
