Trình kiểm tra độ tương phản WCAG
Kiểm tra mọi cặp màu nền trước và màu nền sau để biết tỷ lệ tương phản WCAG 2.1 (1 đến 21).
Cách kiểm tra độ tương phản màu
1. Nhập hoặc chọn màu nền trước (văn bản) và màu nền.
2. Đọc tỷ lệ tương phản (ví dụ: 4,52:1).
3. Kiểm tra các hàng AA và AAA cho văn bản bình thường và lớn kích thước.
4. Điều chỉnh độ sáng HSL cho đến khi vượt qua mức yêu cầu, sau đó sao chép các giá trị hex.
Ví dụ kiểm tra độ tương phản
Nội dung #374151 trên #FFFFFF
Tỷ lệ ≈ 8,9:1 — vượt qua AAA đối với văn bản thông thường (cần 7:1). Thoải mái đọc dạng dài.
Màu xám nhạt #9CA3AF trên nền trắng
Tỷ lệ ≈ 2,6:1 — không đạt AA đối với văn bản thông thường (cần 4,5:1). Lỗi giữ chỗ thường gặp.
Nút chính màu trắng trên #2563EB
Tỷ lệ ≈ 4,6:1 — vượt qua văn bản thông thường AA; chuyển sang màu xanh lam đậm hơn đối với AAA hoặc chỉ sử dụng với số lượng lớn.
Khi nào nên dùng công cụ này
• Khi bạn kiểm tra mã thông báo hệ thống thiết kế trước khi phát hành.
• Khi bạn sửa các phát hiện về khả năng truy cập từ Lighthouse hoặc axe.
• Khi bạn chọn màu liên kết phải khác với văn bản nội dung, không chỉ theo màu sắc.
Giải thích các cấp độ WCAG 2.1
Mức A là tối thiểu; AA là mục tiêu pháp lý ở nhiều khu vực pháp lý (ADA, khu vực công EAA). AAA rất hấp dẫn đối với nội dung — dòng tiêu đề lớn có thể vượt qua AAA dễ dàng hơn chú thích 14px. Chỉ báo hiển thị tiêu điểm (2.4.7) bổ sung độ tương phản — người dùng bàn phím cần có vòng tiêu điểm hiển thị, thường là 3:1 so với các màu liền kề. Tài liệu đạt/không đạt trong hệ thống thiết kế của bạn bên cạnh mỗi cặp mã thông báo.
Câu hỏi thường gặp
Tỷ lệ tương phản nào cho văn bản WCAG AA thông thường?
Ít nhất 4,5:1 cho văn bản thông thường và 3:1 cho văn bản lớn (18pt+ hoặc 14pt in đậm).
Điều gì dành cho AAA?
Văn bản thông thường 7:1, văn bản lớn 4,5:1 — chặt chẽ hơn, thường được sử dụng cho các trang web của chính phủ.
Các thành phần giao diện người dùng có cần độ tương phản không?
WCAG 2.1 yêu cầu 3:1 cho các đối tượng đồ họa và ranh giới thành phần giao diện người dùng (1.4.11).
Tỷ lệ được tính như thế nào?
Dựa trên tương đối độ chói của màu sRGB: (L1 + 0,05) / (L2 + 0,05) trong đó L1 nhạt hơn.
Gạch chân có khắc phục được các liên kết có độ tương phản thấp không?
Không — vẫn cần độ tương phản. Gạch chân giúp gợi ý không phải màu sắc nhưng không thay thế các quy tắc tỷ lệ.