Công cụ áp dụng công thức độ chói tương đối chính thức của WCAG, nên kết quả khớp với công cụ WebAIM và hầu hết các kiểm tra tiếp cận khác. Mọi thứ chạy ngay trên trình duyệt - màu sắc của bạn không bao giờ được tải lên, và không có giới hạn nào cả.
Kiểm tra độ tương phản màu sắc
Chạy hoàn toàn trên trình duyệt của bạn - không tải lên, không cần đăng ký.
Tỉ lệ tương phản
Đạtcần 4.5:1
Đạtcần 3:1
Không đạtcần 7:1
Đạtcần 4.5:1
Chữ lớn = 18pt (24px), hoặc 14pt (18,66px) khi in đậm.
Kiểm tra độ tương phản màu sắc là gì?
Công cụ kiểm tra độ tương phản màu sắc đo tỉ lệ tương phản giữa màu chữ và màu nền, cho biết liệu tổ hợp màu đó có đáp ứng chuẩn tiếp cận WCAG hay không. Kết quả trả về tỉ lệ từ 1:1 đến 21:1, kèm trạng thái đạt hoặc không đạt cho mức AA và AAA ở cả chữ thường lẫn chữ lớn.
Cách dùng
- 1Nhập màu sắc. Gõ mã hex, giá trị rgb() hoặc tên màu CSS cho chữ và nền, hoặc chọn màu bằng bảng chọn màu.
- 2Xem tỉ lệ tương phản. Tỉ lệ tương phản cập nhật ngay lập tức, kèm xem trước chữ trên nền đã chọn.
- 3Kiểm tra huy hiệu kết quả. Mỗi huy hiệu hiển thị trạng thái đạt hoặc không đạt theo WCAG AA và AAA ở chữ thường và chữ lớn.
Dành cho ai
- Nhà thiết kế kiểm tra màu thương hiệu trước khi đưa sang giai đoạn lập trình.
- Lập trình viên front-end kiểm tra màu nút bấm, liên kết và nhãn theo chuẩn WCAG AA.
- Chuyên gia kiểm tra tiếp cận ghi lại các lỗi tương phản kèm tỉ lệ chính xác.
- Nhóm nội dung và email đảm bảo văn bản vẫn dễ đọc trên nền màu.
Câu hỏi thường gặp
Công cụ kiểm tra độ tương phản màu sắc có miễn phí không?
Có - hoàn toàn miễn phí, không cần đăng ký và không giới hạn lượt dùng. Chạy hoàn toàn trên trình duyệt của bạn.
Tỉ lệ tương phản bao nhiêu để đạt WCAG AA?
WCAG 2.1 mức AA yêu cầu tỉ lệ tương phản tối thiểu 4,5:1 với chữ thường và 3:1 với chữ lớn. Mức AAA nâng lên 7:1 với chữ thường và 4,5:1 với chữ lớn.
Chữ lớn được định nghĩa như thế nào?
Chữ lớn là ít nhất 18pt (khoảng 24px) ở độ đậm thông thường, hoặc 14pt (khoảng 18,66px) khi in đậm. Chữ lớn được phép có tỉ lệ tương phản thấp hơn vì ký tự lớn hơn dễ đọc hơn.
Tỉ lệ tương phản được tính như thế nào?
Công thức là (L1 + 0,05) / (L2 + 0,05), trong đó L1 và L2 là độ chói tương đối của màu sáng hơn và màu tối hơn. Độ chói được tính từ kênh đỏ, xanh lá và xanh lam sRGB theo định nghĩa WCAG 2.x.
Có hỗ trợ hex, RGB và tên màu không?
Có. Có thể nhập hex 3, 4, 6 hoặc 8 chữ số, giá trị rgb() và rgba(), hoặc bất kỳ tên màu CSS nào như 'teal'. Cũng có thể chọn màu bằng bảng chọn màu gốc của trình duyệt.
Tại sao cùng một tỉ lệ đôi khi đạt, đôi khi không?
Yêu cầu tỉ lệ phụ thuộc vào cỡ chữ và mức tiếp cận cần đạt. Tỉ lệ 3,5:1 không đạt AA với chữ thường nhưng đạt AA với chữ lớn, vì vậy luôn kiểm tra theo đúng cỡ chữ và mức bạn đang dùng.