Kiểm tra Tương phản WCAG
Kiểm tra tỷ lệ tương phản giữa hai màu. Đánh giá đạt/không đạt cho WCAG AA và AAA cho mỗi kích thước văn bản.
Aa — Large text 24px / 18px bold
Aa — Normal text 16px
Aa — Small text 12px
Tạo bởi JXXR1 · ♥ Tài trợ · ☕ Mời tôi một ly cà phê
Công cụ này để làm gì?
WCAG 2.1 (Web Content Accessibility Guidelines) định nghĩa tỷ lệ tương phản tối thiểu giữa văn bản và background để đảm bảo người có thị lực kém vẫn đọc được. AA cần 4.5:1 cho văn bản thường, 3:1 cho văn bản lớn; AAA cần 7:1 và 4.5:1. Tool này tính tỷ lệ và hiển thị đậu/fail cho mỗi cấp độ.
Khi nào nên dùng
- Audit accessibility của design hiện tại.
- Chọn màu cho design system mới đáp ứng WCAG AA.
- So sánh nhiều tổ hợp màu sắc nhanh chóng.
Lưu ý thường gặp
- "Văn bản lớn" có nghĩa cụ thể. 18pt thông thường hoặc 14pt bold. Việc gọi nó "lớn" trong CSS không tự động cho phép giảm tỷ lệ.
- Tương phản trên image / gradient phức tạp. Đối với văn bản trên ảnh, tính trên phần xấu nhất của ảnh. Đối với gradient, tính nhiều điểm.
- Pass AA không đảm bảo "đẹp". Văn bản pure black trên white pure pass AAA nhưng đôi khi quá cứng — nhiều design dùng dark gray (#1a1a1a) cho cảm giác mềm hơn mà vẫn pass.