Cách kiểm tra độ tương phản màu theo WCAG

Mở trình kiểm tra tương phản khi có sẵn cả hai mã hex. Kiểm chữ nội dung với 4.5:1, tiêu đề trên 24px với 3:1, và biểu tượng hay viền với 3:1. Không tải lên.

1. Biết các ngưỡng

   WCAG 2 AA: 4.5:1 cho chữ thường và 3:1 cho chữ lớn. AAA: 7:1 và 4.5:1. Chữ lớn là 24px thường hoặc khoảng 18,7px đậm. Biểu tượng, viền và ô nhập cần 3:1.

   

2. Mở Kiểm tra độ tương phản màu trên cv.cm

   Cặp mẫu hồng trên kem đã điền sẵn. Tỷ lệ và các hàng đạt/trượt ở bên phải, dưới đoạn chữ mẫu. Không tải lên.

   Mở Kiểm tra tương phản

3. Nhập hai màu

   Gõ mã hex như #777777 cho chữ và #ffffff cho nền, hoặc chọn bằng ô màu. Mã ba ký tự như #777 cũng được. Đoạn mẫu cập nhật khi bạn gõ.

4. Đọc tỷ lệ và các hàng

   #777777 trên #ffffff là 4.48:1: AA chữ lớn và giao diện đạt, AA chữ thường trượt. Mỗi hàng ghi Đạt hoặc Trượt theo ngưỡng của nó.

5. Lấy màu gợi ý

   Khi chữ thường trượt AA, trang gợi ý màu chữ gần nhất đạt 4.5:1, dịch về phía đen hoặc trắng. Với #777777 trên trắng nó gợi ý #767676. Đổi chỗ hoán đổi chữ và nền.

   

6. Kiểm mọi trạng thái, rồi sao chép

   Lặp lại cho màu liên kết, di chuột và vô hiệu, và với chữ trên ảnh thì dùng phần tối nhất của ảnh làm nền. Sao chép đưa màu, tỷ lệ và kết quả vào clipboard.