Giới thiệu Tương phản WCAG
Tỷ lệ và mức AA/AAA
Cách sử dụng
Nhập hai màu để xem tỷ lệ tương phản WCAG và kết quả đạt/không đạt AA hoặc AAA ngay lập tức cho chữ và thành phần giao diện.
Giới hạn
Chỉ so sánh hai màu đặc. Độ trong suốt, gradient và nền ảnh không nằm trong phép tính.
Tương phản WCAG
Tiêu chuẩn tương phản WCAG
WCAG AA yêu cầu tối thiểu 4.5:1 cho chữ thường và 3:1 cho chữ lớn. AAA nâng lên 7:1 và 4.5:1.
Chữ lớn là 18pt thường hoặc 14pt in đậm trở lên. Biểu tượng và chỉ báo tiêu điểm cũng nên đạt 3:1 so với nền.
Kiểm tra và sửa tương phản
Nhập màu chữ và màu nền, hoặc dùng thanh trượt để đổi độ sáng trong khi giữ nguyên sắc độ và độ bão hòa.
Bảng gợi ý đề xuất màu gần nhất đạt AA. Chọn và sao chép rồi kiểm tra lại trên ảnh nền hoặc lớp phủ thực tế.
Câu hỏi thường gặp
AA và AAA khác nhau thế nào?
AA là mức cơ bản, AAA nghiêm ngặt hơn. AAA phù hợp cho văn bản dài, AA là mục tiêu phổ biến cho giao diện sản phẩm.
Chữ lớn được tính thế nào?
18pt (24px) hoặc 14pt (18,66px) in đậm trở lên. Chữ lớn cho phép tỷ lệ tương phản thấp hơn.
Vì sao tỷ lệ trong trình duyệt khác?
Trình duyệt có thể áp dụng độ trong suốt, lớp phủ hoặc nền ảnh. Hãy đo màu hiển thị cuối cùng.
Có thể dùng các màu này trong sản phẩm không?
Có, đây là màu HEX thông thường. Luôn kiểm tra lại trong ngữ cảnh, gồm trạng thái hover và disabled.
Ví dụ: ba phép đo thật
Ba cặp được tính bằng cùng một thuật toán, để thấy 4,5:1 nằm ở đâu.
Aa
Aa
Aa