Máy tính tỷ lệ tương phản

Tỷ lệ tương phản đo mức độ dễ đọc của văn bản so với nền của nó theo thang độ sáng từ 1:1 (các màu giống nhau) đến 21:1 (màu đen trên nền trắng). WCAG 2.x sử dụng độ chói tương đối được tính toán từ các giá trị hex sRGB — không chỉ màu sắc hay độ bão hòa. Hai màu xanh lam có cùng độ sáng có thể hoạt động khác nhau nếu một màu gần với màu xám trung bình hơn, đó là lý do tại sao các cặp màu nhãn cầu không được xem xét khả năng tiếp cận.

Cấp độ AA yêu cầu ít nhất 4,5:1 đối với văn bản nội dung thông thường và 3:1 đối với văn bản lớn (18 pt thông thường hoặc 14 pt in đậm và lớn hơn). Mức AAA nâng thanh lên 7:1 đối với văn bản thông thường và 4,5:1 đối với văn bản lớn. Các thành phần giao diện người dùng không phải văn bản và đối tượng đồ họa cần tỷ lệ 3:1 so với các màu liền kề theo tiêu chí thành công WCAG 2.1 1.4.11 — máy tính này tập trung vào các cặp văn bản nhưng áp dụng phép toán tỷ lệ tương tự.

Nhập giá trị hex nền trước (văn bản) và nền. Thứ tự không thay đổi tỷ lệ - #333 trên #FFF bằng #FFF trên #333 về mặt toán học, mặc dù chỉ có một cặp có thể sử dụng được cho kiểu chữ. Hệ thập lục phân không hợp lệ trả về dấu gạch ngang cho đến khi cả hai trường phân tích cú pháp.

Ví dụ hoạt động với các trường mặc định: tiền cảnh #333333 trên nền #FFFFFF. Màu xám đậm trên nền trắng mang lại tỷ lệ khoảng 12,63:1 — cao hơn nhiều so với AA và AAA đối với văn bản thông thường. Tóm tắt hiển thị “Đạt văn bản thông thường WCAG AA.” Các hàng AA lớn và AAA đều ghi Đạt. Đối với màu xám gần như không đạt như #767676 trên nền trắng, tỷ lệ giảm xuống khoảng 4,54:1 — hầu như không vượt qua AA bình thường.

Bảng màu thương hiệu thường cung cấp các màu nhấn không phù hợp với màu trắng - cố định bằng các sắc thái tối hơn cho vai trò văn bản trong khi vẫn giữ các điểm nhấn sáng hơn cho các dòng tiêu đề hoặc biểu tượng lớn trên 18 pt. Đừng chỉ dựa vào trọng lượng phông chữ để giải quyết độ tương phản thấp; in đậm giúp đáp ứng ngưỡng “văn bản lớn” nhưng chữ hoa nhỏ mảnh vẫn được tính là văn bản bình thường.

Các lỗi phổ biến bao gồm kiểm tra các mẫu màu lục giác trong khi giao diện người dùng thực sử dụng lớp phủ bán trong suốt (alpha làm giảm độ tương phản hiệu quả), bỏ qua các màu vòng lấy nét và chỉ kiểm tra màu đen thuần túy #000 thay vì màu xám bản sao nội dung được làm mềm. Một lỗi khác là giả định màu trạng thái xanh/đỏ có thể đọc được theo mặc định — nhiều lỗi không hiển thị trên nền trắng hoặc xám đậm.

Công cụ này là một công cụ kiểm tra toán học, không phải là kiểm tra việc tuân thủ pháp luật. Đánh giá khả năng truy cập thực tế bao gồm thứ tự tiêu điểm, đường dẫn bàn phím, chuyển động và các chỉ báo trạng thái không màu. Luôn kiểm tra với người dùng và công nghệ hỗ trợ khi vận chuyển giao diện người dùng sản xuất.

Giới hạn: chỉ các cặp hex sRGB - không tổng hợp alpha, chuyển màu hoặc văn bản trên ảnh trừ khi bạn lấy mẫu màu phẳng. Khử răng cưa subpixel và bóng văn bản có màu có thể thay đổi độ tương phản cảm nhận được một chút so với tỷ lệ được tính toán.