Hướng dẫn tương phản màu WCAG
Hiểu các yêu cầu về độ tương phản của AA và AAA, cách kiểm tra các thành phần văn bản và giao diện người dùng cũng như cách khắc phục các cặp bị lỗi.
FAQ
- Tôi cần tỷ lệ nào cho các nút?
- Các thành phần giao diện người dùng và đối tượng đồ họa thường cần ít nhất 3:1 so với các màu liền kề. Văn bản bên trong các nút vẫn cần 4,5:1 (AA) hoặc 3:1 đối với văn bản lớn.
Khái niệm cơ bản về độ tương phản WCAG
WCAG 2.x xác định tỷ lệ tương phản tối thiểu giữa màu văn bản và màu nền. Cấp AA là mục tiêu pháp lý và sản phẩm chung; AAA chặt chẽ hơn và được khuyên dùng cho nội dung văn bản khi có thể.
Độ tương phản dựa trên độ chói tương đối, không phải màu sắc. Hai màu có thể trông khác nhau nhưng không có độ tương phản nếu độ sáng của chúng quá giống nhau.
Quy trình kiểm tra
Chọn màu nền trước và màu nền từ hệ thống thiết kế của bạn. Chạy chúng thông qua một trình kiểm tra độ tương phản. Lưu ý ngưỡng văn bản bình thường và lớn.
Kiểm tra trạng thái di chuột, tiêu điểm và trạng thái bị tắt — không chỉ các nút và liên kết mặc định.