🌗 Công cụ kiểm tra độ tương phản màu sắc (WCAG AA / AAA)
Kiểm tra ngay xem cặp màu chữ và nền của bạn có đáp ứng tiêu chuẩn tiếp cận WCAG 2.x AA hoặc AAA hay không — ngay trong trình duyệt, miễn phí, không có dữ liệu nào rời khỏi thiết bị. Chọn hoặc nhập mã hex bất kỳ, xem tỷ lệ tương phản chính xác và nhận nhãn đạt/không đạt rõ ràng cho chữ thường, chữ lớn và cả hai cấp độ tuân thủ.
Giới thiệu
Công thức tính tỷ lệ tương phản WCAG (Hướng dẫn tiếp cận nội dung web) tính độ sáng tương đối của mỗi màu theo tiêu chuẩn sRGB IEC 61966-2-1, sau đó tính xem một màu sáng hơn màu kia bao nhiêu. Tỷ lệ từ 4.5:1 trở lên đạt AA cho chữ thường (16 px), trong khi 7:1 trở lên đạt AAA. Chữ lớn (24 px hoặc 18.67 px đậm) có ngưỡng nới lỏng hơn: 3:1 cho AA và 4.5:1 cho AAA. Công cụ này chạy toàn bộ thuật toán WCAG 2.x ngay trong trình duyệt — không cần server, không cần tài khoản, không theo dõi. Kết quả được lưu cục bộ để cặp màu cuối cùng của bạn luôn sẵn sàng khi quay lại.
Cách sử dụng
- Chọn màu chữ bằng bộ chọn màu hoặc nhập mã hex (ví dụ: #1a2b3c) vào trường Màu chữ.
- Chọn màu nền theo cách tương tự trong trường Màu nền. Dùng nút Hoán đổi để đổi chỗ nhanh hai màu cho nhau.
- Đọc tỷ lệ tương phản hiển thị chữ to và kiểm tra bốn nhãn đạt/không đạt: AA và AAA cho cả chữ thường lẫn chữ lớn.
- Xem trước giao diện thực tế của chữ trên nền đã chọn trong phần Xem trước trực tiếp trước khi hoàn thiện thiết kế.
Câu hỏi thường gặp
- Công cụ kiểm tra tương phản WCAG này có miễn phí không?
- Có, hoàn toàn miễn phí, không cần đăng ký, không có giới hạn sử dụng. Mở trang và bắt đầu kiểm tra màu ngay lập tức.
- Công cụ có hoạt động offline hoặc không cần kết nối internet không?
- Có. Mọi phép tính đều chạy hoàn toàn trong trình duyệt bằng JavaScript. Sau khi trang đã tải xong, bạn có thể ngắt kết nối internet và công cụ vẫn hoạt động bình thường. Không có dữ liệu nào được gửi đến server.
- Dữ liệu màu của tôi có được bảo mật không? Có gì được tải lên không?
- Màu sắc của bạn không bao giờ rời khỏi trình duyệt. Không phân tích màu bạn nhập, không tải lên, không chia sẻ với bên thứ ba. Cặp màu cuối cùng chỉ được lưu trong localStorage của trình duyệt.
- Sự khác biệt giữa WCAG AA và AAA là gì?
- AA là tiêu chuẩn tối thiểu mà hầu hết các quy định yêu cầu (ví dụ: ADA, EN 301 549). Chữ thường cần tỷ lệ 4.5:1; chữ lớn (24 px hoặc đậm 18.67 px) cần 3:1. AAA là tiếp cận nâng cao: 7:1 cho chữ thường và 4.5:1 cho chữ lớn. Hãy đặt mục tiêu đạt ít nhất AA trong mọi thiết kế sản phẩm.
- Tôi có thể kiểm tra màu bằng mã hex rút gọn 3 chữ số như #fff không?
- Có. Công cụ chấp nhận cả mã hex rút gọn 3 chữ số (#rgb) lẫn mã đầy đủ 6 chữ số (#rrggbb). Chỉ cần nhập hoặc dán màu vào và công cụ sẽ tự động mở rộng và xác thực.