Kiểm tra độ tương phản
Kiểm tra tuân thủ WCAG AA và AAA cho bất kỳ kết hợp màu văn bản và nền nào.
Text color
Background color
Large Text Example (18pt+)
Normal text: The quick brown fox jumps over the lazy dog. This is regular body text to test readability and contrast against the selected background color.
Large text = 18pt (24px) normal or 14pt (18.67px) bold. WCAG 2.1 guidelines. AA is the minimum standard; AAA is enhanced.
Tuân thủ tương phản WCAG là gì?
WCAG (Web Content Accessibility Guidelines) xác định tỷ lệ tương phản tối thiểu giữa văn bản và nền để đảm bảo khả năng đọc cho người có thị lực kém hoặc mù màu. Cấp AA yêu cầu tối thiểu 4,5:1 cho văn bản thông thường và 3:1 cho văn bản lớn. Cấp AAA là tiêu chuẩn nâng cao yêu cầu lần lượt 7:1 và 4,5:1.
AA vs AAA - bạn nên nhắm đến cái nào?
AA là mức tối thiểu pháp lý cho hầu hết các quy định về khả năng tiếp cận (bao gồm EN 301 549 ở Châu Âu và Section 508 ở Mỹ). AAA là tiêu chuẩn vàng - khó đạt hơn nhưng được khuyến nghị cho văn bản nội dung và giao diện quan trọng. Hầu hết các nhóm nhắm đến AA cho tất cả văn bản và AAA cho văn bản nội dung khi có thể.
"Văn bản lớn" được tính như thế nào?
WCAG định nghĩa văn bản lớn là 18pt (24px) hoặc lớn hơn ở trọng lượng bình thường, hoặc 14pt (18,67px) hoặc lớn hơn ở trọng lượng đậm. Văn bản lớn được hưởng tỷ lệ tương phản rộng hơn (3:1 cho AA) vì kích thước bản thân giúp dễ đọc. Tiêu đề và văn bản hiển thị thường đủ điều kiện; hầu hết văn bản nội dung thì không.
Cách sử dụng công cụ này
Chọn màu văn bản và màu nền của bạn bằng bộ chọn màu hoặc nhập trực tiếp mã hex. Tỷ lệ tương phản cập nhật ngay lập tức và cả bốn kiểm tra WCAG hiển thị Pass hoặc Fail theo thời gian thực. Sử dụng nút Swap để đảo ngược màu sắc. Xem trước trực tiếp cho thấy kết hợp của bạn trông như thế nào trên văn bản thực tế.