Kiểm tra độ tương phản màu
Công cụ kiểm tra độ tương phản màu miễn phí: kiểm tra màu chữ và màu nền có đạt WCAG 2.2 AA và AAA không, xem tỷ lệ tương phản và nhận màu gần nhất đạt chuẩn.
Đây là văn bản thường, cỡ chữ của một đoạn văn.
Chữ lớn
Nút| AA | AAA | |
|---|---|---|
| Văn bản thường | ||
| Chữ lớn (24 px, hoặc 18,7 px in đậm) | ||
| Biểu tượng và viền giao diện | — |
Công cụ này làm gì
Công cụ này đo độ tương phản giữa màu chữ và màu nền theo công thức của hướng dẫn trợ năng WCAG 2.2, được dùng trong nhiều luật về khả năng tiếp cận. Công cụ hiển thị tỷ lệ tương phản, từ 1:1 (không tương phản) đến 21:1 (đen trên trắng), và cho biết cặp màu có đạt mức AA và AAA cho văn bản thường, chữ lớn và các thành phần giao diện như biểu tượng và đường viền hay không. Khi một cặp màu không đạt, công cụ gợi ý màu gần nhất, cùng sắc màu, có thể đạt chuẩn.
Cách sử dụng
- Nhập hoặc chọn màu chữ và màu nền.
- Xem tỷ lệ tương phản cùng kết quả AA và AAA, và kiểm tra bản xem trước trực tiếp.
- Nếu không đạt, nhấn Dùng ở một màu được gợi ý, rồi sao chép liên kết để chia sẻ kết quả.
Câu hỏi thường gặp
Tôi cần tỷ lệ tương phản bao nhiêu?
Mức AA, mục tiêu pháp lý thường gặp, yêu cầu 4,5:1 cho văn bản thường và 3:1 cho chữ lớn cũng như biểu tượng và viền giao diện. Mức AAA yêu cầu 7:1 cho văn bản thường và 4,5:1 cho chữ lớn.
Thế nào là chữ lớn?
Chữ có kích thước ít nhất 24 pixel CSS (18 point), hoặc ít nhất khoảng 18,7 pixel CSS (14 point) khi in đậm. Tiêu đề thường là chữ lớn; nội dung chính thường thì không.
Vì sao #777777 trên nền trắng không đạt?
Tỷ lệ của nó là 4,47:1, chỉ thấp hơn một chút so với mức 4,5:1 yêu cầu cho văn bản thường. Tỷ lệ không được làm tròn lên, nên một màu xám đậm hơn một chút như #767676 (4,54:1) là màu xám nhạt nhất đạt chuẩn trên nền trắng.
W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast