Trình kiểm tra độ tương phản màu

Ngưỡng tương phản WCAG

“Văn bản lớn” nghĩa là độ đậm thường từ 18pt trở lên (~24px trong CSS) hoặc đậm từ 14pt trở lên (~19px đậm).

Ví dụ về tương phản

Cạm bẫy truy cập phổ biến

• Văn bản thân xám trên nền trắng ở #999 hoặc sáng hơn không đạt AA. Dùng #767676 hoặc tối hơn cho văn bản thân trên nền trắng.
• Liên kết xanh trên nền xám: thường không đạt vì cả hai màu đều có độ chói trung bình.
• Văn bản trắng trên màu thương hiệu: đạt trên các tông tối hơn (≥ 4.5:1), không đạt trên màu thương hiệu trung tông. Dùng văn bản lớn hơn hoặc màu thương hiệu tối hơn.
• Văn bản chỗ chứa (placeholder) thường có độ tương phản thấp để gợi ý, WCAG vẫn áp dụng nếu người dùng cần đọc nó.
• Trạng thái vô hiệu: WCAG 2.2 yêu cầu 3:1 cho văn bản bị vô hiệu so với nền của điều khiển, trừ khi trạng thái đó được truyền đạt bằng cách khác.

Điều WCAG không cho bạn biết

• WCAG 2.x dùng công thức từ năm 1988. APCA hiện đại (thuật toán tương phản nhận thức nâng cao) phản ánh khả năng đọc cảm nhận tốt hơn nhưng chưa phải chuẩn pháp lý. Hãy đẩy con số cao hơn mức tối thiểu của WCAG một chút để bao phủ APCA và các trường hợp biên.
• Tương phản không phải chiều kích duy nhất của khả năng truy cập. Tỷ lệ 21:1 vô nghĩa nếu phông chữ 9px, dãn dòng quá chật, hoặc ý nghĩa được truyền qua màu đỏ-xanh lá.

Cải thiện cặp màu không đạt

• Nền trước sáng hơn trên nền tối, hoặc nền trước tối hơn trên nền sáng.
• Tăng cỡ hoặc độ đậm chữ, ngưỡng văn bản lớn thấp hơn.
• Thêm nền phía sau văn bản nằm trên hình ảnh (lớp phủ, chuyển màu).
• Đừng bao giờ sửa độ tương phản bằng cách làm mờ sang một màu xám vẫn không đạt, hãy đẩy tới khi chạm AA.

Hãy kiểm tra lại sau mỗi lần chỉnh, công cụ tính lại tỷ lệ theo thời gian thực và một thay đổi nhỏ về độ sáng có thể đảo kết quả nhanh chóng.