Công cụ kiểm tra độ tương phản

Nhập màu chữ và màu nền để xem tỷ lệ tương phản WCAG và kiểm tra xem các mức độ AA và AAA có đạt chuẩn hay không.

Tỷ lệ tương phản
Văn bản thườngAA4.5:1
Văn bản thườngAAA7:1
Văn bản lớnAA3:1
Văn bản lớnAAA4.5:1
Giao diện & đồ họa3:1
Nhập màu chữ và màu nền để kiểm tra.

Mọi quá trình kiểm tra đều chạy trong trình duyệt của bạn. Không có thông tin nào bạn nhập được tải lên BroBroGo.

Hỏi đáp

Kết quả đạt chuẩn AA và AAA có ý nghĩa gì?

AA là mức độ mà hầu hết các trang web hướng tới: yêu cầu tỷ lệ tương phản tối thiểu là 4.5:1 cho văn bản thường và 3:1 cho văn bản lớn. AAA nghiêm ngặt hơn — yêu cầu 7:1 cho văn bản thường và 4.5:1 cho văn bản lớn. Tỷ lệ tương phản chạy từ 1:1 (không có độ tương phản) đến 21:1 (chữ đen trên nền trắng).

Những gì được tính là văn bản lớn (large text)?

Chữ lớn được tính từ cỡ chữ 18pt (khoảng 24px) trở lên, hoặc 14pt (khoảng 18.5px) nếu được in đậm. Văn bản lớn hơn vẫn dễ đọc ở độ tương phản thấp hơn, vì vậy nó đạt chuẩn AA ở mức 3:1 và AAA ở mức 4.5:1 thay vì các ngưỡng khắt khe hơn của văn bản thông thường.

Tôi có thể nhập những định dạng màu nào?

Bạn có thể nhập giá trị hex như #1a1a1a, giá trị rgb() như rgb(26, 26, 26), hoặc giá trị hsl() — hoặc nhấp vào một trong hai ô màu để chọn trực tiếp. Sử dụng nút hoán đổi để đảo ngược màu chữ và màu nền.

Đây là tiêu chuẩn WCAG 2 hay phương pháp APCA mới hơn?

Công cụ này sử dụng công thức WCAG 2.1 / 2.2, vốn là tiêu chuẩn được các quy tắc và kiểm tra khả năng tiếp cận tham chiếu hiện nay. APCA là một phương pháp mới hơn, dựa trên cảm nhận trực quan tốt hơn đang được soạn thảo cho WCAG 3 — rất hứa hẹn nhưng chưa phải là tiêu chuẩn tuân thủ chính thức, vì vậy kết quả đạt/không đạt ở đây không sử dụng nó.